Ionic下的Jpush消息推送與內容顯示

本文測試Jpush將消息推送給手機端，手機端點擊通知欄，即可看到具體的推送內容。

1.極光推送消息設置

 

設置附加字段：

 

點擊發送，手機端收到消息通知。

2.手機接收到的消息通知

點擊之后進入具體的頁面

 

具體代碼設置：

3.  設置極光服務和消息接收接口：

//啟動極光推送服務
window.plugins.jPushPlugin.init();

//接收消息並跳轉相應的頁面
window.plugins.jPushPlugin.openNotificationInAndroidCallback = function (data)
{
     var obj = JSON.parse(data);
     var idValue = obj.extras['cn.jpush.android.EXTRA'].id;//對應極光推送： 附加字段的鍵名
     var alert = obj.extras['cn.jpush.android.ALERT'];
     $state.go('message', {id: idValue + alert});
};

4.Message.html頁面內容

<ion-view>
  <ion-nav-title>
    消息內容
  </ion-nav-title>
  <ion-nav-buttons side="left">
    <a class="button button-icon ion-ios-arrow-back" ng-click="toClose()"></a>
  </ion-nav-buttons>

  <ion-content class="padding">
    {{message}}
  </ion-content>
</ion-view>

5.Message.html對應的Contoller

angular.module("ionicApp.controllers")
.controller("MessageController",['$scope','$stateParams', function ($scope,$stateParams)
{
           var id = $stateParams.id;
           $scope.message='消息id：'+id;
}]);

6.路徑設置

{
     name  :  'message',
     value :  {
                  url: "/message/:id/",
                  templateUrl: "templates/base/message.html",
                  controller: "MessageController"
              }
}

 

結論：基本上達到預期的效果，還需要進一步深入研究內容的應用