微信小程序开发初学：全局配置及页面配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象。

配置项

pages
页面路径列表
可用于创建页面，及小程序启动默认首页

"pages":[/*要注意语法*/
    /*两个路径之间需要用逗号分隔,首尾不加逗号*/
    "pages/input/input",   /*列表第一项为默认启动页面，可用Alt键+上下方向键进行快捷移动*/
    "pages/index/index",
    "pages/button/button",
    "pages/switch/switch",
    "pages/logs/logs"
  ],

window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性
（1）navigationBarBackgroundColor：导航栏背景颜色，仅支持十六进制颜色表示

（2）navigationTitleText：导航栏标题文字内容

（3）navigationTextStyle：导航栏标题文字样式，目前仅支持black和white

（4）enablePullDownRefresh：是否开启下拉刷新

（5）backgroundColor：窗口背景颜色，通常被pages页面覆盖，需要下拉刷新才能显示

（6）backgroundColorTop / backgroundColorBottom：顶部/底部窗口颜色，两者仅IOS支持

（7）backgroundTextStyle：下拉loading图标的样式，仅支持dark和light两种属性值

"window":{/*要注意语法*/
    "navigationBarBackgroundColor": "#000000",
    /*导航栏背景颜色，仅支持十六进制颜色表示*/
    "navigationBarTitleText": "LZH",
    /*导航栏标题文字内容*/
    "navigationBarTextStyle":"white",
    /*导航栏标题文字样式，仅支持black和white*/
    "enablePullDownRefresh": true,
    /*允许下拉刷新（首页一般不用）*/
    "backgroundColor": "#000",
    /*窗口背景颜色，通常被pages页面覆盖，需要下拉刷新才能显示*/
    "backgroundTextStyle":"light",
    /*下拉loading图标的样式*/
  },

tabBar
菜单栏：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性
list
菜单列表，类型为Array数组类型，存放 tab
list具有的属性
（1）pagePath：页面路径，必须在pages文件夹中先定义，必填
（2）text：文字内容，必填
（3）iconPath：图标路径，不支持网络路径，position 为 top 时不显示
（4）selectedIconPath：选中时的图标，不支持网络路径，position 为 top 时不显示

Color
未选中的tab文字颜色，仅支持十六进制颜色表示

selecteColor
选中的tab文字颜色，仅支持十六进制颜色表示

backgroudColor
tab背景颜色，仅支持十六进制颜色表示

borderStyle
tabBar上边框颜色，仅支持white和black两种

position
tabBar位置，仅支持top（顶部）和bottom（底部）

"tabBar": {/*要注意语法*/
    "color": "#c30",
    /*未选中的tab文字颜色*/
    "selectedColor":"#0ff",
    /*选中的tab文字颜色*/
    "backgroundColor": "#ccc",
    /*tab背景颜色，仅支持十六进制颜色表示*/
    "borderStyle": "white",
    /*tabBar上边框颜色，仅支持white和black两种*/
    
    "list": [
      {
        "pagePath": "pages/index/index",        /*页面路径*/
        "iconPath": "/image/home.png",          /*图标路径*/
        "selectedIconPath": "/image/home-h.png",/*选中时的图标*/
        "text": "首页"                          /*文字内容*/
      },{
        "pagePath": "pages/button/button",
        "iconPath": "image/user.png",
        "selectedIconPath": "/image/user-h.png",
        "text": "按钮案例"
      },{
        "pagePath": "pages/input/input",
        "iconPath": "/image/setting.png",
        "selectedIconPath": "/image/setting-h.png",
        "text": "inputDemo"
      }
    ]
  },

页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。
配置项属性与app.json的window中的属性相同
页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
如以下代码：

/*app.json文件*/
"window":{
   "navigationBarBackground":"#000"
}

/*index.json文件*/
{
   "navigationBarBackground":"#ccc"
}

/*全局配置文件和index配置文件定义了不同的navigationBarBackgroundColor,
index页面会优先显示导航栏背景颜色为#ccc，其他页面不变*/

内容参考自小程序API：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

这里提供两个图标素材下载网址
iconfont - 阿里巴巴矢量图标库
（登录后才能下载图片）
https://www.iconfont.cn/plus

Iconfinder Free Icons
（可直接下载，但个人感觉没有iconfont方便）
http://iconion.com/posts/iconfinder-free-icons/