微信小程序的 app.json 文件有什么作用？

推荐答案

app.json 文件是微信小程序的全局配置文件，用于配置小程序的页面路径、窗口表现、网络超时时间、底部 tab 等。它是小程序启动时加载的第一个配置文件，决定了小程序的基本结构和行为。

本题详细解读

1. app.json 文件的作用

app.json 文件是微信小程序的全局配置文件，主要用于以下几个方面：

• 页面路径配置：通过 pages 字段配置小程序的页面路径，小程序会根据这个配置自动生成页面路由。
• 窗口表现：通过 window 字段配置小程序的窗口表现，包括导航栏、标题、背景色等。
• 网络超时时间：通过 networkTimeout 字段配置网络请求的超时时间。
• 底部 tab：通过 tabBar 字段配置小程序的底部 tab 栏，包括 tab 的图标、文字、页面路径等。
• 其他配置：还可以配置 debug 模式、页面样式等。

2. app.json 文件的结构

app.json 文件是一个 JSON 格式的文件，其基本结构如下：

// www.javascriptcn.com code example
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

3. app.json 文件的字段详解

• pages：用于指定小程序的页面路径，数组中的每一项都是一个页面的路径，路径不需要写 .json 后缀，框架会自动去寻找对应路径的 .json、.js、.wxml、.wxss 四个文件进行处理。

• window：用于设置小程序的状态栏、导航条、标题、窗口背景色等。常用的子字段包括：

  • navigationBarTitleText：导航栏标题文字内容。
  • navigationBarBackgroundColor：导航栏背景颜色。
  • navigationBarTextStyle：导航栏标题颜色，仅支持 black / white。
  • backgroundColor：窗口的背景色。
  • backgroundTextStyle：下拉背景字体、loading 图的样式，仅支持 dark / light。

• tabBar：用于配置小程序的底部 tab 栏。常用的子字段包括：

  • list：tab 的列表，最少 2 个、最多 5 个 tab。每个 tab 包含以下字段：
    • pagePath：页面路径，必须在 pages 中先定义。
    • text：tab 上按钮文字。
    • iconPath：图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px。
    • selectedIconPath：选中时的图片路径。

• networkTimeout：用于设置网络请求的超时时间。常用的子字段包括：

  • request：wx.request 的超时时间，单位为毫秒。
  • connectSocket：wx.connectSocket 的超时时间，单位为毫秒。
  • uploadFile：wx.uploadFile 的超时时间，单位为毫秒。
  • downloadFile：wx.downloadFile 的超时时间，单位为毫秒。

• debug：用于开启小程序的调试模式，默认为 false。开启后可以在开发者工具中看到更多的调试信息。

4. 注意事项

• app.json 文件中的路径配置必须准确，否则会导致页面无法正常加载。
• tabBar 配置中的 list 数组中的每一项都必须包含 pagePath 和 text 字段。
• window 配置中的 navigationBarTextStyle 只支持 black 和 white 两种颜色。
• networkTimeout 配置中的超时时间单位为毫秒，需根据实际需求合理设置。