微信小程序配置文件-优快云博客

1. 配置文件介绍

微信小程序的主要配置文件包括：

app.json：全局配置文件，定义整个应用的设置，如页面路由、窗口样式、底部标签栏等。
page.json：页面级配置文件，每个页面单独使用，覆盖全局设置。
project.config.json：项目配置文件，用于IDE工具（如微信开发者工具）的项目设置。
sitemap.json：搜索引擎索引配置文件，控制小程序内容是否可被搜索。
其他：如分包配置在app.json中，Sass配置通过构建工具实现。

这些文件使用JSON格式编写，放置在项目根目录或对应页面文件夹中。开发时，需确保语法正确，避免格式错误。

2. 全局配置文件-pages配置

在app.json中，pages字段用于注册小程序的所有页面路径。每个页面路径对应一个目录，系统会自动查找该目录下的.js、.wxml、.wxss和.json文件。
参数详情：

类型：数组（Array），包含字符串元素。
元素格式：每个字符串表示页面路径，例如 "pages/index/index"，路径从根目录开始，无需文件后缀。
作用：定义页面访问顺序，数组第一个元素为首页（启动时加载）。
注意事项：添加新页面后，需在此数组中注册，否则无法访问。

示例代码：

{
  "pages": [
    "pages/index/index",   // 首页
    "pages/logs/logs",     // 日志页
    "pages/user/profile"   // 用户页
  ]
}

此配置表示小程序有三个页面，首页为index。

3. 全局配置文件-window配置

在app.json中，window字段用于设置小程序的全局窗口样式，如导航栏、背景色等。
参数详情：

类型：对象（Object）。
常用属性：
- navigationBarBackgroundColor：导航栏背景颜色，如 "#000000"（十六进制）。
- navigationBarTextStyle：导航栏标题颜色，仅支持 "black" 或 "white"。
- navigationBarTitleText：导航栏标题文字，如 "我的小程序"。
- backgroundColor：窗口背景色，下拉刷新时可见。
- backgroundTextStyle：下拉刷新时 loading 的样式，支持 "dark" 或 "light"。
- enablePullDownRefresh：是否开启下拉刷新，布尔值（true 或 false）。
作用：统一所有页面的默认窗口样式，可被页面级配置覆盖。

示例代码：

{
  "window": {
    "navigationBarBackgroundColor": "#f8f8f8",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序示例",
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true
  }
}

此配置设置导航栏为浅灰色背景、黑色标题，并开启下拉刷新。

4. 全局配置文件-tabbar配置

在app.json中，tabBar字段用于定义底部标签栏（tabbar），支持多个标签页切换。
参数详情：

类型：对象（Object）。
常用属性：
- color：tab 默认颜色，十六进制值。
- selectedColor：tab 选中时颜色。
- backgroundColor：tab 背景色。
- borderStyle：边框样式，支持 "black" 或 "white"。
- list：数组，定义每个 tab 项，包含：
  - pagePath：页面路径，需在 pages 中注册。
  - text：tab 显示文字。
  - iconPath：未选中时图标路径（本地路径）。
  - selectedIconPath：选中时图标路径。
- position：tabbar 位置，支持 "bottom"（默认）或 "top"。
作用：创建多标签导航，提升用户体验。
注意事项：list 数组至少2个、最多5个元素。

示例代码：

{
  "tabBar": {
    "color": "#999",
    "selectedColor": "#ff0000",
    "backgroundColor": "#f8f8f8",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home_active.png"
      },
      {
        "pagePath": "pages/user/profile",
        "text": "我的",
        "iconPath": "images/user.png",
        "selectedIconPath": "images/user_active.png"
      }
    ]
  }
}

此配置创建两个 tab：首页和用户页，选中时图标变红。

5. 页面配置

每个页面有自己的 .json 文件（如 pages/index/index.json），用于覆盖全局配置（如 window 设置）。
参数详情：

类型：JSON 对象。
常用属性（与全局 window 类似，但仅作用于当前页）：
- navigationBarBackgroundColor
- navigationBarTextStyle
- navigationBarTitleText
- backgroundColor
- backgroundTextStyle
- enablePullDownRefresh
- disableScroll：是否禁止页面滚动，布尔值。
- usingComponents：引用自定义组件（对象形式）。
作用：定制单个页面的样式和行为。
注意事项：文件名必须与页面路径一致，否则无效。

示例代码（pages/index/index.json）：

{
  "navigationBarTitleText": "首页",
  "enablePullDownRefresh": true,
  "usingComponents": {
    "my-component": "/components/my-component"
  }
}

此配置覆盖全局，设置首页标题为“首页”，开启下拉刷新，并引用一个自定义组件。

6. 分包配置

在app.json中，subpackages字段用于实现分包加载，优化首次启动速度。分包将代码拆分成多个包，按需加载。
参数详情：

类型：数组（Array），每个元素是对象。
元素属性：
- root：分包根目录，如 "subpackage"。
- name：分包别名（可选）。
- pages：该分包下的页面路径数组，格式同全局 pages。
- independent：是否独立分包（布尔值），独立分包不依赖主包。
作用：减少主包大小，提升加载性能。
注意事项：分包总大小有限制（微信规定主包不超过2MB），路径需正确。

示例代码：

{
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cart/cart",
        "pages/order/order"
      ]
    },
    {
      "root": "packageB",
      "name": "b",
      "pages": [
        "pages/settings/settings"
      ],
      "independent": true
    }
  ]
}

此配置定义两个分包：packageA（包含购物车和订单页）和独立分包packageB（设置页）。

7. 项目配置文件和配置Sass

项目配置文件（project.config.json）：
位于项目根目录，用于配置开发工具设置，如IDE参数、编译选项等。
参数详情：
- appid：小程序ID。
- projectname：项目名称。
- setting：编译设置对象，如 es6（是否启用ES6转ES5）、minified（是否压缩代码）。
- libVersion：基础库版本。
- 作用：团队协作时，确保环境一致。
示例代码：
```
{
  "appid": "your-app-id",
  "projectname": "MyMiniProgram",
  "setting": {
    "es6": true,
    "minified": true
  }
}
```
配置Sass：
Sass是一种CSS预处理器，微信小程序原生不支持，但可通过构建工具（如Gulp或Webpack）集成。
步骤：
1. 安装依赖：npm install gulp-sass sass --save-dev。
2. 创建Gulp任务（gulpfile.js），将.scss文件编译为.wxss。
3. 在项目中使用Sass变量、嵌套等功能。
示例Gulp配置：
```
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('src/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist'));
});
```
运行 gulp sass 后，Sass文件会被编译到 dist 目录，小程序引用对应的 .wxss 文件即可。

8. sitemap.json文件

sitemap.json 用于控制小程序内容是否可被微信搜索引擎索引。放置在根目录。
参数详情：

类型：JSON 对象。
主要属性：
- rules：数组，定义索引规则，每个元素是对象。
  - action：操作类型，"allow"（允许索引）或 "disallow"（禁止）。
  - page：页面路径（支持通配符 *），如 "*" 表示所有页面。
- description：文件描述（可选）。
作用：提升小程序在微信搜索中的可见性。
注意事项：默认所有页面可索引；设置 disallow 可保护敏感页面。

示例代码：

{
  "rules": [
    {
      "action": "allow",
      "page": "pages/index/index"  // 允许索引首页
    },
    {
      "action": "disallow",
      "page": "pages/user/*"       // 禁止所有用户相关页面索引
    }
  ]
}

此配置只允许首页被搜索，用户页不可见。