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