需求

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

如下圖

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

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

1. 在每一個頁面都加載一個tabBar組件，與頁面同時渲染。
2. 設(shè)置自定義tabBar,修改tabBar的樣式。

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

1. 查看文檔及官方Demo

官方文檔

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

官方代碼

主要重點為三個部分

• 配置文件

• custom-tab-bar目錄

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

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

2. 遷移到uni-app框架

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

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

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

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

• tab頁面內(nèi)的適配方法
  這個在我實際開發(fā)中，是最令我頭痛的了。因為微信小程序的this引用與uni-app的this引用并不相同。所以如果直接復(fù)制代碼是會編譯出錯的。而另一個問題則是，uni-app并未提供pageLifetimes的事件監(jiān)聽。

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

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

因為uni-app的this引用不一樣，所以它在判斷getTabBar的時候，獲取的是“undefined”所以不會執(zhí)行下面的操作。如果你將判斷去掉，則會直接報“undefined”錯誤。

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

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

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

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

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

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

設(shè)置索引方法獨立出來

在methods對象中，添加

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

使用mixin避免重復(fù)書寫復(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
				})
			}
		}
	}
})

混入后的使用

在頁面文件中

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