不同于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中使用第三方插件极光推送的更多相关文章

  1. ionic 安装本地插件极光推送

    问题:按照官方文档的步骤 假如把插件保存到了D:\push\jpush,当执行到 cordova plugin add D:\push\jpush 的时候,ionic 不是从本地目录安装,而是从reg ...

  2. Android开发之第三方推送JPush极光推送知识点详解 学会集成第三方SDK推送

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985 下面是一些知识点介绍,后期将会带领大家进行代码实战: 一.Android实现推送方式解决方案: 1.推 ...

  3. iOS极光推送SDK的使用流程

    一.极光推送简介 极光推送是一个端到端的推送服务,使得服务器端消息能够及时地推送到终端用户手机上,整合了iOS.Android和WP平台的统一推送服务.使用起来方便简单,已于集成,解决了原生远程推送繁 ...

  4. 在ionic/cordova中使用极光推送插件(jpush)

    Stpe1:创建一个项目(此处使用的是tab类型的项目,创建方式可参照我前一篇如何离线创建Ionic1项目) Stpe2:修改项目信息 打开[config.xml]修改下图内容:

  5. ionic中极光推送的集成

    1.到极光官网注册账号,新建应用获得appkey. 详见:https://www.jiguang.cn/app/list 2.引入jpush插件 详见:https://github.com/jpush ...

  6. Ionic项目中使用极光推送

    Ionic项目中使用极光推送-android   对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...

  7. Ionic项目中使用极光推送-android

    对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档),使用的是GitHub上的 PushPlugin ...

  8. 添加极光推送以及在ios中的问题

    项目为 ionic1 + angular1 1.添加极光推送插件 用cordova进行添加 cordova plugin add jpush-phonegap-plugin --variable AP ...

  9. cordova极光推送插件使用

    首先是在极光官网注册登录账号,然后创建推送应用,创建完应用之后,点击打开应用,设置应用的包名,保存: 然后回到应用主界面,看到AppKey,以及MasterSecret,这时候MasterSecret ...

随机推荐

  1. Java中ArrayList的对象引用问题

    前言事件起因是由于同事使用ArrayList的带参构造方法进行ArrayList对象复制,修改新的ArrayList对象中的元素(对象)的成员变量时也会修改原ArrayList中的元素(对象)的成员变 ...

  2. jstree前端设置默认选中项

    $("#jstree").on("loaded.jstree", function (event, data) { var currDeptId = crm.g ...

  3. unsigned __int64 打印方法

    原文出处 long 和 int 范围是[-2^31,2^31),即-2147483648~2147483647. 而unsigned范围是[0,2^32),即0~4294967295.也就是说,常规的 ...

  4. Bootstrap历练实例:响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. React后台管理系统- rc-pagination分页组件封装

    1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...

  6. Linux命令安装vnc服务端与vnc的客户端

    第一歩:运行命令 yum install tigervnc-server -y 第二歩:安装telnet 第三歩:运行vncserver,创建桌面 vncserver -kill :1  删除桌面1的 ...

  7. 深入理解React虚拟DOM

    一.什么是虚拟DOM 虚拟DOM可以看做一棵模拟了DOM树的JavaScript对象树.比如: var element = { element: 'ul', props: { id:"uli ...

  8. ARC机制中的Strong和weak

    什么是ARC Automatic Reference Counting,自动引用计数,即ARC,可以说是WWDC2011和iOS5所引入的最大的变革和最激动人心的变化.ARC是新的LLVM 3.0编译 ...

  9. AngularJS1.X版本双向绑定九问

    前言 由于工作的原因,使用angular1.x版本已经有一段时间了,虽然angualr2升级后就完全重构了,但每个版本存在也有一定的道理.话不多说,进入正题. 1.双向绑定的原理是什么? Angual ...

  10. 通过Tcode查找Badi或者客户出口

    https://wiki.scn.sap.com/wiki/display/ABAP/Code+To+Find+BAdi Created by Naresh Reddy K, last modifie ...