Ionic2中使用第三方插件极光推送
不同于Ionic1中插件的调用,Ionic2提供了Ionic Native。Ionic Native封装了一些常见的插件(如:Camera、Barcode Scanner等),这些插件的使用方式在官方文档中有详细的描述。今天我们所说的第三方插件就是指Ionic Native中没有,但在Ionic1中可以使用的插件。
创建新项目
ionic start JPush --v2 --id dpary.jpush.demo
运行以上命令,创建包名为“dpary.jpush.demo”的Ionic2应用。详见Ionic常用命令。Ionic
极光开发者服务创建应用
安装极光推送插件时,需要使用极光提供的AppKey。进入极光开发者服务后台,点击右上角的创建应用(没有极光帐号的自己去注册,这里不再说明),如图,按要求填写必要内容
注意应用包名要于第一步生成的包名一致
安装极光推送插件
在项目目录下执行如下命令:
cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable API_KEY=your_jpush_appkey
将your_jpush_appkey替换为极光开发者服务提供的AppKey即可。
在项目中使用
src/pages/home/home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button block (click)="initJPush()">启动推送</button>
<ion-item>
<ion-label floating>别名 Alias</ion-label>
<ion-input type="text" [(ngModel)]="alias"></ion-input>
</ion-item>
<button ion-button block (click)="setAlias()" [disabled]="alias == ''">设置别名</button>
<ion-list>
<ion-item text-wrap *ngFor="let msg of msgList">
<ion-avatar item-left>
<img src="assets/user.jpg">
</ion-avatar>
<h2>通知</h2>
<p>{{msg.content}}</p>
</ion-item>
</ion-list>
</ion-content>
|
src/pages/home/home.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
declare var window;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
alias: string = '';
msgList:Array<any>=[];
constructor(public navCtrl: NavController) {
}
initJPush() {
//启动极光推送
if (window.plugins && window.plugins.jPushPlugin) {
window.plugins.jPushPlugin.init();
document.addEventListener("jpush.receiveNotification", () => {
this.msgList.push({content:window.plugins.jPushPlugin.receiveNotification.alert})
}, false);
}
}
setAlias() {
//设置Alias
if (this.alias && this.alias.trim() != '') {
window.plugins.jPushPlugin.setAlias(this.alias);
}else alert('Alias不能为空')
}
}
|
运行效果
ionic run android
在极光开发者服务发送通知,测试手机端是否可以收到通知。
总结
使用第三方插件时,在ts文件中声明即可。如本文使用的极光推送插件,插件被挂载至“window.plugins.jPushPlugin”,所以此处声明“declare var window;”。
Ionic2中使用第三方插件极光推送的更多相关文章
- ionic 安装本地插件极光推送
问题:按照官方文档的步骤 假如把插件保存到了D:\push\jpush,当执行到 cordova plugin add D:\push\jpush 的时候,ionic 不是从本地目录安装,而是从reg ...
- Android开发之第三方推送JPush极光推送知识点详解 学会集成第三方SDK推送
作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 下面是一些知识点介绍,后期将会带领大家进行代码实战: 一.Android实现推送方式解决方案: 1.推 ...
- iOS极光推送SDK的使用流程
一.极光推送简介 极光推送是一个端到端的推送服务,使得服务器端消息能够及时地推送到终端用户手机上,整合了iOS.Android和WP平台的统一推送服务.使用起来方便简单,已于集成,解决了原生远程推送繁 ...
- 在ionic/cordova中使用极光推送插件(jpush)
Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息 打开[config.xml]修改下图内容:
- ionic中极光推送的集成
1.到极光官网注册账号,新建应用获得appkey. 详见:https://www.jiguang.cn/app/list 2.引入jpush插件 详见:https://github.com/jpush ...
- Ionic项目中使用极光推送
Ionic项目中使用极光推送-android 对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...
- Ionic项目中使用极光推送-android
对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...
- 添加极光推送以及在ios中的问题
项目为 ionic1 + angular1 1.添加极光推送插件 用cordova进行添加 cordova plugin add jpush-phonegap-plugin --variable AP ...
- cordova极光推送插件使用
首先是在极光官网注册登录账号,然后创建推送应用,创建完应用之后,点击打开应用,设置应用的包名,保存: 然后回到应用主界面,看到AppKey,以及MasterSecret,这时候MasterSecret ...
随机推荐
- Java中ArrayList的对象引用问题
前言事件起因是由于同事使用ArrayList的带参构造方法进行ArrayList对象复制,修改新的ArrayList对象中的元素(对象)的成员变量时也会修改原ArrayList中的元素(对象)的成员变 ...
- jstree前端设置默认选中项
$("#jstree").on("loaded.jstree", function (event, data) { var currDeptId = crm.g ...
- unsigned __int64 打印方法
原文出处 long 和 int 范围是[-2^31,2^31),即-2147483648~2147483647. 而unsigned范围是[0,2^32),即0~4294967295.也就是说,常规的 ...
- Bootstrap历练实例:响应式导航(带有表单)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- React后台管理系统- rc-pagination分页组件封装
1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...
- Linux命令安装vnc服务端与vnc的客户端
第一歩:运行命令 yum install tigervnc-server -y 第二歩:安装telnet 第三歩:运行vncserver,创建桌面 vncserver -kill :1 删除桌面1的 ...
- 深入理解React虚拟DOM
一.什么是虚拟DOM 虚拟DOM可以看做一棵模拟了DOM树的JavaScript对象树.比如: var element = { element: 'ul', props: { id:"uli ...
- ARC机制中的Strong和weak
什么是ARC Automatic Reference Counting,自动引用计数,即ARC,可以说是WWDC2011和iOS5所引入的最大的变革和最激动人心的变化.ARC是新的LLVM 3.0编译 ...
- AngularJS1.X版本双向绑定九问
前言 由于工作的原因,使用angular1.x版本已经有一段时间了,虽然angualr2升级后就完全重构了,但每个版本存在也有一定的道理.话不多说,进入正题. 1.双向绑定的原理是什么? Angual ...
- 通过Tcode查找Badi或者客户出口
https://wiki.scn.sap.com/wiki/display/ABAP/Code+To+Find+BAdi Created by Naresh Reddy K, last modifie ...