您的位置：首页 > 其它

Ionic JPush极光推送插件实例

2016-07-04 17:31 323 查看

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 404 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 > -1) {
url = url.substring(idx+1);
}
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==0){
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==0){
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:1,msg:'消息一'},
{id:2,msg:'消息二'},
{id:3,msg:'消息三'},
{id:4,msg:'消息四'},
{id:5,msg:'消息五'},
{id:6,msg:'消息六'},
{id:7,msg:'消息七'},
{id:8,msg:'消息八'}
];

return {
notices:notices
};
}])

6编译apk 运行文件

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

Ionic JPush极光推送 插件实例

Ionic JPush极光推送插件实例