WeX5集成极光推送入门

引入

在项目的index.w中引入JPushPlugin插件

1
2
require("cordova!cn.jpush.phonegap.JPushPlugin");
var JPushInstance = require("./jpush");

此处注意: WeX5 studio 3.6版本中引入的是JPushPlugin版本是2.2.0,最新的版本是3.1.3,可以从JPushPlugin in GitHub更新替换。

分析

打开\Native\plugins\cn.jpush.phonegap.JPushPlugin\www目录下面的JPushPlugin.js文件,此文件封装了一套JPush的顶层实现。在这个文件中可以监听消息的各种事件。

插件通过cordova.fireDocumentEvent('jpush.receiveNotification', null);这类方法创建了一类监听事件。

我们只需要监听这些事件就可以了,在我们的业务js文件中通过以下代码将事件绑定到我们自己的业务函数中。

1
2
3
4
5
6
7
8
9
10
11
document.addEventListener("jpush.receiveNotification", this.onReceiveNotification.bind(this), false);
JPushInstance.prototype.onReceiveNotification = function(event) {
var alertContent;
if(device.platform == "Android"){
alertContent = window.plugins.jPushPlugin.receiveNotification.alert;
}else{
alertContent = event.aps.alert;
}
window.plugins.jPushPlugin.setApplicationIconBadgeNumber(0);
justep.Util.hint(alertContent);
};

onReceiveNotification()就是我们自己的业务方法,alertContent就是服务端推送过来的消息。我们可以根据消息内容进行相应的业务开发。

jpush.js文件是已经写好的业务初始化文件,在takeout外卖项目中可以拿到。

注册认证并测试

  1. 官网注册
  2. 身份认证(需要身份证正反面,手持身份证照片,提前准备好)
  3. 创建一个新应用,拿到App KeyMaster Secret(注意:安卓应用的包名一旦确定就不可以删除了,同时必须与自己项目的包名一致)
  4. 打包WeX5项目(注意:在插件列表那一步,要找到JPushPlugin插件,打勾并填入App Key
  5. 在极光开发者服务控制台,依次进入推送–>发送通知页面
  6. 编辑消息内容,选择目标平台和目标人群,最后发送

效果图:

坚持原创技术分享,您的支持将鼓励我继续创作!