Vue集成jpush之Android篇

一、首先先参考极光官方集成指南
参考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": "消息推送"
}
\n

4.在 /assets/data/dcloud_properties.xml 中添加(如果已存在 Push feature,可以直接修改):

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

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'
}
\n

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>
\n

二、添加相关处理代码
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)
\n

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

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

这些是我在项目里需要的,各人按自己的项目增减。若有提示未打包什么模块,参考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);
}
}
\n

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


0 分享 关注
2465395769@qq.com

2465395769@qq.com

关于怎么根据不同的通知跳转不同的页面,
只需要把上面写在index.html中的各个处理方法都放到app.vue中去,在app.vue中是可以使用this.$router.push(),在openNotification()中处理跳转不同页面就可以了
0 赞 2018-12-28 15:03

要回复文章请先登录注册