作者:苦--但是依然love着你 | 来源:互联网 | 2023-05-18 05:46
不同于Ionic1中插件的调用,Ionic2提供了IonicNative。IonicNative封装了一些常见的插件(如:Camera、BarcodeScanner等),这些插件的使用方式在官方
不同于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>Homeion-title>
ion-navbar>
ion-header>
<ion-content padding>
<button ion-button block (click)="initJPush()">启动推送button>
<ion-item>
<ion-label floating>别名 Aliasion-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 =
'';
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() {
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;”。