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="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="lib/ionic/css/ionic.css" rel="stylesheet"> 9 <link href="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="css/ionic.app.css" rel="stylesheet"> 13 --> 14 15 <!-- ionic/angularjs js --> 16 <script src="lib/ionic/js/ionic.bundle.js"></script> 17 18 <!-- cordova script (this will be a 404 during development) --> 19 <script src="cordova.js"></script> 20 21 <!-- your app's js --> 22 <script src="js/app.js"></script> 23 <script src="js/controllers.js"></script> 24 <script src="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="设置" 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="设置" 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="#/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="#/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 === '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==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 }])
