很多新手在寫tabBar的時候會發現明明自己按照微信開發文件的示例寫的tabBar，但是卻不出自己想要的效果，這個我剛開始寫小程式的時候也遇到了同樣的問題，現在給大家講講我的解決方案 
　一般我們會在在專案的app.json使用以下程式碼，卻沒有如期望那樣在螢幕底部出現TabBar。 

{
      "pages":[
         "pages/welcome/welcome",
        "pages/index/index",
        "pages/posts/posts",
        "pages/posts/post_detail/post_detail",
        "pages/movie/movie" 
         ],
      "window": {
        "navigationBarBackgroundColor": "#405f80"
        },
      "tabBar": {
        "color": "#000000",
        "borderStyle": "#000",
        "selectedColor": "#9999FF",
        "list": [
         {
            "pagePath": "pages/index/index",
            "text": "首頁",
            "iconPath": "images/posts/wenzi1.png",
            "selectedIconPath": "images/posts/wenzi2.png"
          },
          {
            "pagePath": "pages/posts/posts",
            "text": "美文",
            "iconPath": "images/posts/wenzi1.png",
            "selectedIconPath": "images/posts/wenzi2.png"
          },
          {
            "pagePath": "pages/movie/movie",
            "text": "電影",
            "iconPath": "images/movie/movie1.png",
            "selectedIconPath": "images/movie/movie2.png"
          }
       ]
    }
 

卻沒有得到我們想要的效果，如下圖： 

對於這個問題我呢找到了兩種解決方案，都是可行的 
第一種解決方案主要是針對不想在小程式一進來的首頁展示tabBar，而是在進入歡迎頁面後才在底部展示個性選單，那麼首先你要在你的歡迎頁面的js頁面新增以上幾行程式碼

Page({
  come_baby:function(event){
    wx.switchTab({
      url: '../index/index',
    })
  }
})

注：come_baby是我歡迎頁面的按鈕的事件名稱，點選按鈕觸發這個事件，小夥伴們可以改成自己喜歡的名字 
 
新增完這幾行程式碼後我們可以得到如下效果： 
這是歡迎頁面，點選“開啟小程式之旅”觸發“come_baby”事件 
 

方法二：那麼第二種方法就是在歡迎頁面就顯示個性選單，那這個需要怎麼設定呢，也很簡單，只需要一步即可完成 
就是在app.json檔案中pages的第一條資料與tabBar裡list的第一個地址相對應即可 
 
設定完這些就可以得到以下效果 
 
怎麼樣，是不是很簡單，哈哈哈哈！~
--------------------- 

轉載自
作者：Wu_Xiao_Man 
來源：CSDN 
原文：https://blog.csdn.net/Wu_Xiao_Man/article/details/81841311