DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2017-11-20 22:02
  • 更新:2021-08-05 15:12
  • 阅读:27285

消息推送 - wap2app教程

分类:wap2app

wap2app应用目前支持集成个推平台,可以向用户发送推送消息。

wap2app的推送开发,分为三个部分:

  1. 个推平台申请账号及应用登记,获取应用的appid、appkey、appsecret参数;
  2. 本地manifest.json中配置推送权限及个推参数
  3. 本地app.js中编写推送消息监听代码

其中,前两项和5+ App的配置方法相同,参考推送插件开发指南即可,其中有推送原理的详细说明;为了便于理解,这里再次简述一下推送的相关概念。

推送概念简述

推送消息分为普通推送和透传推送,区别在于:

  • 普通推送只有消息标题和消息内容;
  • 透传消息除了消息标题、消息内容外,还有payload字段,payload是一个json对象,可以包含业务自定义参数,比如新闻ID等。

wap2app应用支持click、receive两种事件监听推送消息,主要区别在于:

  • 进入手机消息中心的推送,用户点击后触发click事件
  • 透传消息不符合规范或iOS应用正处于前台运行时收到推送,此时消息不会进入手机消息中心,而会直接触发receive事件。

**Tips:**Android平台的普通消息会进入消息中心,但用户点击后仅激活应用,不会触发click事件。

为了完整实现,需要在代码中同时监听click事件和receive事件。

wap2app中的推送监听

wap2app应用需要在app.js的onLaunch事件中监听推送消息,本示例接收透传消息,透传消息中包含新闻ID,用户点击推送消息后,直接打开新闻详情,实现消息直达的需求;推送内容如下:

{title:"推送标题",content:"推送内容",payload:{id:1001}}

示例代码如下:

/**  
 * 当wap2app初始化完成时,会触发 onLaunch  
 * @param {Object} options  
 */  
onLaunch: function (options) {  
  //应用初始化  
  
  /******推送消息监听代码开始******/  
  
  //监听click事件,用户从消息中心点击触发的  
  plus.push.addEventListener("click", function (msg) {  
    console.log("You clicked: " + msg.title); //推送消息标题  
    console.log("You clicked: " + msg.content); //推送消息内容  
    //根据payload传递过来的数据,打开一个详情  
    var payload = msg.payload;  
    if (payload) {  
      // payload 按照规范是 Object,但实际推送过来有可能是 String,需要多一步处理;  
      if (typeof payload === 'string') {  
        payload = JSON.parse(payload);  
      }  
      if (typeof payload === 'object') {  
        //payload是一个json对象,可以传递业务数据,开发者可以根据实际需求自定义参数  
        //本示例在payload中传入新闻id,wap2app接收到推送后,直接打开新闻详情  
        var detailId = payload.id;  
        //wap2app.open(url)可以直接打开对应的webview  
        //这里是示例,实际项目中开发者需根据M站的url拼接页面地址  
        wap2app.open('https://m.example.com/detial/' + detailId + '.html');  
      }  
    }  
  }, false);  
  
  //监听receive事件  
  plus.push.addEventListener("receive", function (msg) {  
    console.log("recieve title: " + msg.title); //推送消息标题  
    console.log("recieve content: " + msg.content); //推送消息内容  
    //根据payload传递过来的数据,打开一个详情  
    var payload;  
    if (msg.payload) {  
      //如透传消息不符合格式,则“payload”属性为string类型  
      //这里的示例以json字符串去解析,实际上也可以做字符串匹配  
      if (typeof (msg.payload) == "string") {  
        try {  
          payload = JSON.parse(msg.payload);  
        } catch (error) {  
          console.log(error);  
        }  
      } else if (typeof (msg.payload) == "object") {  
        //iOS应用正处于前台运行时收到推送,也触发receive事件,此时payload为json对象  
        payload = msg.payload;  
      }  
  
  
      if (payload) {  
        //本示例在payload中传入新闻id,wap2app接收到推送后,直接打开新闻详情  
        var detailId = payload.id;  
        //wap2app.open(url)可以直接打开对应的webview  
        //这里是示例,实际项目中开发者需根据M站的url拼接页面地址  
        wap2app.open('https://m.example.com/detial/' + detailId + '.html');  
      }  
    }  
  
  }, false);  
  
  /******推送消息监听代码结束******/  
}
2 关注 分享
Neil_HL Trust

要回复文章请先登录注册

3***@qq.com

3***@qq.com

回复 3***@qq.com :
华为点击的时不触发click和receive事件,别的品牌正常???
2021-08-05 15:12
3***@qq.com

3***@qq.com

我使用web2app打包的壳推送的时候华为可以接收推送但不触发click和receive事件,别的品牌正常???
2021-08-05 15:11
grinTvT

grinTvT

应用管理好像只支持uni-app和5+app。那推送是不是只能使用第三方的推送平台了呢
2019-12-10 10:14
YAnya_f

YAnya_f

还是不行啊,第一次搞这个,不太懂
2019-09-18 15:56
1***@qq.com

1***@qq.com

wap2app怎么让透传消息显示在通知栏啊?
2019-05-22 10:19
5***@qq.com

5***@qq.com

为什么我使用wap2app.open(''); 会报Uncaught TypeError: Cannot read property 'runtime' of undefined
2018-05-16 17:33
阿旭

阿旭

我使用离线打包方式,app.js中的代码可以调试吗?怎么看到app.js中的console.log的输出
2018-04-23 16:47
Trust

Trust

回复 书无理 :
已调整,感谢反馈。HelloW2A示例工程,也会尽快同步更新的。
2018-01-24 11:22
书无理

书无理

回复 Trust :
我认为示例代码在监听receive事件时,这句代码应该有问题var detailId = msg.payload.id;,这里不应该用msg.payload.id,而是应该用payload.id 不然前面的判断就白做判断了
2018-01-24 09:46
Trust

Trust

回复 书无理 :
msg.payload 的数据类型需要多判定一下,如果是 String,就 JSON.parse 成对象。如果是 Object,则直接取相应的值即可。已调整示例
2018-01-23 21:57