uni-app 使用个推推送系统消息

大鱼说小事 發表於 2020-7-9 09:46:00

原文可查看此处，搜索 uni-app 使用个推推送系统消息
https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3NTAzMzAxNA==&scene=124#wechat_redirect
如果此链接在浏览器中无法打开，可将此链接发送给微信好友或者发送到微信文件传输助手。在点击打开
<hr>
 
前置条件：
1.1 开发环境：windows
1.2 开发框架 : uni-app 、H5+
1.3 编辑器 :  hbuilderx
2. 进入个推官网  ，注册申请账号，登录进入开发者中心，创建应用。
2.1 创建应用步骤：我的/应用管理/创建应用
2.2 创建完应用以后，查看应用信息，得到appId、appKey、appSecret 
 3. 打开 hbuilderx ，在 manifest.json 文件里面的源码视图下面配置 sdkConfigsd 对象下的 push 里面配置 igexin对象的属性值
代码如下：manifest.json
<div class="cnblogs_code">
<pre>"push" : {
"igexin" : {
 "appid" : "",
 "appkey" : "",
 "appsecret" : ""
}
}</pre>
</div>
appid  、appkey 、appsecret 的获取请阅读步骤 2.2 获取
 代码示例截图 manifest.json
<img src="https://img2020.cnblogs.com/blog/1699129/202007/1699129-20200709093541802-538018882.png">
 
4. 在APP客户端监听推送消息
可参考此处文档   
<h1>Push推送开发指南 : https://ask.dcloud.net.cn/article/34</h1>
h5+推送消息监听 http://www.html5plus.org/doc/zh_cn/push.html#plus.push.addEventListener
4.1 配置完igexin的属性值以后，在app.vue文件里面监听推送消息事件
 
代码示例 app.vue 文件, 在 onLaunch 里面
<div class="cnblogs_code">
<pre>// console.log('App Launch')
const _self = this;
//监听系统通知栏消息点击事件
plus.push.addEventListener('click', function(message) {
//处理点击消息的业务逻辑代码
 console.log(message);
 plus.nativeUI.toast('click:'+JSON.stringify(message));
//plus.nativeUI.toast('push click');
 _self._handlePush(message);
}, false);
//监听接收透传消息事件
plus.push.addEventListener('receive', function(message) {
console.log(message);
 plus.nativeUI.toast('receive:'+JSON.stringify(message));
//处理透传消息的业务逻辑代码
//plus.nativeUI.toast('push receive');
 _self._handlePush(message);
}, false);</pre>
</div>
获取 cid（clientid）,需要在App端自行获取，代码如下
<div class="cnblogs_code">
<pre>//获取cid
var pinf = plus.push.getClientInfo();
var cid = pinf.clientid;//客户端标识</pre>
</div>
注意：
　　
1.使用uni-app开发不需要引入SDK文件，在HbuilderX云打包时，云打包会自动根据manifest里面配置的 appid 、appkey 、appsecret 按需引入相关SDK
获取cid（clientid） : 在App内使用H5+ 进行获取
2.1 H5+获取 cid 文档 ：
http://www.html5plus.org/doc/zh_cn/push.html#plus.push.getClientInfo
3. uni-app使用plus注意事项    https://uniapp.dcloud.io/use-html5plus
uni-app不需要 plus ready 在html中使用plus的api，需要等待plus ready。而uni-app不需要等，可以直接使用。而且如果你调用plus ready，反而不会触发
4.  manifest.json 配置完成后，打包为测试包（自定义基座），测试推送消息
4.1 测试推送消息，如果不知道App设备的cid，可通过个推指定的获取cid的app工具，安装到手机上，在开发者中心，选择创建推送/配置管理/故障排查菜单，输入cid工具里的验证码
4.2 手机上安装的App必须配置了  appid  、appkey 、appsecret，否则通过cid工具里面的验证码取不到CID
<img src="https://img2020.cnblogs.com/blog/1699129/202007/1699129-20200709094439015-1522764011.png">
<div class="jfk-bubble gtx-bubble" style="visibility: visible; left: 106px; top: 246px; opacity: 1"> </div> 
来源：https://www.cnblogs.com/ts119/p/13271817.html

頁: [1]

琼殿技术论坛's Archiver

uni-app 使用个推推送系统消息