在开发微信小程序时，是如何配置项目文件的？比如app.json、page.json等。

本文链接：https://blog.csdn.net/qq_36777143/article/details/144935489

在开发微信小程序时，配置文件如 app.json 和页面级别的 page.json（如果存在）用于定义应用和页面的行为、外观以及其他设置。这些配置文件是 JSON 格式的纯文本文件，它们允许开发者集中管理项目的全局属性和页面特定的属性。

1. `app.json` 配置

app.json 是微信小程序的全局配置文件，它定义了整个小程序的基本信息和页面路径等重要参数。以下是关于 app.json 的一些关键点：

a. pages

描述：指定小程序的所有页面路径。
使用场景：确保每个页面都被正确加载，并且可以被导航到。
示例：

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

b. window

描述：设置小程序所有页面的顶部窗口表现。
使用场景：统一管理页面的背景颜色、导航栏样式等。
示例：

{
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

c. tabBar

描述：配置小程序底部或顶部的标签栏。
使用场景：为用户提供快速切换不同功能模块的方式。
示例：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/logs.png",
        "selectedIconPath": "images/logs-active.png"
      }
    ],
    "color": "#000",
    "selectedColor": "#1aad19",
    "backgroundColor": "#fff",
    "borderStyle": "black"
  }
}

d. networkTimeout

描述：设置网络请求超时时间。
使用场景：优化用户体验，避免长时间等待。
示例：

{
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }
}

e. debug

描述：是否开启调试模式。
使用场景：开发过程中启用以查看更多的调试信息。
示例：

{
  "debug": true
}

2. 页面级别的 `page.json`

虽然不是必须的，但你可以在每个页面的根目录下创建一个 page.json 文件来覆盖 app.json 中的某些配置项。这使得你可以针对单个页面进行更细致的调整。

a. window

描述：与 app.json 中的 window 类似，但仅对该页面生效。
使用场景：当某个页面需要不同的导航栏标题或其他窗口表现时使用。
示例：

{
  "window": {
    "navigationBarTitleText": "详情页"
  }
}

b. usingComponents

描述：声明页面中使用的自定义组件。
使用场景：确保组件被正确引入并可用。
示例：

{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

3. 其他配置文件

除了上述两个主要配置文件外，还有一些辅助性的配置文件：

a. `project.config.json`

描述：项目配置文件，主要用于开发工具中的项目设置，如编译选项、代码模板选择等。
使用场景：开发环境中使用，不会影响小程序运行时的行为。

b. `sitemap.json`

描述：站点地图文件，用来配置哪些页面允许被搜索引擎抓取。
使用场景：当你希望你的小程序能够被搜索引擎索引时使用。

示例 `app.json` 文件

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/logs.png",
        "selectedIconPath": "images/logs-active.png"
      }
    ],
    "color": "#000",
    "selectedColor": "#1aad19",
    "backgroundColor": "#fff",
    "borderStyle": "black"
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}