微信小程序如何自定義tabBar在uni-app的適配

這篇文章給大家分享的是有關(guān)微信小程序如何自定義tabBar在uni-app的適配的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

要在微信小程序中，實(shí)現(xiàn)一個(gè)中間圖標(biāo)突出顯示的異形導(dǎo)航欄。

如下圖

實(shí)現(xiàn)方法設(shè)計(jì)

要做這種異形的導(dǎo)航欄，用直接在配置文件里面寫(xiě)list的方法肯定做不到。那么，就有以下兩種可替代方法。

1. 在每一個(gè)頁(yè)面都加載一個(gè)tabBar組件，與頁(yè)面同時(shí)渲染。

2. 設(shè)置自定義tabBar,修改tabBar的樣式。

優(yōu)缺點(diǎn)分析：方法1實(shí)現(xiàn)起來(lái)略為簡(jiǎn)單，但是會(huì)出現(xiàn)代碼可重用率低，降低性能，已經(jīng)界面跳動(dòng)等問(wèn)題。方法2則是微信官方提供的，自定義方式，相信在性能方面也會(huì)有很大的優(yōu)勢(shì)。故選擇方法2。

1. 查看文檔及官方Demo

官方文檔

簡(jiǎn)要描述一下就是需要在根目錄中加入一個(gè)custom-tab-bar目錄，里面的文件結(jié)構(gòu)與自定義組件的結(jié)構(gòu)一致。然后再在小程序配置文件中修改tabbar為custom模式。

官方代碼

主要重點(diǎn)為三個(gè)部分

配置文件

custom-tab-bar目錄

頁(yè)面生命周期中的設(shè)置索引方法

這段代碼其實(shí)很容易理解，pageLifetimes就是監(jiān)聽(tīng)組件所在頁(yè)面的生命周期。上述代碼就是監(jiān)聽(tīng)頁(yè)面顯示。當(dāng)頁(yè)面顯示后，獲取到tabBar的對(duì)象，然后再設(shè)置tabBar中的index索引。

2. 遷移到uni-app框架

上面的方法是使用微信小程序的開(kāi)發(fā)方式，而我使用的是uni-app框架開(kāi)發(fā)微信小程序的。所以我們需要把它們移植到uni-app框架內(nèi)。

配置文件的修改

uni-app中，page.json被編譯為微信小程序的app.json。所以，我們直接修改page.json

custom-tab-bar目錄的適配

我們知道，uni-app使用的是類(lèi)Vue開(kāi)發(fā)，將一個(gè)Vue文件編譯為四個(gè)微信頁(yè)面文件（wxml，wxss，json，js）。那么，是否可以直接寫(xiě)一個(gè)custom-tab-bar.vue的文件呢？剛開(kāi)始我也是這么想的，后來(lái)發(fā)現(xiàn)uni-app只會(huì)編譯page目錄和component目錄下的vue文件。而微信小程序要求custom-tab-bar必須在項(xiàng)目的根目錄下。那么就只能在uni-app下創(chuàng)建一個(gè)custom-tab-bar目錄，并老老實(shí)實(shí)寫(xiě)微信四件套了。

寫(xiě)完后，uni-app會(huì)將該目錄完美的復(fù)制至微信小程序項(xiàng)目的根目錄。

tab頁(yè)面內(nèi)的適配方法

這個(gè)在我實(shí)際開(kāi)發(fā)中，是最令我頭痛的了。因?yàn)槲⑿判〕绦虻?code>this引用與uni-app的this引用并不相同。所以如果直接復(fù)制代碼是會(huì)編譯出錯(cuò)的。而另一個(gè)問(wèn)題則是，uni-app并未提供pageLifetimes的事件監(jiān)聽(tīng)。

在我經(jīng)過(guò)一番摸索之后，發(fā)現(xiàn)將設(shè)置索引方法寫(xiě)在onShow事件里面，效果是等效的。接下來(lái)便只剩下this的問(wèn)題了。

如果直接復(fù)制的話，會(huì)出現(xiàn)無(wú)任何效果的情況

因?yàn)閡ni-app的this引用不一樣，所以它在判斷getTabBar的時(shí)候，獲取的是“undefined”所以不會(huì)執(zhí)行下面的操作。如果你將判斷去掉，則會(huì)直接報(bào)“undefined”錯(cuò)誤。

難道實(shí)現(xiàn)不了？其實(shí)不然，萬(wàn)變不離其宗。uni-app也是編譯到小程序的，所以絕對(duì)有跡可循。

我們首先看看uni-app里面this的內(nèi)容。

我們可以很明顯的看到里面有個(gè)$mp的對(duì)象，說(shuō)明這應(yīng)該是微信小程序?qū)Ｓ玫膶?duì)象。接下來(lái)我們繼續(xù)分析$mp。

這里面有一個(gè)隱藏很深的getTabBar方法，我們直接調(diào)用它，和在微信小程序里面調(diào)用this.getTabBar是等效的。

所以我們就可以把onShow里面的內(nèi)容寫(xiě)成這樣。

一些優(yōu)雅點(diǎn)的封裝

設(shè)置索引方法獨(dú)立出來(lái)

在methods對(duì)象中，添加

setTabBarIndex(index){
      if (typeof this.$mp.page.getTabBar === 'function' &&
        this.$mp.page.getTabBar()) {
        this.$mp.page.getTabBar().setData({
          selected:index
        })
      }
    }

使用mixin避免重復(fù)書(shū)寫(xiě)復(fù)制

在main.js中，添加

Vue.mixin({
  methods:{
    setTabBarIndex(index){
      if (typeof this.$mp.page.getTabBar === 'function' &&
        this.$mp.page.getTabBar()) {
        this.$mp.page.getTabBar().setData({
          selected:index
        })
      }
    }
  }
})

混入后的使用

在頁(yè)面文件中

onShow() {
      this.setTabBarIndex(0) //index為當(dāng)前tab的索引
    }

感謝各位的閱讀！關(guān)于“微信小程序如何自定義tabBar在uni-app的適配”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！