消息推送 - wap2app教程

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

wap2app的推送开发，分为三个部分：

个推平台申请账号及应用登记，获取应用的appid、appkey、appsecret参数；
本地manifest.json中配置推送权限及个推参数
本地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);  

  /******推送消息监听代码结束******/  
}