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

雨点打透心脏的1/2处 2023-02-24 08:16 1阅读 0赞

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

\*\* 原文可查看此处 ，搜索 uni-app 使用个推推送系统消息  
[原文可查看此处,搜索 uni-app 使用个推推送系统消息][uni-app]  
https://mp.weixin.qq.com/mp/profile\_ext?action=home&\_\_biz=Mzg3NTAzMzAxNA==&scene=124\#wechat\_redirect

###### 如果此链接在浏览器中无法打开，可将此链接发送给微信好友或者发送到微信文件传输助手。在点击打开\*\* ######

--------------------

前置条件：  
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

"push" : { 
        "igexin" : { 
            "appid" : "",
            "appkey" : "",
            "appsecret" : ""
        }
    }

appid 、appkey 、appsecret 的获取请阅读步骤 2.2 获取  
代码示例截图 manifest.json

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70]  
4. 在APP客户端监听推送消息  
可参考此处文档  
Push推送开发指南 : https://ask.dcloud.net.cn/article/34  
h5+推送消息监听 http://www.html5plus.org/doc/zh\_cn/push.html\#plus.push.addEventListener  
4.1 配置完igexin的属性值以后，在app.vue文件里面监听推送消息事件,

代码示例 app.vue 文件, 在 onLaunch 里面

// 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);

//获取cid，可根据业务逻辑，写在对应的地方

//获取cid
    var pinf = plus.push.getClientInfo();
    var cid = pinf.clientid;//客户端标识

注意：

使用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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70 1]

[扫码查看原文][Link 1]  
![扫码查看原文][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70_pic_center]

[uni-app]: https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3NTAzMzAxNA==&scene=124#wechat_redirect
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70]: /images/20230209/8a37021e67ea439496b6e3664c7242f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200708185353532.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg==,size_16,color_FFFFFF,t_70
[Link 1]: https://mp.weixin.qq.com/s/KR2NAnRs66NV_qko7u0u7Q
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200708190151141.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RTXzE0NDYzNg==,size_16,color_FFFFFF,t_70#pic_center