微信小程序day01-JSON配置

微信小程序

小程序代码构成

JSON配置
WXML模板
WXSS样式
JS逻辑

1、JSON配置

小程序配置 app.json

app.json: 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等

pages字段

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段

用于设置小程序的状态栏、导航条、标题、窗口背景色。定义小程序所有页面的顶部背景颜色，文字颜色定义等。

tabBar字段

客用于定义户端窗口的底部或顶部有 tab 栏可以切换页面，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象

代码:

{
  "pages":[
    "pages/aboutme/aboutme",
    "pages/index/index",
    "pages/logs/logs"
    //路径先后顺序决定页面先后顺序
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ccc",
    "navigationBarTitleText": "微信",
    "navigationBarTextStyle":"white"
  },
 "tabBar": {
   "color":"#fff",
   "selectedColor":"#fff",
   "backgroundColor":"#ccc",
   "borderStyle":"black",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }
  ]
}
}

工具配置 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

JSON 语法

这里说一下小程序里JSON配置的一些注意事项。

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

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

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

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