自定義底部導航欄組件
2019-2-22更新
新增文章 再談小程序自定義底部導航，大家也可以直接閱讀此文章，相比此文章有新的特性和優化。
代碼片段地址
可直接點擊鏈接在微信開發者工具上查看 wechatide://minicode/4c6GLemy7j31
gitHub: 源碼地址
效果預覽圖
此預覽圖是作者通過底部導航欄實現的效果並不是本代碼的效果
起步
目前大部分小程序是有底部導航欄的，用戶可以通過底部導航欄進入不同業務的頁面，小程序實際上是可以通過簡單的配置實現一個這樣的東西(app.json)，簡單使用的夠用的，不過如果想進行更多的騷操作(比如通過判斷用戶身份，展示不同的導航，突出中間的導航欄引導用戶點擊...)，就需要自己自定義了。
實現思路
首先我們先了解下微信的路由api和微信的路由機制，微信一共提供了5個路由api：wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack、wx.reLaunch，具體文檔位於https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html。
其中我們用哪個呢？很顯然wx.switchTab很合我們的口味，因為他的切換效果是沒有推入推出動畫的，更符合我們的習慣，那使用他的前提是我們需要在app.json文件中配置tabBar屬性，而只要一配置了tabBar屬性，系統原生的導航欄就出現了，幸好微信有一個隱藏原生導航欄的api：wx.hideTabBar。看到這里相信聰明的你已經知道了實現思路，就是隱藏掉原生的然后自己去實現一個導航欄貼在最下面。
分享一些我覺得需要注意的點
-
首先，微信的tab配置，支持2-5項，同時只有配置了tab的才能通過
wx.switchTab方法跳轉過去，因此我們自定義的導航欄數量也被限制在了2-5項，正常使用沒什么，但是如果大家要基於權限判斷做動態路由，就要慎重了；舉個例子，有a,b兩種身份，a可以看到的頁面是A、B、C，b可以看到的頁面是D、E、F，這種情況就不能通過本項目的代碼實現了，好在通過觀察發現，並不是不同身份的人看到的頁面完全不一樣(如果完全不一樣可以做兩個小程序啊)，比如 a : A、B、C，b: A、B、D，這就完全沒問題了😁 -
如果有過SPA頁面開發經驗的小伙伴注意，小程序並不是單頁面的，拿本例來說，tabbar組件在各個頁面都會渲染一次，大家互不影響，這也是我為何在wxml中寫死
activeIdx的原因，所以這點需要注意，你改了這個頁面的tabbar，別的頁面不一定會變的。關於這個問題我能想到的解決辦法是用全局store管理狀態，這樣能保證多個組件的表現一致 -
還有就是config/router.js存在的必要，主要原因是我們無法通過代碼獲取到app.json的配置，這就相當於我們的配置要寫兩份並且大部分值是一樣的，這個目前還沒想到很好的解決辦法。
總結
代碼大家可以直接打開代碼片段或者下載github后查看src文件夾，代碼不是很復雜定位是提供一種實現思路，所以對於很多項目來說直接copy它並不能滿足項目需要，可以根據自身業務去完全重寫一份。如果對本代碼或在開發過程中遇到什么問題，歡迎與我交流858582381~