超详细！！！uniapp通过unipush全流程实现app消息推送

niech_cn

于 2024-08-28 13:40:47 发布

阅读量214

点赞数 7

文章标签： uni-app

本文链接：https://blog.csdn.net/qq_43206280/article/details/141638236

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

云风网
 云风笔记
 云风知识库

一、HBuilder新建APP项目

在这里插入图片描述

二、配置推送服务

1、登录Dcloud开发者中心开发者中心，查看我的应用

在这里插入图片描述

2、生成云端证书

在这里插入图片描述

3、创建平台信息

在这里插入图片描述

4、配置推送服务信息

在这里插入图片描述

这里需要关联服务空间，可以申请免费服务空间进行测试

在这里插入图片描述

三、代码配置

1、manifest.json配置推送

在这里插入图片描述

2、uniCloud关联云服务空间

在这里插入图片描述

3、uniCloud内部cloudfunctions右键新建云函数，添加uni-cloud-push依赖

在这里插入图片描述

四、获取到的客户端推送标识push_clientid

1、app.vue获取push_clientid

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			uni.getPushClientId({
			  success(res) {
			    console.log(res);
			  },
			  fail(err) {
			    console.log(err)
			  }
			})
			
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

运行代码终端打印结果如下

11:30:58.385 [云端运行:支付宝云:nch]云函数pushdemo上传完成，开始运行...
11:31:02.416 [云端运行:支付宝云:nch]运行状态：成功
11:31:02.416 [云端运行:支付宝云:nch]运行结果：{"data":{"RASS_0828_69a6b6af7384a893c5c8279eae46ba68":{"d526b890*********e729b3006b":"successed_online"}},"errCode":0,"errMsg":"success"}

1、云函数内部index.js配置推送模板

'use strict';  
const uniPush = uniCloud.getPushManager({appId:"__UNI__******"}) //注意这里需要传入你的应用appId  
exports.main = async (event, context) => {  
    return await uniPush.sendMessage({  
        "push_clientid": "d526b890*********e729b3006b",     //填写上一步在uni-app客户端获取到的客户端推送标识push_clientid  
        "force_notification":true,  //填写true，客户端就会对在线消息自动创建“通知栏消息”。  
        "title": "订单通知",      
        "content": "用户名称：test，设备名称：Q7，订单号：123456，支付金额：9.90",  
        "payload": {  
            "text":"uni-push2.0"  
        } 
    })  
}