不同于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;”。