• 【uniapp】uniapp的安卓apk图标角标设置消息数量


    1、主要方法:

    设置角标:
    plus.runtime.setBadgeNumber(999)
    清除角标:
    //plus.runtime.setBadgeNumber(0)//没有效果
    plus.runtime.setBadgeNumber(-1) //有效果

    2、使用在具体的生命周期

    1、打开app获取角标数量
    2、关闭app获取角标数量
    3、非登入和退出登入获取角标数量
    在App.vue中:

    <script>
    	export default {
    		onLaunch: function() {
    			console.warn('当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!')
    			console.log('App Launch')
    			// #ifdef APP-PLUS
    			// #endif 
    		},
    		onShow: function() {
    			console.log('App Show')
    			// #ifdef APP-PLUS
    				this.getList();
    			// #endif 
    		},
    		onHide: function() {
    			console.log('App Hide')
    			// #ifdef APP-PLUS
    				this.getList();
    			// #endif 
    		},
    		methods:{
    			getList() {
    				const token = uni.getStorageSync('token') || false
    				//是否在登入状态(看自己代码检测登入状态的判断方式)
    				if (uni.getStorageSync('token') && token) {
    					let Info = uni.getStorageSync('userInfo')
    					let obj = {
    						noticeUser: Info.userId,
    					}
    					//获取当前账号接收的未读消息数量(角标要展示的数量)
    					this.request({
    						url: '/message/listCount',
    						method: 'get',
    						params: obj
    					}).then(res => {
    						this.list = res.data
    						let num = 0
    						res.data.forEach(item => {
    							num += item.num
    						})
    						if(num>0){
    							this.setBadge(num)
    						}else{
    							this.clearBadge()
    						}
    					}).catch(error => {
    						this.clearBadge()
    						console.log('失败', error);
    					})
    				}else{
    				   //未登入状态清空
    					this.clearBadge()
    				}
    			},
    			//设置角标
    			setBadge(num){
    				plus.runtime.setBadgeNumber(num)
    			},
    			//清除角标
    			clearBadge(){
    				plus.runtime.setBadgeNumber(-1)
    			}
    			
    		}
    	}
    script>
    <style>
    	.container {
    		width: 100vw;
    		height: 86.5vh;
    	}
    style>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72

    3、注意事项

    1、记得加上一下内容,限制在app中生效,不然在网页测试会plus报错

    // #ifdef APP-PLUS
    // #endif 
    
    • 1
    • 2

    2、打包发布后根据提示去uniapp官网按流程处理相关配置就行
    3、非外网使用1.0版本就行
    4、清除角标plus.runtime.setBadgeNumber(0)不生效,因此我采用了传-1

  • 相关阅读:
    用了半年chromium,说说心得
    企业开发项目完整流程
    02.nginx高可用负载均衡
    面试 Python 基础八股文十问十答第七期
    Vue文件上传和图片上传实例
    CUDA C编程权威指南:2.1-CUDA编程模型
    背包问题学习笔记-二维费用的背包问题
    Freemarker快速入门(SpringBoot版)
    Python潮流周刊#10:Twitter 的强敌 Threads 是用 Python 开发的!
    C++中的注释作用
  • 原文地址:https://blog.csdn.net/ew45218/article/details/136754871