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;”。