ionic2集成极光推送

ionic2集成极光推送;

ionic2api:https://ionicframework.com/docs/

极光推送官网:https://www.jiguang.cn

android-怎么注册极光以及新建项目:https://docs.jiguang.cn/jpush/client/Android/android_3m/

ios-怎么注册极光以及新建项目:https://docs.jiguang.cn/jpush/client/iOS/ios_guide_new/

 

ioic项目搭建就不介绍了;

在现有的项目上集成jpush;

pack.json里添加:

{
...
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@jiguang-ionic/jpush": "^1.0.2",
    "jpush-phonegap-plugin": "~3.3.4"
  },
  "cordova": {
    "plugins": {
      ..
      "jpush-phonegap-plugin": {
        "APP_KEY": "极光appkey"
      }
     ..
    },
    "platforms": [
      "android",
      "ios"
    ]
  }
}

参照官方文档:https://github.com/jpush/jpush-phonegap-plugin

因为我们用了ionic所以我们需要@jiguang-ionic/jpush包;

app.module.ts中增加:

import { JPush } from '@jiguang-ionic/jpush';
...
  providers: [
    ...
    JPush,
    ...
  ]

注册极光

app.component.ts里增加:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { JPush } from '@jiguang-ionic/jpush';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, jpush: JPush) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      jpush.init();//注册极光
      jpush.setDebugMode(true);
    });
  }
}

监听推送home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { JPush } from '@jiguang-ionic/jpush';
import { Device } from '@ionic-native/device';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public registrationId: string;

  devicePlatform: string;
  sequence: number = 0;

  tagResultHandler = function(result) {
    var sequence: number = result.sequence;
    var tags: Array<string> = result.tags == null ? [] : result.tags;
    alert('Success!' + '\nSequence: ' + sequence + '\nTags: ' + tags.toString());
  };

  aliasResultHandler = function(result) {
    var sequence: number = result.sequence;
    var alias: string = result.alias;
    alert('Success!' + '\nSequence: ' + sequence + '\nAlias: ' + alias);
  };

  errorHandler = function(err) {
    var sequence: number = err.sequence;
    var code = err.code;
    alert('Error!' + '\nSequence: ' + sequence + '\nCode: ' + code);
  };

  constructor(public navCtrl: NavController, public jpush: JPush, device: Device) {

    this.devicePlatform = device.platform;

    document.addEventListener('jpush.openNotification', (event: any) => {
      alert('jpush.openNotification' + JSON.stringify(event));
      this.jpush.setBadge(0);
      this.jpush.setApplicationIconBadgeNumber(0);
    })

    document.addEventListener('jpush.receiveNotification', (event: any) => {
      var content;
      if (this.devicePlatform == 'Android') {
        content = event.alert;
      } else { 
        content = event.aps.alert;
      }
      alert('Receive notification: ' + JSON.stringify(event));

      this.jpush.setBadge(0);
      this.jpush.setApplicationIconBadgeNumber(0);
    }, false);

    document.addEventListener('jpush.openNotification', (event: any) => {
      var content;
      if (this.devicePlatform == 'Android') {
        content = event.alert;
      } else {  // iOS
        if (event.aps == undefined) { // 本地通知
          content = event.content;
        } else {  // APNS
          content = event.aps.alert;
        }
      } 
      alert('open notification: ' + JSON.stringify(event));
    }, false);

    document.addEventListener('jpush.receiveLocalNotification', (event: any) => {
      // iOS(*,9) Only , iOS(10,*) 将在 jpush.openNotification 和 jpush.receiveNotification 中触发。
      var content;
      if (this.devicePlatform == 'Android') {
      } else {
        content = event.content;
      } 
      alert('receive local notification: ' + JSON.stringify(event));
    }, false);
  }

  getRegistrationID() {
    this.jpush.getRegistrationID()
      .then(rId => {
        this.registrationId = rId;
      });
  }

  setTags() {
    this.jpush.setTags({ sequence: this.sequence++, tags: ['Tag1', 'Tag2']})
      .then(this.tagResultHandler)
      .catch(this.errorHandler);
  }

  addTags() {
    this.jpush.addTags({ sequence: this.sequence++, tags: ['Tag3', 'Tag4']})
      .then(this.tagResultHandler)
      .catch(this.errorHandler);
  }

  checkTagBindState() {
    this.jpush.checkTagBindState({ sequence: this.sequence++, tag: 'Tag1' })
      .then(result => {
        var sequence = result.sequence;
        var tag = result.tag;
        var isBind = result.isBind;
        alert('Sequence: ' + sequence + '\nTag: ' + tag + '\nIsBind: ' + isBind);
      }).catch(this.errorHandler);
  }

  deleteTags() {
    this.jpush.deleteTags({ sequence: this.sequence++, tags: ['Tag4']})
      .then(this.tagResultHandler)
      .catch(this.errorHandler);
  }

  getAllTags() {
    this.jpush.getAllTags({ sequence: this.sequence++ })
      .then(this.tagResultHandler)
      .catch(this.errorHandler);
  }

  cleanTags() {
    this.jpush.cleanTags({ sequence: this.sequence++ })
      .then(this.tagResultHandler)
      .catch(this.errorHandler);
  }

  setAlias() {
    this.jpush.setAlias({ sequence: this.sequence++, alias: 'TestAlias' })
      .then(this.aliasResultHandler)
      .catch(this.errorHandler);
  }

  getAlias() {
    this.jpush.getAlias({ sequence: this.sequence++ })
      .then(this.aliasResultHandler)
      .catch(this.errorHandler);
  }

  deleteAlias() {
    this.jpush.deleteAlias({ sequence: this.sequence++ })
      .then(this.aliasResultHandler)
      .catch(this.errorHandler);
  }

  addLocalNotification() {
    if (this.devicePlatform == 'Android') {
      this.jpush.addLocalNotification(0, 'Hello JPush', 'JPush', 1, 5000);
    } else {
      this.jpush.addLocalNotificationForIOS(5, 'Hello JPush', 1, 'localNoti1');
    }
  }
}

具体api请查看官网文档,以上是在ts下的使用方式

posted @ 2018-06-14 16:21  王志超II  阅读(864)  评论(0编辑  收藏  举报