首页 > 代码库 > ionic 集成jpush

ionic 集成jpush

参:http://www.cnblogs.com/linsu/p/5641158.html

默认用户已在极光添加应用 已拿到appKey;

1.进入项目根目录

cd d:/jpushDemo

2.添加jpush插件

cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable APP_KEY=your appkey

3.修改plugins.xml

查看 jpushDemo》plugins》jpush-phonegap-plugin》plugins.xml 大概在 line 13 

查找

<preference name="APP_KEY">

修改为

    <preference name="APP_KEY"  value=http://www.mamicode.com/"your appkey" />

4.添加android平台

ionic platform add android

5.编写代码

index.html

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
 6     <title></title>
 7 
 8     <link href=http://www.mamicode.com/"lib/ionic/css/ionic.css" rel="stylesheet">
 9     <link href=http://www.mamicode.com/"css/style.css" rel="stylesheet">
10 
11     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
12     <link href=http://www.mamicode.com/"css/ionic.app.css" rel="stylesheet">
13     -->
14 
15     <!-- ionic/angularjs js -->
16     <script src=http://www.mamicode.com/"lib/ionic/js/ionic.bundle.js"></script>
17 
18     <!-- cordova script (this will be a 404 during development) -->
19     <script src=http://www.mamicode.com/"cordova.js"></script>
20 
21     <!-- your apps js -->
22     <script src=http://www.mamicode.com/"js/app.js"></script>
23     <script src=http://www.mamicode.com/"js/controllers.js"></script>
24     <script src=http://www.mamicode.com/"js/services.js"></script>
25 
26 
27   </head>
28   <body ng-app="starter">
29   <ion-nav-bar class="bar-positive">
30     <ion-nav-back-button></ion-nav-back-button>
31   </ion-nav-bar>
32   <ion-nav-view name="mainContainer"></ion-nav-view>
33   </body>

main.html

 1 <ion-view view-title="极光推送Ionic Demo">
 2   <ion-content class="padding">
 3         <form name="jPushForm">
 4           <button class="button button-block button-positive" ng-click="init()">启动推送服务</button>
 5           <button class="button button-block button-energized" ng-click="stopPush()">停止推送服务</button>
 6           <button class="button button-block button-royal" ng-click="resumePush()">重启推送服务</button>
 7           <button class="button button-block button-light" ng-click="getPushState()">查看服务状态</button>
 8           <div class="list">
 9             <div class="item item-input-inset">
10               <label class="item-input-wrapper">
11                 <input type="text" placeholder="设置tag,多个tag用逗号分隔" required ng-trim="true" ng-model="options.tags" />
12               </label>
13 
14               <input type="submit" class="button button-small button-positive" value=http://www.mamicode.com/"设置" ng-click="setTags()" />
15               <!-- <button class="button button-small button-positive" ng-click="setTags()"> 
16                 设置
17               </button>-->
18             </div>
19             
20 
21             <div class="item item-input-inset">
22               <label class="item-input-wrapper">
23                 <input type="text" placeholder="设置alias" required ng-trim="true" ng-model="options.alias" />
24               </label>
25               <input type="submit" class="button button-small button-positive" value=http://www.mamicode.com/"设置" ng-click="setAlias()" />
26               <!-- <button class="button button-small button-positive" ng-click="setAlias()">
27                 设置
28               </button> -->
29             </div>
30           </div>
31           <button class="button button-block button-balanced" ng-click="setTagsWithAlias()">同时设置</button>
32           <button class="button button-block button-royal" ng-click="cleanTagAndAlias()">清空设置</button>
33           <a href=http://www.mamicode.com/"#/list">消息列表</a>
34           <span class="error" ng-show="jPushForm.input.$error.required">要求输入设置值</span>
35           
36           <p>{{result}}</p>
37         </form>
38       </ion-content>
39 </ion-view>

list.html

1 <ion-view title="消息列表">
2     <ion-content>
3         <ion-list>
4             <ion-item ng-repeat="item in items" href=http://www.mamicode.com/"#/detail?id={{item.id}}">
5             对应消息:{{item.id}}
6             </ion-item>
7         </ion-list>
8     </ion-content>
9 </ion-view>

detail.html

<ion-view title="消息内容">
    <ion-content class="padding">
        {{message}}
    </ion-content>
</ion-view>

app.js

 1 var jpushdemo=angular.module(starter, [ionic]);
 2 
 3 jpushdemo.run(function($ionicPlatform,$state,jpushService) {
 4   $ionicPlatform.ready(function() {
 5     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
 6     // for form inputs)
 7     if(window.cordova && window.cordova.plugins.Keyboard) {
 8       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
 9     }
10     if(window.StatusBar) {
11       StatusBar.styleDefault();
12     }
13 
14 
15 
16     //推送初始化
17     var setTagsWithAliasCallback=function(event){
18       window.alert(result code:+event.resultCode+ tags:+event.tags+ alias:+event.alias);
19     }
20     var openNotificationInAndroidCallback=function(data){
21       var json=data;
22       window.alert(json);
23       if(typeof data =http://www.mamicode.com/== string){
24         json=JSON.parse(data);
25       }
26       var id=json.extras[cn.jpush.android.EXTRA].id;
27       //window.alert(id);
28       var alert = json.extras[cn.jpush.android.ALERT];
29       $state.go(detail,{id:id+alert});
30     }
31     var config={
32       stac:setTagsWithAliasCallback,
33       oniac:openNotificationInAndroidCallback
34     };
35 
36     jpushService.init(config);
37 
38     //启动极光推送服务
39     window.plugins.jPushPlugin.init();
40     window.plugins.jPushPlugin.setDebugMode(true);
41   });
42 
43   window.onerror = function(msg, url, line) {
44    var idx = url.lastIndexOf("/");
45    if(idx > -1) {
46     url = url.substring(idx+1);
47    }
48    alert("ERROR in " + url + " (line #" + line + "): " + msg);
49    return false;
50   };
51 })
52 
53 jpushdemo.config([$stateProvider, $urlRouterProvider, function ($stateProvider,$urlRouterProvider) {
54   $stateProvider.state(main,{
55     url:/main?url,
56     views:{
57       mainContainer:{
58         templateUrl: "templates/main.html",
59         controller:mainCtrl
60       }
61     }
62   }).state(list,{
63     url:/list,
64     views:{
65       mainContainer:{
66         templateUrl:templates/list.html,
67         controller:listCtrl
68       }
69     }
70   }).state(detail,{
71     url:/detail?id,
72     views:{
73       mainContainer:{
74         templateUrl:templates/detail.html,
75         controller:detailCtrl
76       }
77     }
78   });
79   $urlRouterProvider.otherwise(/main)
80 }])

controller.js

 1 jpushdemo.controller(mainCtrl, [$scope,$ionicPopup,$stateParams,$state,jpushService,
 2   function ($scope,$ionicPopup,$stateParams,$state,jpushService) {
 3     $scope.message="";
 4 
 5     $scope.options={
 6         tags:"",
 7         alias:""
 8     };
 9 
10     $scope.result="";
11 
12     // $scope.$on(‘$ionicView.beforeEnter‘,function(){
13     //     var url=$stateParams.url;
14     //     if(url){
15     //         $state.go(url);
16     //     }
17     // });
18 
19     $scope.init=function(){
20         jpushService.init();
21         window.alert(执行启动);
22     };
23 
24     $scope.stopPush=function(){
25         jpushService.stopPush();
26         window.alert(执行停止);
27     };
28 
29     $scope.resumePush=function(){
30         jpushService.resumePush();
31         window.alert(执行重启);
32     };
33 
34     $scope.getPushState=function(){
35         jpushService.isPushStopped(function(data){
36             if(data=http://www.mamicode.com/=0){
37                 window.alert(启动);
38             }else{
39                 window.alert(停止);
40             }
41         });
42     };
43 
44     $scope.setTags=function(){
45         var tagArr=$scope.options.tags.split(,);
46         setTagsWithAlias(tagArr,null);
47         //jpushService.setTags(tagArr);
48     }
49 
50     $scope.setAlias=function(){
51         var alias=$scope.options.alias;
52         setTagsWithAlias(null,alias);
53         //jpushService.setAlias(alias);
54     }
55 
56     var setTagsWithAlias=function(tags,alias){
57         jpushService.setTagsWithAlias(tags,alias);
58     }
59     $scope.setTagsWithAlias=function(){
60         var tagArr=$scope.options.tags.split(,)
61         if(tagArr.length==0){
62             tagArr=null;
63         }
64 
65         var alias=$scope.options.alias;
66         if(alias===‘‘){
67             alias=null;
68         }
69         setTagsWithAlias(tagArr,alias);
70 
71     }
72     $scope.cleanTagAndAlias=function(){
73         var tags=[];
74         var alias="";
75         setTagsWithAlias(tags,alias);
76     }
77 }])
78 
79 .controller(listCtrl, [$scope,noticeService ,function ($scope,noticeService) {
80     $scope.items=noticeService.notices;
81 }])
82 
83 .controller(detailCtrl, [$scope,$stateParams, function ($scope,$stateParams) {
84     var id=$stateParams.id;
85     $scope.message=消息id:+id;
86 }])

services.js

 1 jpushdemo.factory(‘jpushService‘,[‘$http‘,‘$window‘,‘$document‘,function($http,$window,$document){
 2     var jpushServiceFactory={};
 3 
 4     //var jpushapi=$window.plugins.jPushPlugin;
 5 
 6     //启动极光推送
 7     var _init=function(config){
 8         $window.plugins.jPushPlugin.init();
 9         //设置tag和Alias触发事件处理
10         document.addEventListener(‘jpush.setTagsWithAlias‘,config.stac,false);
11         //打开推送消息事件处理
12         $window.plugins.jPushPlugin.openNotificationInAndroidCallback=config.oniac;
13         
14 
15         $window.plugins.jPushPlugin.setDebugMode(true);
16     }
17     //获取状态
18     var _isPushStopped=function(fun){
19         $window.plugins.jPushPlugin.isPushStopped(fun)
20     }
21     //停止极光推送
22     var _stopPush=function(){
23         $window.plugins.jPushPlugin.stopPush();
24     }
25 
26     //重启极光推送
27     var _resumePush=function(){
28         $window.plugins.jPushPlugin.resumePush();
29     }
30 
31     //设置标签和别名
32     var _setTagsWithAlias=function(tags,alias){
33         $window.plugins.jPushPlugin.setTagsWithAlias(tags,alias);
34     }
35 
36     //设置标签
37     var _setTags=function(tags){
38         $window.plugins.jPushPlugin.setTags(tags);
39     }
40 
41     //设置别名
42     var _setAlias=function(alias){
43         $window.plugins.jPushPlugin.setAlias(alias);
44     }
45 
46 
47 
48     jpushServiceFactory.init=_init;
49     jpushServiceFactory.isPushStopped=_isPushStopped;
50     jpushServiceFactory.stopPush=_stopPush;
51     jpushServiceFactory.resumePush=_resumePush;
52 
53     jpushServiceFactory.setTagsWithAlias=_setTagsWithAlias;
54     jpushServiceFactory.setTags=_setTags;
55     jpushServiceFactory.setAlias=_setAlias;
56 
57     return jpushServiceFactory;
58 }])
59 
60 
61 .factory(‘noticeService‘, [function () {
62     var notices=[
63         {id:1,msg:‘消息一‘},
64         {id:2,msg:‘消息二‘},
65         {id:3,msg:‘消息三‘},
66         {id:4,msg:‘消息四‘},
67         {id:5,msg:‘消息五‘},
68         {id:6,msg:‘消息六‘},
69         {id:7,msg:‘消息七‘},
70         {id:8,msg:‘消息八‘}
71     ];
72 
73     return {
74         notices:notices
75     };
76 }])

ionic 集成jpush