微信小程序在非Tabbar页面设置提示点

Posted 2022-01-04 HackShendi

Hello，I‘m Shendi

记录一下微信小程序设置 tabbar 的流程

设置 tabbar 提示点

wx.setTabBarBadge(
	index: tabbar的下标,
	text: 提示内容
);

只能在 tabbar 页面调用设置

当用户在非 tabbar 页面调用则会报错

这不能满足一些需求
例如消息聊天等（在聊天页面-非 tabbar 页面，接收到消息则无法设置提示点）

在非 Tabbar 页面设置提示点

思路：

我们可以在要设置提示点的时候判断当前页面是否为 tabbar 页面
如果不是则存入缓存，当 tabbar 页面显示时进行设置

目前没有在 api 中找到判断当前页面是否为 tabbar 页面的函数
于是我的实现方法为在每个 tabbar 页面的显示和隐藏中设置...

进行了封装，代码如下

app.js（全局js）

App(
	/** 当前页面是否为 tabbar 页面 */
	isTabbarPage : false,
	
	/** 当 tabbar 页面显示时调用,需在每个 tabbar 页面的 onShow 中手动调用 */
	onTabbarShow : function () 
		this.isTabbarPage = true;
		
    	// 从缓存中拿到未设置的小点数进行设置,缓存为数组
    	// 其中每一个下标代表tabbar的位置,内容为数量
		var tabbarBadge = wx.getStorageSync('tabbarBadge');
		if (tabbarBadge) 
			for (var i = 0; i < 5; i++) 
				var val = tabbarBadge[i];
				if (val != null && val != 0) 
	          		wx.setTabBarBadge(
	            		index: i,
	            		text: val + ''
	          		);
	          		tabbarBadge[i] = null;
				
			
			wx.setStorageSync('tabbarBadge', tabbarBadge);
    	
	,
	/** 当 tabbar 页面隐藏时调用,需在每个 tabbar 页面的 onHide 中手动调用 */
	onTabbarHide : function () 
    	this.isTabbarPage = false;
	
);

其他所有 tabbar 页面

var app = getApp();
Page(
	onShow: function () 
    	app.onTabbarShow();
   	,
   	onHide : function () 
   		app.onTabbarHide();
   	
);

在需要设置的地方

var app = getApp();

if (app.isTabbarPage) 
    wx.setTabBarBadge(
        index: tabbar下标 第一个为0,
        text: 值
    );
 else 
    var tabbarBadge = wx.getStorageSync('tabbarBadge');
    if (!tabbarBadge) tabbarBadge = [];
    tabbarBadge[tabbar下标] = 值;
    wx.setStorageSync('tabbarBadge', tabbarBadge);