微信小程序入門（三）配置小程序

配置小程序

小程序的很多開發需求被規定在了配置文件中。
常見的配置文件：

• Project.config.json:項目配置文件，比如項目名稱，appid
• Sitemap.json：小程序搜索相關的
• App.json:全局配置
• Page.json：頁面配置

全局配置

官方文檔

pages: 頁面路徑列表

• 用於指定小程序由那些頁面組成，每一項都對應一個頁面的路徑信息。文件名不需要寫文件後綴，框架會自動去尋找對應位置的 .json, .js, .wxml, .wxss 四個文件進行處理。
• 小程序中所有的頁面都是必須在pages中進行註冊的。

window: 全局的默認窗口展示

• 用於設置小程序的狀態欄、導航條、標題、窗口背景色。
  

tabBar: 頂部tab欄的展示

app.json

{
  "pages": [
    "pages/home/home",
    "pages/about/about",
    "pages/profile/profile",
    "pages/search/search",
    "pages/news/news",
    "pages/category/category"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "汽車之家",
    "backgroundColor": "#ffffff",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "selectedColor": "#d81e06",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首頁",
        "iconPath": "assets/images/tabbar/home.png",
        "selectedIconPath": "assets/images/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分類",
        "iconPath": "assets/images/tabbar/category.png",
        "selectedIconPath": "assets/images/tabbar/category_active.png"
      },
      {
        "pagePath": "pages/search/search",
        "text": "搜索",
        "iconPath": "assets/images/tabbar/search.png",
        "selectedIconPath": "assets/images/tabbar/search_active.png"
      },
      {
        "pagePath": "pages/news/news",
        "text": "消息",
        "iconPath": "assets/images/tabbar/news.png",
        "selectedIconPath": "assets/images/tabbar/news_active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "assets/images/tabbar/profile.png",
        "selectedIconPath": "assets/images/tabbar/profile_active.png"
      }
    ]
  },
  "sitemapLocation": "sitemap37.json"
}

頁面配置

每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現進行配置。

• 頁面中配置項在當前頁面會覆蓋 app.json 的 window 中相同的配置項。

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTitleText": "商品分類",
  "navigationBarTextStyle": "black"

}