***本章介绍 uniapp app端消息推送与语音播报。包含前端代码,以及排错方案,可结合unipush开发者后台测试***
开通uniPush
1.项目中manifest.json勾选uniPush,然后在开发者后台上传证书(ios推送证书),获取将AppID等配置给到后端
2.使用plus.push.getClientInfoAsync获取cid(设备的唯一标识)
在线消息—透传消息
如果需要离线通知,需要开通厂商推送,配置厂商证书等等,这里就不说明了。不过下面的监听代码是一样的
如果只需要在Android通知可只需要使用《通知消息》,通知消息比较简单就不举例了,代码跟下面差不多。
如果需要兼容IOS就需要使用透传消息了
透传消息是通过监听receive消息。然后通过代码实现通知栏通知,音频通知的,具体代码在下面。
获取设备标识clientid
在应用安装后第一次运行时应该调用5+ API的plus.push.getClientInfo方法获取客户端标识,如果获取的cid为空,说明客户端向推送服务器注册还未完成,可以使用setTimeout延时重试
//app.vue onLaunch
var timer = setTimeout(function() {
console.log("异步获取客户端推送标识信息");
plus.push.getClientInfoAsync(function(info) {
if (info.clientid) {
clearInterval(timer);
uni.setStorageSync('cid', info.clientid)
//将cid在登录时一起传给后端,和用户信息存在数据库中。
console.log("clientid", JSON.stringify(info.clientid));
}
}, function(e) {
console.log(JSON.stringify(e));
})
}, 5000)
在App.vue中 onLaunch监听
//消息点击事件
plus.push.addEventListener('click', function(msg){
//以下就根据传递的参数进行逻辑处理
console.log("传递的参数", msg)
var paymsg = msg.payload;
if (msg.payload != '[]') {
if (paymsg.id) {
uni.navigateTo({
url: '/pages/taskDetail/taskDetail?id=' + paymsg.id
})
}
} else {
uni.switchTab({
url: '/pages/index/index'
})
}
}, false)
//监听透传消息
plus.push.addEventListener("receive", function(msg){
console.log("receive", msg);
// 增加非空判断 否则ios闪退
if (msg.content != null && msg.content != '') {
//震动 用于判断是否成功监听,如果监听成功再往下播放自定义音频,创建通知栏
//如果没有监听到,往下看,下面有排查错误的流程
plus.device.vibrate(500);
console.log("(receive):" + JSON.stringify(msg));
// 播放自定义音频
if (msg.payload.is_mp3 == 1) {
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://sharefs.ali.kugou.com/202111021443/4601cd16d38f85c4d29024c15f598c47/KGTX/CLTX001/73c33edac3740e80feceb3da50ed0fd5.mp3';
innerAudioContext.onPlay(() => {
console.log('开始播放');
});
innerAudioContext.onError((res) => {
console.log(res.errMsg);
console.log(res.errCode);
});
}
//通知栏参数
let options = {
"cover": false,
"sound": 'system',
"title":msg.title
};
//创建通知栏消息
plus.push.createMessage(msg.payload.content, msg.payload, JSON.parse(JSON.stringify(
options)));
}
},false)
后台发送消息测试
{"title":"Hello H5+ Test","content":"test content"}
结果1
有震动,说明消息推送成功 ,receive监听到了,但是没有出现通知? 从下面方案排查
1.应用消息消息通知权限没开
通知权限判断 跳转开通
// 判断是否开启消息推送
function PermissionPush(){
let platform = uni.getSystemInfoSync().platform
if (platform == 'ios') {
//ios默认会有通知 不需要手动设置
console.log('我是iOS')
} else if (platform == 'android') {
console.log('我是安卓')
/* 获取当前手机是否有通知权限 */
// #ifdef APP-PLUS
// let main = plus.android.runtimeMainActivity();
// let pkName = main.getPackageName();
// console.log("是否有通知权限pkName",pkName);
// let NotificationManagerCompat = plus.android.importClass("android.support.v4.app.NotificationManagerCompat");
// console.log("是否有通知权限NotificationManagerCompat",NotificationManagerCompat);
// let packageNames = NotificationManagerCompat.from(main);
var main = plus.android.runtimeMainActivity();
var NotificationManagerCompat = plus.android.importClass("androidx.core.app.NotificationManagerCompat");
let packageNames = NotificationManagerCompat.from(main);
let pkName = main.getPackageName();
if (!packageNames.areNotificationsEnabled()) { //手机没有开启通知的权限
uni.showModal({
title: '通知权限',
content: '通知权限暂未开启',
cancelText: '暂不开启',
confirmText: '前往开启',
success: function (res) {
if (res.confirm) {
console.log("没有通知权限");
let uid = main.getApplicationInfo().plusGetAttribute("uid");
let Intent = plus.android.importClass('android.content.Intent');
let Build = plus.android.importClass("android.os.Build");
let intent = '';
//android 8.0引导
if (Build.VERSION.SDK_INT >= 26) {
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
intent = new Intent('android.settings.APP_NOTIFICATION_SETTINGS');
intent.putExtra("app_package", pkName);
intent.putExtra("app_uid", uid);
} else { //(<21)其他--跳转到该应用管理的详情页
let Settings = plus.android.importClass("android.provider.Settings");
let Uri = plus.android.importClass("android.net.Uri");
intent = new Intent();
intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
let uri = Uri.fromParts("package", main.getPackageName(), null);
intent.setData(uri);
}
// 跳转到该应用的系统通知设置页
main.startActivity(intent);
} else if (res.cancel) {
console.log('用户点击取消');
}
},
fail: () => {},
complete: () => {}
});
}
// #endif
/* 获取当前手机是否有通知权限 */
}
}
2.plus.push.createMessage参数有问题(会导致ios闪退)
可在发送内容添加 payload字段试试 (原因不明)
参数自行查看
参考 https://www.html5plus.org/doc/zh_cn/push.html
结果2
如果连震动都没有
{“title”:“Hello H5+ Test”,“content”:“test content”}
如果连震动都没有,说明设备没有监听到,可能就是配置问题,按下面步骤排查
1.uniPush必须打自定义包或正式包
2. 获取cid不对 (如果plus.push.getClientInfoAsync 获取cid为null, 使用setTimeout循环获取,应用在服务器还未注册导致)
var timer = setTimeout(function() {
console.log("异步获取客户端推送标识信息~");
plus.push.getClientInfoAsync(function(info) {
if (info.clientid) {
clearInterval(timer);
uni.setStorageSync('cid', info.clientid)
console.log("clientid", JSON.stringify(info.clientid));
}
}, function(e) {
console.log(JSON.stringify(e));
})
}, 5000)
3.在unipush后台的故障排查 可根据cid查询设备信息和状态,如果没有查到设备信息,可能是应用包,证书等配置错误
如果对大伙有帮助的话,记得点个赞哦 ~ 感谢感谢!