本文使用plus下的Push模块管理推送消息功能,只能在打开App后才可以推送;
如果需要离线接收消息,看这里
推送 - Push.js文件
push.js 代码
/**
* @author Mino
* @date 2021/08/04
* @description App Push
*/
export default {
/**
* @description 需要在App.vue中onLaunch中调用
* // this.$push.create("点击查看消息内容>>", {url: "/pages/user/account/forget"}, {
// delay: 0,
// title: "您有1条新的消息",
// }, true);
*/
init(){
plus.push.setAutoNotification(true); // setAutoNotification 默认就是true
plus.push.addEventListener("click", (message)=>{
console.log(message)
let { url } = message.payload;
if(url){
uni.navigateTo({
url,
success: () => {}, // 可以根据需求删除消息 this.remove(message);
complete: () => {} // 可以根据需求删除消息 this.remove(message);
});
}
})
},
/**
* @param {number} message
* @description
* - 传入message时,删除消息列表中的message;
* - 不传参数:则全部清空
*/
remove(message, isChange){
message ? plus.push.remove(message) : plus.push.clear();
isChange && this.changeBadge();
},
/**
* @param {string} content 消息内容
* @param {Object} payload 消息承载的数据
* @param {Object} options 消息配置
* @param {Boolean} isChange 创建消息后是否更新BadgeNumber
* @example
* this.$push.create("点击查看消息内容>>", {url: "/pages/office/xxx", xxx: x}, {
delay: 3,
title: "您有3条新的消息",
});
*/
create(content, payload = {}, options, isChange){
plus.push.createMessage(...arguments);
const delay = options.delay ? (~~options.delay * 1000) : 0;
setTimeout(()=>{
isChange && this.changeBadge();
}, delay)
},
changeBadge(number){
const messages = this.getAllMessage();
plus.runtime.setBadgeNumber(number || messages.length);
},
getAllMessage(){
return plus.push.getAllMessage();
}
}
获取所有消息
getAllMessage(){
return plus.push.getAllMessage();
}
修改App消息角标
changeBadge(number){
const messages = this.getAllMessage();
plus.runtime.setBadgeNumber(number || messages.length);
},
创建消息
前三个参数是plus.pushcreateMessage的参数,第四个参数isChange用于判断是否要更新BadgeNumber角标数字,默认更新为所有消息的个数;
如果不需要自动更新角标,可以单独调用changeBadge方法传入number;
/**
* @param {string} content 消息内容
* @param {Object} payload 消息承载的数据
* @param {Object} options 消息配置
* @param {Boolean} isChange 创建消息后是否更新BadgeNumber
* @example
* this.$push.create("点击查看消息内容>>", {url: "/pages/xxxx/xxx"}, {
delay: 3,
title: "您有3条新的消息",
});
*/
create(content, payload = {}, options, isChange){
plus.push.createMessage(...arguments);
const delay = options.delay ? (~~options.delay * 1000) : 0;
setTimeout(()=>{
isChange && this.changeBadge();
}, delay)
}
删除消息
/**
* @param {number} message
* @description
* - 传入message时,删除消息列表中的message;
* - 不传参数:则全部清空
*/
remove(message, isChange){
message ? plus.push.remove(message) : plus.push.clear();
isChange && this.changeBadge();
},
初始化
/**
* @description 需要在App.vue中onLaunch中调用
*/
init(){
plus.push.setAutoNotification(true); // setAutoNotification 默认就是true
plus.push.addEventListener("click", (message)=>{
let { url } = message.payload;
if(url){
uni.navigateTo({
url,
success: () => {}, // 可以根据需求删除消息 this.remove(message);
complete: () => {} // 可以根据需求删除消息 this.remove(message);
});
}
})
},
推送 - manifest.json 配置
角标 - 设置
开发过程中,调试角标使用 真机 进行调试,并且打开应用的红点提示的 权限; 在模拟器上大概率是不会生效的。😉
使用
1. 在main.js引入:
import push from '@/utils/push.js'
Vue.prototype.$push = push;
2. 在App.vue中初始化:
<script>
export default {
globalData: {},
onLaunch() {
this.$push.init();
}
};
</script>
3. 页面中操作:
this.$push.create("点击查看消息内容>>", {url: "/pages/xxxx/xxx"}, {
delay: 3,
title: "您有3条新的消息",
}, true);
- 3s后接收消息,并生成角标(返回主屏幕可以看到角标)。
- 点击消息会跳转至url的页面中。
华为不显示数字角标问题?
plus-Pushhttps://www.html5plus.org/doc/zh_cn/push.html#plus.push.setAutoNotification