消息推送 - 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，用户点击推送消息后，直接打开新闻详情，实现消息直达的需求；推送内容如下：

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

示例代码如下： 

  1. /**  
  2.  * 当wap2app初始化完成时，会触发 onLaunch  
  3.  * @param {Object} options  
  4.  */  
  5. onLaunch: function (options) {  
  6.   //应用初始化  
  8.   /******推送消息监听代码开始******/  
  10.   //监听click事件，用户从消息中心点击触发的  
  11.   plus.push.addEventListener("click", function (msg) {  
  12.     console.log("You clicked: " + msg.title); //推送消息标题  
  13.     console.log("You clicked: " + msg.content); //推送消息内容  
  14.     //根据payload传递过来的数据，打开一个详情  
  15.     var payload = msg.payload;  
  16.     if (payload) {  
  17.       // payload 按照规范是 Object，但实际推送过来有可能是 String，需要多一步处理；  
  18.       if (typeof payload === 'string') {  
  19.         payload = JSON.parse(payload);  
  20.       }  
  21.       if (typeof payload === 'object') {  
  22.         //payload是一个json对象，可以传递业务数据，开发者可以根据实际需求自定义参数  
  23.         //本示例在payload中传入新闻id，wap2app接收到推送后，直接打开新闻详情  
  24.         var detailId = payload.id;  
  25.         //wap2app.open(url)可以直接打开对应的webview  
  26.         //这里是示例，实际项目中开发者需根据M站的url拼接页面地址  
  27.         wap2app.open('https://m.example.com/detial/' + detailId + '.html');  
  28.       }  
  29.     }  
  30.   }, false);  
  32.   //监听receive事件  
  33.   plus.push.addEventListener("receive", function (msg) {  
  34.     console.log("recieve title: " + msg.title); //推送消息标题  
  35.     console.log("recieve content: " + msg.content); //推送消息内容  
  36.     //根据payload传递过来的数据，打开一个详情  
  37.     var payload;  
  38.     if (msg.payload) {  
  39.       //如透传消息不符合格式，则“payload”属性为string类型  
  40.       //这里的示例以json字符串去解析，实际上也可以做字符串匹配  
  41.       if (typeof (msg.payload) == "string") {  
  42.         try {  
  43.           payload = JSON.parse(msg.payload);  
  44.         } catch (error) {  
  45.           console.log(error);  
  46.         }  
  47.       } else if (typeof (msg.payload) == "object") {  
  48.         //iOS应用正处于前台运行时收到推送，也触发receive事件，此时payload为json对象  
  49.         payload = msg.payload;  
  50.       }  
  52.       if (payload) {  
  53.         //本示例在payload中传入新闻id，wap2app接收到推送后，直接打开新闻详情  
  54.         var detailId = payload.id;  
  55.         //wap2app.open(url)可以直接打开对应的webview  
  56.         //这里是示例，实际项目中开发者需根据M站的url拼接页面地址  
  57.         wap2app.open('https://m.example.com/detial/' + detailId + '.html');  
  58.       }  
  59.     }  
  61.   }, false);  
  63.   /******推送消息监听代码结束******/  
  64. }