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

 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>

mian.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 }])

6编译apk 运行文件

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

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

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

时间： 2024-10-19 22:22:00

Ionic JPush极光推送插件实例的相关文章

在ionic/cordova中使用极光推送插件（jpush）

Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息打开[config.xml]修改下图内容: Stpe3:创建极光项目注册极光开发者账号,并新建项目并获取AppKey如下图: Stpe4:安装极光推送cordova插件(jpush-phonegap-plugin) 检查你的项目plugin目录中是否有[cordova-plugin-device]目录.若存在,建议先卸载他.卸载命令:ionic plugin

atitit.web 推送实现方案集合(2)---百度云,jpush 极光推送 ,个推的选型比较.o99

atitit.web 推送实现方案集合(2)---百度云,jpush 极光推送 ,个推的选型比较.o99 1.1. 云推送有推送次数或频率的限制吗? 1 1.2. 推送的消息长度 1 1.3. 离线消息的支持 2 1.4. 是否支持转义字符 2 2. 客户端身份识别机制 2 3. 绑定客户端的区别流程::jpush胜出 2 4. 文档风格比较::百度,jpush胜出 3 5. 编程sdk框架比较..个推,百度胜出 3 6. 编程风格的比较 3 6.1. 个推 3 6.2. 百度 4 6.3. J

极光推送使用实例（二） Android客户端

上一篇简单介绍了极光推送在Java服务端的实现,如果感兴趣的可以看一下极光推送使用实例(一)JAVA服务端.这篇文章介绍下极光推送在Android客户端的实现. JPush Android SDK 是作为 Android Serivice 长期运行在后台的,从而创建并保持长连接,保持永远在线的能力.JPush Android SDK 由于使用自定义协议,协议体做得极致地小,流量消耗非常地小.电量方面,JPush Android SDK 经过持续地优化,尽可能减少不必要的代码执行:并且,长期的版本

Android JPush极光推送应用

JPush纠结了5-6个小时,一直报下面的错误,纠结! [AndroidUtil] AndroidManifest.xml missing required intent filter for PushReceiver: cn.jpush.android.intent.NOTIFICATION_RECEIVED_PROXY 觉得明明是已经添加了cn.jpush.android.intent.NOTIFICATION_RECEIVED_PROXY 主要问题是主包名没有弄好,才导致的错误!接下来感谢

IONIC集成jPush极光推送

一.简介: 极光推送(JPush)是独立的第三方云推送平台,致力于为全球移动应用开发者提供专业.高效的移动消息推送服务. 极光推送,英文简称 JPush,是一个面向普通开发者开放的,免费的第三方消息推送服务. 二.官网:https://www.jiguang.cn/ 首先注册一个账号,登陆平台,在控制台添加我们的应用信息点击提交会成一个AppKey和Master Secret这两个密钥主要用来配置服务端发送通知使用. 三.开整官方的栗子:https://github.com/jpush/j

JPush 极光推送实战

极光推送的"自定义消息"很给力啊,他不是发送一条消息到状态栏,而是直接把消息内容传到APP中需要的地方,估计很多APP的验证码就是通过这种形式搞出来的. 简介官网:https://www.jpush.cn/ 极光推送(JPush)是一个端到端的推送服务,使得服务器端消息能够及时地推送到终端用户手机上,让开发者积极地保持与用户的连接,从而提高用户活跃度.提高应用的留存率. 主要功能保持与服务器的长连接,以便消息能够即时推送到达客户端接收通知与自定义消息,并向开发者App传递相关信息

AndroidStudio离线打包MUI集成JPush极光推送并在java后端管理推送

1.AndroidStudio离线打包MUI 如何离线打包请参看上篇随笔<AndroidStudio离线打包MUI> 2.集成极光推送官方文档:https://docs.jiguang.cn/jpush/client/Android/android_guide/ 建议采用 jcenter 自动集成的方式,手动集成对新手来说容易出错使用jcenter自动集成的开发者,不需要在项目中添加jar和so,jcenter会自动完成依赖:在AndroidManifest.xml中不需要添加任何JPu

Java.lang.UnsatisfiedLinkError android studio集成Jpush极光推送

今天学习了极光推送,想把它集成到自己的应用里面,我的开发环境是android studio 1.2,期间遇到了错误: Couldn't load jpush174 from loader dalvik.system.PathClassLoader findLibrary returned null,原因是由于android studio不能正确的解决libjpush174.so文件造成的,解决步骤如下: 1.首先按照官网教程配置环境,链接如下:http://docs.jpush.io/guide

极光推送使用实例（一）服务端

最近一直在做后台开发,但心里还是总惦记着Android,感觉还是Android有意思.正好项目中要用到极光推送,今天抽空来记录下这两天的研究成果. 我们知道iOS有自己的推送服务,但很遗憾Android没有原生的推送服务,现在有很多第三方的推送服务,比如个推.极光.亚马逊.百度云.聚能等.今天我们就来研究下极光推送的后台服务器如何实现. 关键点: 1.首先最好是把极光官网Java后台服务器的demo下载下来,里面有我们需要的jar包,以及example. 2.极光推送的关键jpushClient

Ionic JPush极光推送 插件实例

Ionic JPush极光推送 插件实例的相关文章

Ionic JPush极光推送插件实例

Ionic JPush极光推送插件实例的相关文章