貓眼電影底部導航

轉自csdn

學習小程序是一個拓展吧。
貓眼電影底部導航在好久之前已經學過代碼，我學的是劉剛寫的「微信小程序開發」，可是因爲臨近考試，並且代碼出現錯誤，便沒繼續學了。
寫這個代碼，我遇到了不少問題，一一列出來：
代碼位於app.json

1. 大小寫問題，tabBar pagePath list selectedIconPath borderStyle selectedColor 這些都是區分大小寫的，若錯誤，則這個命令無效。

2. 顏色控制問題，borderStyle 這個選項只能填 white 或者 black ，不然錯誤

3. 單詞不瞭解，background 背景，navigation 導航，tab bar 標籤欄，pagepath 頁面路徑， icon 圖標。

4. 圖片，圖片會保存在images，圖片名稱和代碼名稱要注意保持一致，否則會出錯。
5. 總，代碼包括page配置頁面路徑，window配置窗口表現，tabbar配置標籤導航。

整體仍是很簡單的。

如下是代碼：

{
  "pages": [
    "pages/movie/movie",
    "pages/cinema/cinema",
    "pages/find/find",
    "pages/me/me"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#D53E37",
    "navigationBarTitleText": "電影",
    "navigationBarTextStyle": "white"
  },
"tabBar":{
  "selectedColor":"#d53e37",
  "backgroundColor":"#f5f5f5",
  "borderStyle":"black",
  "list":[{
    "pagePath":"pages/movie/movie",
    "text":"電影",
    "iconPath":"images/bar/movie-0.jpg",
    "selectedIconPath":"images/bar/movie-1.jpg"
  },
  {
    "pagePath": "pages/cinema/cinema",
    "text": "影院",
    "iconPath": "images/bar/cinema-0.jpg",
    "selectedIconPath": "images/bar/cinema-1.jpg"
  },
  {
        "pagePath": "pages/find/find",
        "text": "發現",
        "iconPath": "images/bar/find-0.jpg",
        "selectedIconPath": "images/bar/find-1.jpg"
  },
  {
        "pagePath": "pages/me/me",
        "text": "個人",
        "iconPath": "images/bar/me-0.jpg",
        "selectedIconPath": "images/bar/me-1.jpg"

}
    ]
  },
  "           ": "sitemap.json"
}