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

配置小程序

小程序的很多开发需求被规定在了配置文件中。
常见的配置文件：

• 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"

}