學習微信小程式中，遇到底部的TabBar不出現的問題。經過多番嘗試，終於解決問題。在此記錄問題產生的原因和對策。下面先描述錯誤現象，接著指出錯誤原因，最後提供正確的例項。
　　錯誤現象是，專案的app.json使用以下程式碼，卻沒有如期望那樣在螢幕底部出現TabBar。

{
  "pages":[
    "pages/clickDemo/clickDemo",
    "pages/logs/logs",
    "pages/index/index",
    "pages/mypage/mypage"
  ],
  "window": {
    "backgroundTextStyle": "dark "
 
,
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "Tabbar Demo",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#ff0000"
  },
  "tabBar": {
    "color": "#000000",
    "borderStyle": "#000",
    "selectedColor": "#9999FF",
    "list": [
      {
        "pagePath": "pages/index/index"
 
,
        "text": "首頁",
        "iconPath": "image/location_normal.png",
        "selectedIconPath": "image/location_selected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "設定",
        "iconPath": "image/setting_normal.png",
        "selectedIconPath": "image/setting_selecred.png"
 

      }
    ]
  }
}

底部沒有出現TabBar，如圖1所示。

圖1 左側的螢幕效果圖中，底部沒有TabBar

　　為什麼底部不出現TabBar？原因在於，app.json頭部的pages陣列的第一項"pages/clickDemo/clickDemo"沒有成為tabBar的一員，也就是在tabBar的list陣列內沒有連結clickDemo頁面的條目。
　　具體對策有兩種。一，我們在list陣列內加入連結clickDemo頁面的條目，如圖2所示。圖2中的紅色矩形框內的程式碼是新加的，下面給出了這段程式碼。二，把pages陣列的第一項設定為"pages/index/index"，或者設定為"pages/logs/logs"。也就是說，pages陣列的第一項必須是tabBar的list陣列的一員。
　　

圖2 解決底部不出現TabBar的對策

　　對策一在app.json內新增的程式碼如下。注意，tabBar的list陣列的條目之間要用逗號分隔。

      {
        "pagePath": "pages/clickDemo/clickDemo",
        "text": "事件Demo",
        "iconPath": "image/setting_normal.png",
        "selectedIconPath": "image/setting_selecred.png"
      }

　　題外話，微信小程式的開發工具需要大大大提升，包括它的使用手冊。本文提及的問題是一個隱晦的約定。開發人員違反約定的話，開發工具應該快速指出來，甚至給出改進措施。否則，會浪費開發人員大量時間，破壞他/她們的情緒，最後可能形成“開發微信小程式真費勁”的結論。祝願微信小程式開發工具越來越好用。