uni-app使用plus消息推送并显示红点角标

本文使用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