Ionic JPush极光推送 插件实例

1.需要去这里注册https://www.jiguang.cn

注册成功获取AppKey

备注填写应用包名规范点，在项目还要用那

2.创建ionic 项目 指定你注册时候的包名(假如：com.ionicframework.ltapp)

ionic start  -i com.ionicframework.ltapp ltapp blank

3.添加JPush 插件

进入 项目目录下 cd  ltapp

git clone https://github.com/jpush/jpush-phonegap-plugin.git

cordova 添加jpush

cordova plugin add  $dir\jpush-phonegap-plugin --variable API_KEY=you key

备注：you key =注册成功获取AppKey  $dir=当前插件所在位置 添加完成，去项目下面plugins =》plugin.xml 文件查看这个节点是否和你appkey 一样

4.添加平台 android

5.编写代码

index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
     <title></title>

     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">

     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
     <link href="css/ionic.app.css" rel="stylesheet">
     -->

     <!-- ionic/angularjs js -->
     <script src="lib/ionic/js/ionic.bundle.js"></script>

     <!-- cordova script (this will be a  during development) -->
     <script src="cordova.js"></script>

     <!-- your app's js -->
     <script src="js/app.js"></script>
     <script src="js/controllers.js"></script>
     <script src="js/services.js"></script>

   </head>
   <body ng-app="starter">
   <ion-nav-bar class="bar-positive">
     <ion-nav-back-button></ion-nav-back-button>
   </ion-nav-bar>
   <ion-nav-view name="mainContainer"></ion-nav-view>
   </body>

mian.html

 <ion-view view-title="极光推送Ionic Demo">
   <ion-content class="padding">
         <form name="jPushForm">
           <button class="button button-block button-positive" ng-click="init()">启动推送服务</button>
           <button class="button button-block button-energized" ng-click="stopPush()">停止推送服务</button>
           <button class="button button-block button-royal" ng-click="resumePush()">重启推送服务</button>
           <button class="button button-block button-light" ng-click="getPushState()">查看服务状态</button>
           <div class="list">
             <div class="item item-input-inset">
               <label class="item-input-wrapper">
                 <input type="text" placeholder="设置tag,多个tag用逗号分隔" required ng-trim="true" ng-model="options.tags" />
               </label>

               <input type="submit" class="button button-small button-positive" value="设置" ng-click="setTags()" />
               <!-- <button class="button button-small button-positive" ng-click="setTags()">
                 设置
               </button>-->
             </div>

             <div class="item item-input-inset">
               <label class="item-input-wrapper">
                 <input type="text" placeholder="设置alias" required ng-trim="true" ng-model="options.alias" />
               </label>
               <input type="submit" class="button button-small button-positive" value="设置" ng-click="setAlias()" />
               <!-- <button class="button button-small button-positive" ng-click="setAlias()">
                 设置
               </button> -->
             </div>
           </div>
           <button class="button button-block button-balanced" ng-click="setTagsWithAlias()">同时设置</button>
           <button class="button button-block button-royal" ng-click="cleanTagAndAlias()">清空设置</button>
           <a href="#/list">消息列表</a>
           <span class="error" ng-show="jPushForm.input.$error.required">要求输入设置值</span>

           <p>{{result}}</p>
         </form>
       </ion-content>
 </ion-view>

list.html

 <ion-view title="消息列表">
     <ion-content>
         <ion-list>
             <ion-item ng-repeat="item in items" href="#/detail?id={{item.id}}">
             对应消息:{{item.id}}
             </ion-item>
         </ion-list>
     </ion-content>
 </ion-view>

detail.html

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

app.js

 var jpushdemo=angular.module('starter', ['ionic']);

 jpushdemo.run(function($ionicPlatform,$state,jpushService) {
   $ionicPlatform.ready(function() {
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
     // for form inputs)
     if(window.cordova && window.cordova.plugins.Keyboard) {
       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
     }
     if(window.StatusBar) {
       StatusBar.styleDefault();
     }

     //推送初始化
     var setTagsWithAliasCallback=function(event){
       window.alert('result code:'+event.resultCode+' tags:'+event.tags+' alias:'+event.alias);
     }
     var openNotificationInAndroidCallback=function(data){
       var json=data;
       window.alert(json);
       if(typeof data === 'string'){
         json=JSON.parse(data);
       }
       var id=json.extras['cn.jpush.android.EXTRA'].id;
       //window.alert(id);
       var alert = json.extras['cn.jpush.android.ALERT'];
       $state.go('detail',{id:id+alert});
     }
     var config={
       stac:setTagsWithAliasCallback,
       oniac:openNotificationInAndroidCallback
     };

     jpushService.init(config);

     //启动极光推送服务
     window.plugins.jPushPlugin.init();
     window.plugins.jPushPlugin.setDebugMode(true);
   });

   window.onerror = function(msg, url, line) {
    var idx = url.lastIndexOf("/");
    if(idx > -) {
     url = url.substring(idx+);
    }
    alert("ERROR in " + url + " (line #" + line + "): " + msg);
    return false;
   };
 })

 jpushdemo.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,$urlRouterProvider) {
   $stateProvider.state('main',{
     url:'/main?url',
     views:{
       'mainContainer':{
         templateUrl: "templates/main.html",
         controller:'mainCtrl'
       }
     }
   }).state('list',{
     url:'/list',
     views:{
       'mainContainer':{
         templateUrl:'templates/list.html',
         controller:'listCtrl'
       }
     }
   }).state('detail',{
     url:'/detail?id',
     views:{
       'mainContainer':{
         templateUrl:'templates/detail.html',
         controller:'detailCtrl'
       }
     }
   });
   $urlRouterProvider.otherwise('/main')
 }])

controller.js

 jpushdemo.controller('mainCtrl', ['$scope','$ionicPopup','$stateParams','$state','jpushService',
   function ($scope,$ionicPopup,$stateParams,$state,jpushService) {
     $scope.message="";

     $scope.options={
         tags:"",
         alias:""
     };

     $scope.result="";

     // $scope.$on('$ionicView.beforeEnter',function(){
     //     var url=$stateParams.url;
     //     if(url){
     //         $state.go(url);
     //     }
     // });

     $scope.init=function(){
         jpushService.init();
         window.alert('执行启动');
     };

     $scope.stopPush=function(){
         jpushService.stopPush();
         window.alert('执行停止');
     };

     $scope.resumePush=function(){
         jpushService.resumePush();
         window.alert('执行重启');
     };

     $scope.getPushState=function(){
         jpushService.isPushStopped(function(data){
             if(data==){
                 window.alert('启动');
             }else{
                 window.alert('停止');
             }
         });
     };

     $scope.setTags=function(){
         var tagArr=$scope.options.tags.split(',');
         setTagsWithAlias(tagArr,null);
         //jpushService.setTags(tagArr);
     }

     $scope.setAlias=function(){
         var alias=$scope.options.alias;
         setTagsWithAlias(null,alias);
         //jpushService.setAlias(alias);
     }

     var setTagsWithAlias=function(tags,alias){
         jpushService.setTagsWithAlias(tags,alias);
     }
     $scope.setTagsWithAlias=function(){
         var tagArr=$scope.options.tags.split(',')
         if(tagArr.length==){
             tagArr=null;
         }

         var alias=$scope.options.alias;
         if(alias===''){
             alias=null;
         }
         setTagsWithAlias(tagArr,alias);

     }
     $scope.cleanTagAndAlias=function(){
         var tags=[];
         var alias="";
         setTagsWithAlias(tags,alias);
     }
 }])

 .controller('listCtrl', ['$scope','noticeService' ,function ($scope,noticeService) {
     $scope.items=noticeService.notices;
 }])

 .controller('detailCtrl', ['$scope','$stateParams', function ($scope,$stateParams) {
     var id=$stateParams.id;
     $scope.message='消息id：'+id;
 }])

services.js

 jpushdemo.factory('jpushService',['$http','$window','$document',function($http,$window,$document){
     var jpushServiceFactory={};

     //var jpushapi=$window.plugins.jPushPlugin;

     //启动极光推送
     var _init=function(config){
         $window.plugins.jPushPlugin.init();
         //设置tag和Alias触发事件处理
         document.addEventListener('jpush.setTagsWithAlias',config.stac,false);
         //打开推送消息事件处理
         $window.plugins.jPushPlugin.openNotificationInAndroidCallback=config.oniac;

         $window.plugins.jPushPlugin.setDebugMode(true);
     }
     //获取状态
     var _isPushStopped=function(fun){
         $window.plugins.jPushPlugin.isPushStopped(fun)
     }
     //停止极光推送
     var _stopPush=function(){
         $window.plugins.jPushPlugin.stopPush();
     }

     //重启极光推送
     var _resumePush=function(){
         $window.plugins.jPushPlugin.resumePush();
     }

     //设置标签和别名
     var _setTagsWithAlias=function(tags,alias){
         $window.plugins.jPushPlugin.setTagsWithAlias(tags,alias);
     }

     //设置标签
     var _setTags=function(tags){
         $window.plugins.jPushPlugin.setTags(tags);
     }

     //设置别名
     var _setAlias=function(alias){
         $window.plugins.jPushPlugin.setAlias(alias);
     }

     jpushServiceFactory.init=_init;
     jpushServiceFactory.isPushStopped=_isPushStopped;
     jpushServiceFactory.stopPush=_stopPush;
     jpushServiceFactory.resumePush=_resumePush;

     jpushServiceFactory.setTagsWithAlias=_setTagsWithAlias;
     jpushServiceFactory.setTags=_setTags;
     jpushServiceFactory.setAlias=_setAlias;

     return jpushServiceFactory;
 }])

 .factory('noticeService', [function () {
     var notices=[
         {id:,msg:'消息一'},
         {id:,msg:'消息二'},
         {id:,msg:'消息三'},
         {id:,msg:'消息四'},
         {id:,msg:'消息五'},
         {id:,msg:'消息六'},
         {id:,msg:'消息七'},
         {id:,msg:'消息八'}
     ];

     return {
         notices:notices
     };
 }])

6编译apk 运行文件

备注：编译过程中可能有错误，具体看情况处理 ，一般能生成apk 就运行了

7.生成apk 目录在项目文件 platforms\android\build\outputs  安装运行

8.查看终端  手机通知信息 以上代码都是从网上当得，修修改测试通过