微信小程序开发-配置文件详解

一，小程序创建的配置文件介绍

根据图片内容，微信小程序中包含几种不同的配置文件，每种文件都有其特定的用途和作用。以下是这些配置文件的介绍：

二，配置文件-全局配置-pages 配置

在微信小程序的全局配置文件app.json中，pages字段扮演着至关重要的角色。以下是pages字段的作用和注意事项：

作用：

1. 定义页面路径：

   • pages字段用来指定小程序由哪些页面组成。
   • 它定义了小程序中所有页面的路径，让小程序知道页面定义在哪个目录。

2. 页面路由：

   • 通过pages数组，小程序框架能够知道如何根据路径加载对应的页面。
   • 它不需要写文件后缀，框架会自动查找对应位置的.json、.js、.wxml、.wxss四个文件进行处理。

3. 初始页面：

   • 如果没有指定entryPagePath，数组的第一项代表小程序的初始页面（首页）。

注意事项：

1. 文件后缀：

   • 在配置pages字段时，不需要写文件后缀，如index而不是index.wxml。

2. 动态修改：

   • 小程序中新增或减少页面时，都需要对pages数组进行相应的修改。

3. 初始页面：

   • 如果没有指定entryPagePath，数组的第一项自动成为小程序的初始页面。

4. 路径格式：

   • 路径应该以斜杠/开头，表示相对于项目根目录的路径。

5. 数组顺序：

   • pages数组中的顺序会影响小程序的页面加载顺序。

示例：

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

在这个示例中：

• pages/index/index 是小程序的初始页面。
• pages/logs/logs 和 pages/about/about 是其他页面。

通过合理配置pages字段，可以确保小程序的页面结构清晰，便于管理和维护。

三，配置文件-全局配置-window 配置

在微信小程序的全局配置文件app.json中，window字段用于设置小程序的状态栏、导航条、标题、窗口背景色等全局样式属性。以下是window配置的作用：

1. 状态栏样式：

   • 可以设置状态栏的颜色、隐藏或显示等。

2. 导航栏样式：

   • 可以设置导航栏的颜色、字体颜色、背景色等。

3. 导航栏标题：

   • 可以设置导航栏标题的文本内容、字体大小、字体颜色等。

4. 窗口背景色：

   • 可以设置小程序窗口的背景颜色。

5. 导航栏高度：

   • 可以设置导航栏的高度。

6. 下拉背景字体色：

   • 可以设置下拉时背景字体的颜色。

7. 下拉背景色：

   • 可以设置下拉时背景的颜色。

8. 导航栏阴影：

   • 可以设置导航栏的阴影效果。

9. 导航栏圆角：

   • 可以设置导航栏的圆角效果。

10. 导航栏边框：

    • 可以设置导航栏的边框。

示例：

{
  "window": {
    "navigationBarTitleText": "小程序标题",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "navigationBarShadow": "#000000",
    "navigationStyle": "custom",
    "enablePullDownRefresh": true
  }
}

在这个示例中：

• navigationBarTitleText 设置导航栏标题为“小程序标题”。
• navigationBarBackgroundColor 设置导航栏背景颜色为白色。
• navigationBarTextStyle 设置导航栏文字颜色为黑色。
• backgroundColor 设置窗口的背景颜色为浅灰色。
• backgroundTextStyle 设置下拉时背景字体颜色为浅色。
• navigationBarShadow 设置导航栏的阴影效果。
• navigationStyle 设置导航栏样式为自定义。
• enablePullDownRefresh 启用下拉刷新功能。

通过合理配置window字段，可以确保小程序的界面风格统一，提升用户体验。

四，配置文件-全局配置-tabbar 配置

在微信小程序的全局配置文件app.json中，tabBar字段用于定义小程序的底部 tab 栏，它允许用户快速在不同的页面间切换。

以下是tabBar的核心作用和配置项。

核心作用：

1. 页面快速切换：

   • 提供一个直观的界面元素，让用户可以快速在不同的页面间切换。

2. 持久显示：

   • 在小程序的底部或顶部持久显示，方便用户随时访问。

3. 提升用户体验：

   • 通过直观的图标和文本，提高用户的操作便利性和小程序的用户体验。

配置项：

1. list：

   • 一个数组，定义了 tab 栏中的所有 tab 项，最少包含 2 个，最多 5 个。

2. pagePath：

   • 指定 tab 对应页面的路径。

3. iconPath：

   • 指定 tab 的默认图标路径。

4. selectedIconPath：

   • 指定 tab 被选中时的图标路径。

5. text：

   • 指定 tab 的文字描述。

6. borderStyle：

   • 指定 tab 栏边框的颜色。

7. backgroundColor：

   • 指定 tab 栏的背景色。

8. color：

   • 指定 tab 的文字和图标的默认颜色。

9. selectedColor：

   • 指定 tab 被选中时的文字和图标颜色。

示例配置：

{
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "path/to/icon.png",
        "selectedIconPath": "path/to/selected-icon.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "path/to/icon.png",
        "selectedIconPath": "path/to/selected-icon.png"
      }
    ],
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#000000",
    "selectedColor": "#3cc51f"
  }
}

在这个示例中：

• list 数组定义了两个 tab 项，每个项都包含页面路径、文本、默认图标和选中图标。
• borderStyle、backgroundColor、color 和 selectedColor 分别定义了 tab 栏的边框颜色、背景色、默认文字颜色和选中文字颜色。

通过合理配置tabBar，开发者可以创建一个既美观又实用的导航栏，提升小程序的整体体验。