微信小程序給底部tabBar圖標添加角標

前言

在一般的商城類app或者小程序，一般購物車菜單都會有右上角角標。今天我這裏在微信小程序上進行實現。

思路

查看微信小程序官方文檔：

實現

 let cartNum = ;  //通過後臺接口獲取
 if (cartNum.length != 0) {
   //設置角標
   wx.setTabBarBadge({
     index: 2,  //tabBar序號，從0開始計數
     text: cartNum.toString()
   })
 } else {
   //移除角標
   wx.removeTabBarBadge({
     index: 2,
   })
 }

問題 ：setTabBarBadge:fail not TabBar page？

我們在非tabbar的頁面上使用這部分代碼，會報錯，這是官方設計上的缺陷(個人認爲)。
但是我們一把會在其他頁面添加商品到購物車中，這樣就會導致重新進入購物車頁面，角標不能正確實時展示。
我這邊解決這個問題的思路就是，在每個tabbar頁面的onshow() 生命週期函數中進行設定。這樣才能達到實時正確顯示角標數據。