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.查看终端 手机通知信息 以上代码都是从网上当得，修修改测试通过
Ionic JPush极光推送 插件实例的更多相关文章
- Ionic JPush极光推送二
1.看图解决问题 2.解决出现统计代码提示问题 修改这个java 文件 导入命名空间 import cn.jpush.android.api.JPushInterface; 添加方法 @Overr ...
- 在ionic/cordova中使用极光推送插件（jpush）
Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息 打开[config.xml]修改下图内容:
- atitit.web 推送实现方案集合(2)---百度云,jpush 极光推送 ,个推的选型比较.o99
atitit.web 推送实现方案集合(2)---百度云,jpush 极光推送 ,个推的选型比较.o99 1.1. 云推送有推送次数或频率的限制吗? 1 1.2. 推送的消息长度 1 1.3. 离线消 ...
- 极光推送使用实例（二） Android客户端
上一篇简单介绍了极光推送在Java服务端的实现,如果感兴趣的可以看一下极光推送使用实例(一)JAVA服务端.这篇文章介绍下极光推送在Android客户端的实现. JPush Android SDK 是 ...
- 使用JPush(极光推送)实现远程通知
使用JPush(极光推送)实现远程通知 远程推送是APP 必备的功能, 现在第三方的 SDK 已经做的非常完备了, 在 iOS10.0出来之后, 极光推送也及时更新了他的 SDK, 今天小试了一下效果 ...
- Laravel 集成 JPush 极光推送指北
我是一个 Laravel 小白,我是一个 Laravel 小白,我是一个 Laravel 小白(默念三遍再往下读,如果非小白就不用看了). Laravel 使用 Composer 来管理代码依赖.所以 ...
- PhoneGap 的消息推送插件JPush极光推送
一. 什么是极光推送 极光推送,使得开发者可以即时地向其应用程序的用户推送通知或者消息,与用户保持互动, 从而有效地提高留存率,提升用户体验.平台提供整合了 Android 推送.iOS 推送的统一推 ...
- ionic中极光推送的集成
1.到极光官网注册账号,新建应用获得appkey. 详见:https://www.jiguang.cn/app/list 2.引入jpush插件 详见:https://github.com/jpush ...
- cordova极光推送插件使用
首先是在极光官网注册登录账号,然后创建推送应用,创建完应用之后,点击打开应用,设置应用的包名,保存: 然后回到应用主界面,看到AppKey,以及MasterSecret,这时候MasterSecret ...
随机推荐
- keepalived的常见的健康检查方式
TCP_CHECK tcp端口检测 HTTP_GET http接口检测 MISC_CHECK 自定义脚本检测 tcp端口检测 TCP_CHECK { connect_port 80 connect_t ...
- Java监控工具介绍，VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,Java微基准测试【转】
Java监控工具介绍,VisualVm ,JProfiler,Perfino,Yourkit,Perf4J,JProbe,Java微基准测试[转] 本文是本人前一段时间做一个简单Java监控工具调研总 ...
- 解决Spring Boot Configuration Annotation Processor not found in classpath
问题截图: 解决方式: 在pom.xml文件中添加这些依赖 <dependency> <groupId>org.springframework.boot</groupId ...
- 如何将数组2对象中的属性push进数组1的对象中去，组合成新的数组
- 【JZOJ3303】城市规划
description 刚刚解决完电力网络的问题, 阿狸又被领导的任务给难住了. 刚才说过, 阿狸的国家有n 个城市, 现在国家需要在某些城市对之间建立一些贸易路线, 使得整个国家的任意两个城市都直接 ...
- 「题解」：[组合数学]：Perm 排列计数
题干: Description称一个1,2,…,N的排列P1,P2…,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,…N的排列中有多少是Magic的,答 ...
- Java-Druid：Druid
ylbtech-Java-Druid:Druid Apache Druid(孵化)是一个高性能的实时分析数据库. 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 ...
- C++ #define，typedef，using用法区别
一.#define #define 是宏定义命令,宏定义就是将一个标识符定义为一个字符串,源程序中的该标识符均以指定的字符串来代替,是预编译命令,因此会在预编译阶段被执行 1.无参宏定义 无参宏的宏名 ...
- 《DSP using MATLAB》Problem 7.35
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- Servlet与Struts的区别
启动: ● Servlet:无 ● Struts:配置filter,设置struts入口 创建: ● Servlet:继承HttpServlet,重写doGet与doPost方法: 添加注解或配置we ...