需求

在tabbar的圖標(biāo)右側(cè)顯示和隱藏小圓點。一般表示有新消息、新更新。

基本代碼

序號從0開始計算。

uni.showTabBarRedDot({index:1});
uni.hideTabBarRedDot({index:1});

修改代碼

App.vue或index頁

在App.vue的onLaunch周期或者是index頁的onLoad加入代碼，判定是否需要顯示紅點。

如果index頁跟消息完全無關(guān)，那么盡量寫在App.vue而不要寫在index頁。為啥？因為uni.showTabBarRedDot({index:1});跟具體頁面的data和業(yè)務(wù)邏輯無關(guān)，跟index頁也沒有必然關(guān)系，而且消息頁往往是第2個或第3個tabbar頁，并不是index頁。如果index頁右上角也要加個新消息紅點，那么當(dāng)然要加在index頁。

現(xiàn)在，在onLaunch（或index頁的onLoad）加代碼有2種做法，我們假設(shè)除了請求新消息，還有一些其他的請求有必要放到onLaunch（或index頁的onLoad）里，這里一并討論。

第一種做法，先判斷會員是否登錄（下面兩項并發(fā)執(zhí)行）：

• Promise.all(若干個影響UI布局的訪客請求) -> Promise.all(若干個不影響UI布局的訪客請求)
• isLogin() -> yes -> Promise.all(若干個影響UI布局的會員請求) -> Promise.all(若干個不影響UI布局的會員請求) -> 新消息請求的回調(diào)：確定顯示或不顯示紅點

第二種，不判斷是否登錄（下面兩項并發(fā)執(zhí)行）：

• Promise.all(若干個影響UI布局的訪客請求) -> Promise.all(若干個不影響UI布局的訪客請求)
• Promise.all(若干個影響UI布局的會員請求) -> Promise.all(若干個不影響UI布局的會員請求) -> 新消息請求的回調(diào)：確定顯示或不顯示紅點

如果不判斷是否登錄，則可能登錄過期，這就導(dǎo)致，首先，浪費了線程和流量去請求數(shù)據(jù)，其次，如果axios攔截器設(shè)定攔截401錯誤并跳轉(zhuǎn)到登錄頁，那么，上述的若干個影響UI布局的會員請求就必須加入攔截器里的白名單，也就是說，必須保證它們即使401也不跳轉(zhuǎn)到登錄頁。

你的項目具體用哪種做法，都行。

處理登入、登出代碼的success回調(diào)

登入代碼的success回調(diào)里需同樣請求一遍新消息數(shù)量，這回一定能請求到，不會fail，不多說。

登出代碼的success里直接無腦隱藏紅點。

可能改變紅點的頁面

在任何可能改變紅點的代碼的末尾都要加上判定，確定是否顯示紅點。