uniapp APP消息推送方案实现全过程
作者：Jelly115
前段时间开发app的时候要开始做消息推送功能了,下面这篇文章主要给大家介绍了关于uniapp APP消息推送方案实现的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
提示：本文实例消息推送使用uniapp官方的unipush推送：
项目场景：该项目是uniapp + uniCloud 项目，APP端的消息推送使用 html+ 与原生实现交互
1.开通推送消息
– uniapp 中的
manifest.json文件中找到App模块配置，勾选push消息推送模块
– dcloud开发者中心后台开通unipush功能及各种配置项
– 安卓离线消息推送是需要配置各大厂商，IOS离线不需要，但需要推送证书
2.判断手机权限
- 需求：判断是否开启通知权限，跳转对应设置页
/**
* 设置手机通知权限
*/
setPermissionsInform() {
// #ifdef APP-PLUS
if (plus.os.name == 'Android') { // 判断是Android
var main = plus.android.runtimeMainActivity();
var pkName = main.getPackageName();
var uid = main.getApplicationInfo().plusGetAttribute("uid");
var NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");
//android.support.v4升级为androidx
if (NotificationManagerCompat == null) {
NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat");
}
var areNotificationsEnabled = NotificationManagerCompat.from(main).areNotificationsEnabled();
// 未开通‘允许通知'权限，则弹窗提醒开通，并点击确认后，跳转到系统设置页面进行设置
if (!areNotificationsEnabled) {
uni.showModal({
title: '通知权限开启提醒',
content: '您还没有开启通知权限，无法接受到消息通知，请前往设置！',
showCancel: false,
confirmText: '去设置',
success: function(res) {
if (res.confirm) {
var Intent = plus.android.importClass('android.content.Intent');
var Build = plus.android.importClass("android.os.Build");
//android 8.0引导
if (Build.VERSION.SDK_INT >= 26) {
var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
intent.putExtra('android.provider.extra.APP_PACKAGE', pkName);
} else if (Build.VERSION.SDK_INT >= 21) { //android 5.0-7.0
var intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
intent.putExtra("app_package", pkName);
intent.putExtra("app_uid", uid);
} else { //(<21)其他--跳转到该应用管理的详情页
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
intent.setData(uri);
}
// 跳转到该应用的系统通知设置页
main.startActivity(intent);
}
}
});
}
} else if (plus.os.name == 'iOS') { // 判断是ISO
var isOn = undefined;
var types = 0;
var app = plus.ios.invoke('UIApplication', 'sharedApplication');
var settings = plus.ios.invoke(app, 'currentUserNotificationSettings');
if (settings) {
types = settings.plusGetAttribute('types');
plus.ios.deleteObject(settings);
} else {
types = plus.ios.invoke(app, 'enabledRemoteNotificationTypes');
}
plus.ios.deleteObject(app);
isOn = (0 != types);
if (isOn == false) {
uni.showModal({
title: '通知权限开启提醒',
content: '您还没有开启通知权限，无法接受到消息通知，请前往设置！',
showCancel: false,
confirmText: '去设置',
success: function(res) {
if (res.confirm) {
var app = plus.ios.invoke('UIApplication', 'sharedApplication');
var setting = plus.ios.invoke('NSURL', 'URLWithString:', 'app-settings:');
plus.ios.invoke(app, 'openURL:', setting);
plus.ios.deleteObject(setting);
plus.ios.deleteObject(app);
}
}
});
}
}
// #endif
} ,
/**
可以将该方法放在APP.vue文件的onShow生命周期或是消息中心的onShow中去判断用户是否开启通知权限
3.推送消息到手机APP：
需求：当有消息推送时，推送到手机状态栏中
3.1 获取客户端推送标识信息 cid
// 必须要获取到cid后才能接收推送信息
const cid = plus.push.getClientInfo()
console.log(cid);
3.2 创建推送消息
//plus.push.createMessage( content, payload, option );
//在本地直接创建推送消息，并添加到系统消息中心。
content: ( String ) 必选
消息显示的内容，在系统通知中心中显示的文本内容。
payload: ( String | Object ) 可选
消息承载的数据，可根据业务逻辑自定义数据格式。
options: ( MessageOptions ) 可选
创建消息的额外参数，参考
https://www.html5plus.org/doc/zh_cn/push.html#plus.push.MessageOptions
plus.push.createMessage('我是你爸爸！'); // 创建本地推送
plus.runtime.setBadgeNumber(1) // 设置角标
3.3 消息事件
- 实现手机状态栏推送功能逻辑，在APP.vue中添加推送消息事件监听器 ，监听到有新消息时，使用createMessage API创建消息，添加点击事件 点击后进行不同操作
- 对于安卓的在线和离线消息以及IOS的离线消息都是走的click监听事件。也就是说可以直接将消息推送到手机通知栏中，然后点击消息的时候，可以触发应用监听的点击事件，跳转到对应页面。
- receive事件，可以监听到后端推送过来的消息，触发相应的回调，使用createMessage在本地创建消息
// 添加推送消息事件监听器 click
plus.push.addEventListener("click",(msg)=>{
console.log('msg............',msg);
if(msg.payload){
// 点击跳转对应页面
uni.navigateTo({
url:msg.payload
})
}
},false)
// 添加推送消息事件监听器 receive
plus.push.addEventListener("receive",(msg)=>{
if("LocalMSG" == msg.payload){
}else{
if(msg.type=='receive'){
var options = {cover:false,title:msg.title};
// 创建本地推送
plus.push.createMessage(msg.content, msg.payload, options );
}
}
},false)
4. 消息页面的数据及数字角标
- 需求：当有消息推送时，要更新消息中心页面的数据和数字角标
1.在项目中定义请求消息列表的方法，将响应的数据存储到vuex中，供消息中心页面使用
// 消息页面的数据
async getMsgData(){
let res = await this.$callFunction("userContent/getMsgType")
this.$u.vuex("msgData", res.result.data);
let msgCount = 0 // 数字角标
res.result.data.map((item)=>{
if(item._id!=5){
msgCount+=item.no_read_total
}
})
// 给tabbar的角标赋值
let tabbar_data = JSON.parse(JSON.stringify(this.TabbarList))
tabbar_data[3].count = msgCount
this.$u.vuex("TabbarList", tabbar_data);
2.监听消息的推送，如果接收到消息就更新消息列表数据和角标数字
// --------监听推送的状态----------
plus.push.addEventListener("receive", (msg) => {
console.log(getApp().globalData.followCount);
if(msg.payload.data.msg_type==501){
uni.$emit('followUpdate','update');
}
let {content, payload, options} = msgCreate(msg)
plus.push.createMessage(content, payload, options);
this.getMsgData()
}, false)
- 该功能的实现，主要重点在于数据的全局的传值，以及监听数据的变化，实时更新数据
- 可以使用vuex或globalData来存储数据
- nuve页面中可以使用$emit $on 进行全局监听
总结
到此这篇关于uniapp APP消息推送方案的文章就介绍到这了,更多相关uniapp APP消息推送方案内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！