ionic中极光推送的集成

1.到极光官网注册账号，新建应用获得appkey。
详见：https://www.jiguang.cn/app/list

2.引入jpush插件
详见：https://github.com/jpush/jpush-phonegap-plugin

通过 Cordova Plugins 安装，要求 Cordova CLI 5.0+：

cordova plugin add jpush-phonegap-plugin --variable API_KEY=xxxxxx

通过 url 安装：

cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable API_KEY=xxxxxx

下载到本地安装：

cordova plugin add [localPath]  --variable API_KEY=xxxxxx

注意：安装的时候记得带上极光推送新建应用的appkey

先介绍一下jpush的几个常用的事件：

jpush.setTagsWithAlias：设置别名和标签时触发

jpush.openNotification：打开推送时触发

jpush.receiveNotification：接收到通知时触发

jpush.receiveMessage：接收到消息时触发

3：controllers逻辑代码。

controller('RemoteNotificationCtrl', function ($scope,
$rootScope) {
$scope.message = "on load view success!";
// 当设备就绪时
var onDeviceReady = function () {
$scope.message += "JPushPlugin:Device ready!";
initiateUI();
};
// 设置标签和别名
var onTagsWithAlias = function (event) {
try {
$scope.message += "onTagsWithAlias";
var result = "result code:" + event.resultCode + " ";
result += "tags:" + event.tags + " ";
result += "alias:" + event.alias + " ";
$scope.message += result
$scope.tagAliasResult = result;
} catch (exception) {
console.log(exception)
}
};
// 打开通知的回调函数
var onOpenNotification = function (event) {
try {
var alertContent;
if (device.platform == "Android") {
alertContent = window.plugins.jPushPlugin.openNotification.alert;
} else {
alertContent = event.aps.alert;
}
$scope.message += alertContent;
alert("onOpenNotification:" + alertContent);
} catch (exception) {
console.log("JPushPlugin:onOpenNotification" + exception);
}
};
// 接收到通知时的回调函数
var onReceiveNotification = function (event) {
try {
var alertContent;
if (device.platform == "Android") {
alertContent = window.plugins.jPushPlugin.receiveNotification.alert;
} else {
alertContent = event.aps.alert;
}
$scope.message += alertContent;
$scope.notificationResult = alertContent;
} catch (exception) {
console.log(exception)
}
};

// 接收到消息时的回调函数
var onReceiveMessage = function (event) {
try {
var message;
if (device.platform == "Android") {
message = window.plugins.jPushPlugin.receiveMessage.message;
} else {
message = event.content;
}
$scope.message += message;
$scope.messageResult = message;
} catch (exception) {
console.log("JPushPlugin:onReceiveMessage-->" + exception);
}
};

// 获取RegistrationID
var getRegistrationID = function () {
window.plugins.jPushPlugin.getRegistrationID(function (data) {
try {
console.log("JPushPlugin:registrationID is " + data);
if (data.length == 0) {
var t1 = window.setTimeout(getRegistrationID, 1000);
}
$scope.message += "JPushPlugin:registrationID is " + data;
$scope.registrationID = data;
} catch (exception) {
console.log(exception);
}
});

};
//初始化jpush
var initiateUI = function () {
try {
window.plugins.jPushPlugin.init();
getRegistrationID();
if (device.platform != "Android") {
window.plugins.jPushPlugin.setDebugModeFromIos();
window.plugins.jPushPlugin.setApplicationIconBadgeNumber(0);
} else {
window.plugins.jPushPlugin.setDebugMode(true);
window.plugins.jPushPlugin.setStatisticsOpen(true);
}
$scope.message += '初始化成功! \r\n';
} catch (exception) {
console.log(exception);
}
}

$scope.formData = {}
// 设置别名和标签
$scope.setTagsAndAlias = function () {
try {
$scope.message += "准备设置tag/alias...";
var tags = [];
if ($scope.formData.tag1 != "") {
tags.push($scope.formData.tag1);
}
if ($scope.formData.tag2 != "") {
tags.push($scope.formData.tag2);
}
window.plugins.jPushPlugin.setTagsWithAlias(tags, $scope.formData.alias);
$scope.message += '设置tags和alias成功！ \r\n';
} catch (exception) {
console.log(exception);
}
}

// 添加对回调函数的监听
document.addEventListener("jpush.setTagsWithAlias", onTagsWithAlias, false);
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("jpush.openNotification", onOpenNotification, false);
document.addEventListener("jpush.receiveNotification", onReceiveNotification, false);
document.addEventListener("jpush.receiveMessage", onReceiveMessage, false);
})

<ion-view title="Notification">
<ion-content>
<div class="row">
<div class="col">
RegistrationID:{{registrationID}}
</div>
</div>
<div class="row">
<div class="col">
Tags:
</div>
</div>
<div class="row">
<div class="col">
<label class="item item-input">
<input type="text"  placeholder="tag1" placeholder="formData.tag1">
</label>
</div>
</div>
<div class="row">
<div class="col">
<label class="item item-input">
<input type="text"  placeholder="tag2" placeholder="formData.tag1">
</label>
</div>
</div>
<div class="row">
<div class="col">
Alias:
<label class="item item-input">
<input type="text" placeholder="Alias" ng-model="formData.alias">
</label>
</div>
</div>
<div class="row">
<div class="col">
<button class="button button-positive" ng-click="setTagsAndAlias()">add tags and alias</button>
</div>
</div>
<div class="row">
<div class="col">
设置tag/alias结果:{{tagAliasResult}} <br> 接受的通知内容:{{notificationResult}} <br> 接受的自定义消息:{{messageResult}}
<br>
</div>
</div>
<div class="row">
<p>{{message}}</p>
</div>
</ion-content>
</ion-view>

效果

设置别名和标签可实现批量设备推送，比如这里我设置了别名为tonge，那么这条推送消息就只有我这台设备可以收得到，下面是效果图

【1】【2】【3】

技巧分享

通常在开发调试阶段，特别是真机调试时，往往不知道代码运行到哪一行报错，这里有个小技巧，可看到controller和view中我设了个message的变量，来监测代码运行的步骤。有的同学就要说了，用alert岂不是更方便，alert确实可行，但如果在发布上线后你忘记注释掉alert，用户在使用时突然弹出一段json数据，自己脑补用户一脸大写懵逼的表情。不要问我怎么知道的，我是不会告诉你曾经我在做大型web项目开发时，使用ajax请求数据都alert了一遍 ，最后就出现了这样的情景。