# 微信小程序--JSON 配置

# 一、什么是json

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色

• JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

• JSON的值只能是以下几种数据格式，其他任何格式都会触发报错。

  • 1, 数字，包含浮点数和整数
  • 2, 字符串，需要包裹在双引号中
  • 3, Bool值，true 或者 false
  • 4, 数组，需要包裹在方括号中 []
  • 5, 对象，需要包裹在大括号中 {}
  • 6, Null

• 还需要注意的是 JSON 文件中无法使用注释，添加注释将会引发报错。

• json数据最后一个元素，不能有,号。数组和对象里的最后一个元素，也不能有,号。

# 二、全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置

编号|属性|类型|必填|描述 ---|---|---|---|---|--- 1|pages|string[]|是|页面路径列表 2|window|Object|否|全局的默认窗口 3|tabBar|Object|否|底部 tab 栏 4|networkTimeout|Object|否|网络超时时间 5|debug|boolean|否|是否开启 debug 模式，默认关闭 6|functionalPages|boolean|否|是否启用插件功能页，默认关闭 7|subpackages|Object[]|否|分包结构配置 8|workers|string|否|Worker 代码放置的目录 9|requiredBackgroundModes|string[]|否|需要在后台使用的能力，如「音乐播放」 10|plugins|Object|否|使用到的插件 11|preloadRule|Object|否|分包预下载规则 12|resizable|boolean|否|iPad 小程序是否支持屏幕旋转，默认关闭 13|navigateToMiniProgramAppIdList|string[]|否|需要跳转的小程序列表，详见 wx.navigateToMiniProgram 14|usingComponents|Object|否|全局自定义组件配置|开发者工具 15|permission|Object|否|小程序接口权限相关设置 16|sitemapLocation|string|是|指明 sitemap.json 的位置 17|style|string|否|指定使用升级后的weui样式 18|useExtendedLib|Object|否|指定需要引用的扩展库 19|entranceDeclare|Object|否|微信消息用小程序打开

# 1、pages 指定小程序页面

类型：string

• 每一项都对应一个页面的 路径（含文件名）
• 快速创建页面，一个页面对应四个文件：.json .js .wxml .wxss
• 第一个页面是首页

"pages": [
  "pages/index/index",
  "pages/logs/logs",
  "pages/1/1",
  "pages/1/2"
],

# 2、window 用于设置小程序的状态栏、导航条、标题、窗口背景色

类型：Object

编号|属性|类型|默认值|描述 ---|---|---|---|---|--- 1|navigationBarBackgroundColor|HexColor|#000000|导航栏背景颜色，如 #000000 2|navigationBarTextStyle|string|white|导航栏标题颜色，仅支持 black / white 3|navigationBarTitleText|string||导航栏标题文字内容 4|navigationStyle|string|default|导航栏样式 5|backgroundColor|HexColor|#ffffff|窗口的背景色 6|backgroundTextStyle|string|dark|下拉 loading 的样式，仅支持 dark / light 7|backgroundColorTop|string|#ffffff|顶部窗口的背景色，仅 iOS 支持 8|backgroundColorBottom|string|#ffffff|底部窗口的背景色，仅 iOS 支持 9|enablePullDownRefresh|boolean|false|是否开启全局的下拉刷新 10|onReachBottomDistance|number|50|页面上拉触底事件触发时距页面底部距离，单位为 px 11|pageOrientation|string|portrait|屏幕旋转设置

"window": {
  "navigationBarBackgroundColor" : "#000000", // 导航栏背景颜色
  "navigationBarTextStyle" : "white",         // 导航栏标题颜色，仅支持black / white
  "navigationBarTitleText": "欧阳克课件",      // 导航栏标题文字内容
  "backgroundColor" : "#ffffff",              // 窗口的背景色
  "backgroundTextStyle" : "dark",             // 下拉 loading 的样式，仅支持 dark / light
  "enablePullDownRefresh" : true              // 是否开启全局的下拉刷新，默认false
},

• 备：backgroundColor 不是页面的背景颜色，在微信开发者工具中是看不出效果的

# 3、tabBar 底部按钮

类型：Object

• list 属性

"tabBar" : {
  "color" : "#000000",
  "selectedColor" : "#aa33aa",
  "backgroundColor" : "#ffffff",
  "borderStyle" : "black",
  "list" : [
    {
      "pagePath" : "pages/index/index",
      "text" : "首页"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }
  ]
},

• 备：list的页面，必须在pages中存在
• 备：list的按钮顺序为正序
• 备：list的按钮2-5个，只会出现在这2-5个页面中

# 三、页面配置

每一个页面都可以使用 .json 文件来对本页面的窗口进行配置

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle" : "black",
  "navigationBarTitleText" : "第一页面",
}