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逻辑代码。

controllers.js

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);
})

remoteNotification.html

<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了一遍 ，最后就出现了这样的情景。