Vue集成jpush之Android篇

分类：MUI

Push mui Vue HBuilder

一、首先先参考极光官方集成指南
参考https://github.com/jpush/jpush-hbuilder-demo

HBuilder 项目集成第三方插件，需先参考 HBuilder 官方的离线打包教程，将您的 HBuilder 项目集成进 Android 工程中。另外，还需要在极光官网根据你的包名申请APPKey。以上工作完成之后再执行以下步骤：
1.拷贝demo中 ./android/app/src/main/java/io.dcloud.feature.jpush 文件夹至你 Android Studio 工程的 /src/main/java/ 目录下。注意：RInformation.java文件不需要拷贝过来。
2.拷贝 ./jpush.js 到你 Android Studio 工程的 /assets/apps/HBuilder应用名/js/ 下。
3.在 /assets/apps/你的应用名/www/manifest.json 文件中添加：

"Push": {  
  "description": "消息推送"  
}

4.在 /assets/data/dcloud_properties.xml 中添加（如果已存在 Push feature，可以直接修改）：

<feature name="Push" value="io.dcloud.feature.jpush.JPushService" />

5.在 app/build.gradle 中添加：

android {  
    ...  
defaultConfig {  
        applicationId "com.***.***"// JPush上注册的包名  
        ...  
    ndk {  
            // 选择要添加的对应 cpu 类型的 .so 库。  
            abiFilters 'armeabi', 'armeabi-v7a', 'x86'//,'arm64-v8a',  'x86_64', 'mips', 'mips64'  
            // 还可以添加 , 'x86_64', 'mips', 'mips64'  
        }  
        manifestPlaceholders = [  
                JPUSH_PKGNAME: applicationId,  
                JPUSH_APPKEY : "*****", // JPush上注册的包名对应的 appkey  
                JPUSH_CHANNEL: "developer-default", // 暂时填写默认值即可  
        ]  
    }  
    buildTypes {  
        release {  
            minifyEnabled false  
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'  
        }  
    }  
...  
dependencies {  
    ...  
    compile 'cn.jiguang.sdk:jpush:3.1.8'  
    compile 'cn.jiguang.sdk:jcore:1.2.6'  
}

6.在 AndroidManifest.xml 中添加：

<receiver  
    android:name="io.dcloud.feature.jpush.JPushReceiver"  
    android:enabled="true"  
    android:exported="false">  
    <intent-filter>  
        <action android:name="cn.jpush.android.intent.REGISTRATION" /> <!-- Required 用户注册SDK的 intent -->  
        <action android:name="cn.jpush.android.intent.UNREGISTRATION" />  
        <action android:name="cn.jpush.android.intent.MESSAGE_RECEIVED" /> <!-- Required 用户接收SDK消息的 intent -->  
        <action android:name="cn.jpush.android.intent.NOTIFICATION_RECEIVED" /> <!-- Required 用户接收SDK通知栏信息的 intent -->  
        <action android:name="cn.jpush.android.intent.NOTIFICATION_OPENED" /> <!-- Required 用户打开自定义通知栏的 intent -->  
        <action android:name="cn.jpush.android.intent.ACTION_RICHPUSH_CALLBACK" /> <!-- Optional 用户接受 Rich Push Javascript 回调函数的intent -->  
        <action android:name="cn.jpush.android.intent.CONNECTION" /> <!-- 接收网络变化 连接/断开 since 1.6.3 -->  
        <category android:name="${JPUSH_PKGNAME}" />  
    </intent-filter>  
</receiver>

二、添加相关处理代码
1.在vue中static文件加下新建jpush文件夹，然后将【一.2】中相同的jpush.js文件复制进来。
2.在Vue中，index.html中加入
<script src="static/jpush/jpush.js"></script>
然后加入相关方法，如下：

// 控制台输出日志  
function outLog(msg) {  
  console.log(msg);  
}  

// 界面弹出吐司提示  
function outLine(msg) {  
  mui.toast(msg);  
}  

var setTagsWithAlias = function () {  
  var tag1 = '...'  
  var tag2 = ''  
  var tag3 = ''  
  var alias = 'test'  
  var tags = []  

  if (tag1) {  
    tags.push(tag1)  
  }  
  if (tag2) {  
    tags.push(tag2)  
  }  
  if (tag3) {  
    tags.push(tag3)  
  }  
  window.plus.Push.setTagsWithAlias(tags, alias)  
}  

var getRegistrationID = function () {  
  window.plus.Push.getRegistrationID(function (data) {  
    if (data.length != 0) {  
      outLine('getRegistrationID>>>>' + data)  
    }  
  })  
}  

var getLaunchAppCacheNotification = function () {  
  if (mui.os.android) {  
    window.plus.Push.getLaunchAppCacheNotification(function (data) {  
      if (data.alert) {  
        outLine('cache:' + data.alert)  
      }  
    })  
  }  
}  

var receiveNotification = function (event) {  
  var content  
  if (mui.os.ios) {  
    content = window.plus.Push.receiveNotification.aps.alert  
  } else {  
    outLine('receiveNotification---else')  
    content = window.plus.Push.receiveNotification.alert  
  }  

  outLine(content)  
}  

var openNotification = function () {  
  var content  
  if (mui.os.ios) {  
    content = window.plus.Push.openNotification.aps.alert  
  } else {  
    content = window.plus.Push.openNotification.alert  
    window.plus.Push.clearLaunchAppCacheNotification()  
  }  

  outLine(content)  
}  

var receiveMessage = function () {  
  var msg  
  if (mui.os.ios) {  
    msg = window.plus.Push.receiveMessage.content  
  } else {  
    msg = window.plus.Push.receiveMessage.message  
  }  

  outLine(msg)  
}  

var onAliasAndTagsSet = function (event) {  
  var result = 'result code: ' + event.arguments.resultCode + ' '  
  result += 'tags: ' + event.arguments.tags + ' '  
  result += 'alias: ' + event.arguments.alias + ' '  
  mui.alert(result)  
  outLine(result)  
}  

var init = function () {  
  outLog('isInit:' + localStorage.getItem('isInit'))  
  outLine('isInit:' + localStorage.getItem('isInit'))  
  window.plus.Push.setDebugMode(true)  
  window.plus.Push.init()  
  getLaunchAppCacheNotification()  
  outLine('mui.os.android is ' + mui.os.android)  

  if (localStorage.getItem('isInit')) {  
    getRegistrationID()  
  } else {  
    localStorage.setItem('isInit', true)  
  }  
}  

document.addEventListener("plusready", init, false)  
document.addEventListener('jpush.onGetRegistrationId', (rId) => {  
  console.log('registration id: ' + rId)  
  outLine('jpush::registration id: ' + rId)  
  localStorage.setItem("registrationId", rId)  
  // setTagsWithAlias()  
}, false)  
document.addEventListener("jpush.receiveMessage", receiveMessage, false)  
document.addEventListener("jpush.receiveNotification", receiveNotification, false)  
document.addEventListener("jpush.openNotification", openNotification, false)  
document.addEventListener("jpush.setTagsWithAlias", onAliasAndTagsSet, false)

3.Android Studio，在manifest.json中permissions下，还需要添加以下代码

"Runtime": {  
  "description": "运行环境"  
},  
"XMLHttpRequest": {  
  "description": "跨域网络请求"  
},  
"NativeObj": {},  
"Device": {}

这些是我在项目里需要的，各人按自己的项目增减。若有提示未打包什么模块，参考hbuilder官网。
4.Android Studio，在JPushReceiver中onReceive方法下稍微改写一下，我改写是为了更好的查看日志，不改也可以，不影响集成。

@Override  
public void onReceive(Context context, Intent intent) {  
    String action = intent.getAction();  

    if (JPushInterface.ACTION_REGISTRATION_ID.equals(action)) {  
        String rId = JPushInterface.getRegistrationID(context);  
        Log.d(TAG, "regID:" + rId);  
        JPushService.transmitGetRegistrationId(rId);  
    } else if (JPushInterface.ACTION_CONNECTION_CHANGE.equals(action)) {  
        boolean state = JPushInterface.getConnectionState(context);  
        Log.d(TAG, "当前连接状态::" + state);  
    } else if (JPushInterface.ACTION_MESSAGE_RECEIVED.equals(action)) {  
        handlingMessageReceive(intent);  
    } else if (JPushInterface.ACTION_NOTIFICATION_RECEIVED.equals(action)) {  
        handlingNotificationReceive(context, intent);  
    } else if (JPushInterface.ACTION_NOTIFICATION_OPENED.equals(action)) {  
        handlingNotificationOpen(context,   
intent);  
    } else {  
        Log.d(TAG, "Unhandled intent - " + action);  
    }  
}

当然，在app完全退出即进程被杀情况下，不能接收到推送，还有就是我还不知道怎么根据不同的通知跳转Vue中不同的页面，大家知道怎么做的话或者哪里写的不对，欢迎给我留言。
到这里，集成就结束了。这个排版我实在不太会排，第一次发分享，也不知道怎么贴图，要想看的清晰点可以查看附件。