微信小程序的json文件配置

1. 全局配置文件中常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件，常用的配置项如下：

• pages 记录当前小程序所有页面的存放路径
• window 全局设置小程序窗口的外观
• tabBar 设置小程序底部的tabBar效果
• style 是否启用新版的组件样式

2. 小程序窗口的组成部分

3. 小程序app.json文件常用配置

{
  //小程序中的页面
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  //全局窗口外观
  "window":{
  
     //下拉 loading 的样式(加载的小圆点)，仅支持 `dark` / `light`
    "backgroundTextStyle":"light",
    //导航栏背景颜色，如 `#000000`,仅支持16进制颜色
    "navigationBarBackgroundColor": "#2b4b6b",
    //导航栏标题
    "navigationBarTitleText": "小程序", 
    //导航栏标题颜色，仅支持 `black` / `white`
    "navigationBarTextStyle":"white",
    //开启下拉刷新 不推荐全局开启下拉刷新
    "enablePullDownRefresh": true,
    //下拉刷新的背景色
    "backgroundColor": "#efefef"，
    //设置上拉触底的距离，默认为50px,一般不做修改
    "onReachBottomDistance": 50
 
 },
  //启用新版小程序组件样式
  "style": "v2",
  //指明 sitemap.json 的位置
  "sitemapLocation": "sitemap.json"
}

4. tabBar的配置

• tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：底部tabBar，顶部tabBar
• tabBar中只能配置最少2个，最多5个tab标签。
• 当渲染顶部tabBar时，不显示icon，只显示文本。 创建tabBar的步骤： 在app.json中window同级目录下,创建tabBar

  "tabBar": {
    //tabbar 上边框的颜色， 仅支持 `black` / `white`
    "borderStyle":"white",
    //tab 的列表，详见 `list` 属性说明，最少 2 个、最多 5 个 tab
    "list": [
      {
        //页面路径，必须在 pages 中先定义
        "pagePath": "pages/index/index",
        //tab 上按钮文字
        "text": "首页",
        //默认图片路径
        "iconPath": "/images/home.png",
        //选中时的图片路径
        "selectedIconPath": "/images/home-o.png",
        //选中时的文字颜色
        "selectedColor": "#07c160",
        //默认文字颜色
        "color": "#fff"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "/images/category.png",
        "selectedIconPath": "/images/category-o.png",
        "selectedColor": "#07c160",
        "color": "#fff"
      },

    ]
  },

5. 页面json配置

• 小程序中，每个页面都有自己的json配置文件，用来配置当前页面的窗口外观、页面效果。
• app.json中的window节点，全局配置小程序中每一个页面的窗口外观。
• 当某个页面需要个性化配置时，页面级别的json配置文件就可以解决这种需求。
• 当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

{
  "usingComponents": {},
  "navigationBarTitleText": "分类",
  "navigationBarBackgroundColor": "#ff0000",
  "navigationBarTextStyle": "black",
  "backgroundColor": "#ff0000",
  "enablePullDownRefresh": true
}