小程序开发之JSON配置

前言

昨天开始换了一个新的工作环境，昨天一天都在看微信小程序，之前也没有接触过这个，第一次接触还是有点陌生，但是还好昨天看了一天基本上语法啥的都知道是怎么回事了，这里记录一下以后可以查看。首先要说的就是app.json这个文件的配置，其实这些在微信公众号开发文档里都有但我还是想分开记录以后也好查看。官方文档地址点这里
1.app.json这个文件主要就是对当前小程序的全局配置,包括了小程序的所有访问页面路径，页面表现，网络超时，底部tab等，如下所示：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

image.png

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。如下所示：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

window

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

image.png
image.png

如下所示：

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

tabBar

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

image.png
image.png

networkTimeout

可以设置各种网络请求的超时时间。

image.png

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。