微信小程序页面配置详解

在前面的学习中，我们已经了解了小程序的基本结构和组件使用。今天，我们将系统学习页面的配置。小程序的配置分为全局配置（app.json） 和页面配置（页面的.json文件）。全局配置为整个小程序设定基础规则，而页面配置则允许我们为每个独立页面进行个性化定制。理解这两者的关系和区别，是掌握小程序开发的重要一步。

一、全局配置文件与常用配置项

小程序根目录下的 app.json 文件是小程序的全局配置文件。这个文件是小程序的总控制中心，它决定了整个小程序的基础行为和外观表现。

1.1 全局配置文件的位置与作用

app.json 文件位于小程序项目的根目录，是整个小程序的起点。在小程序启动时，系统会首先读取这个文件来了解小程序的整体结构。

1.2 常用的全局配置项

全局配置主要包含以下四个核心部分：

配置项	作用说明
① pages	记录当前小程序所有页面的存放路径
② window	全局设置小程序窗口的外观
③ tabBar	设置小程序底部的 tabBar 效果
④ style	是否启用新版的组件样式

pages和style之前已经学习过了，今天我们重点学习其他两个。全局配置只可以配置导航栏和背景区域。

二、window 配置项详解

window 配置项用于全局设置小程序窗口的外观，包括状态栏、导航条、标题、窗口背景色等。

2.1 window 的配置结构

json

复制代码

{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "我的小程序",
    "backgroundColor": "#f5f5f5",
    "backgroundTextStyle": "light"
  }
}

2.2 window 常用属性说明

属性	类型	默认值	说明
`navigationBarBackgroundColor`	HexColor	#000000	导航栏背景颜色
`navigationBarTextStyle`	String	white	导航栏标题颜色，仅支持 black/white
`navigationBarTitleText`	String		导航栏标题文字内容，默认是"WeChat"
`backgroundColor`	HexColor	#ffffff	窗口的背景色
`backgroundTextStyle`	String	dark	下拉 loading 的样式，仅支持 dark/light
`enablePullDownRefresh`	Boolean	false	是否开启全局下拉刷新
`onReachBottomDistance`	Number	50	页面上拉触底事件触发时距页面底部距离

重要说明：

颜色值只支持16进制表示 ，如 #07c160
navigationBarTextStyle 和 backgroundTextStyle 只有两个可选值
onReachBottomDistance一般不改
下拉功能在模拟机上操作和真机上效果有一点不同，在真实的手机上下拉刷新后背景不会自动合上，所以不能完全相信模拟机。

三、tabBar 配置项详解

tabBar 用于配置小程序底部的 tab 栏效果，可以让用户在不同页面间快速切换。

3.1 tabBar 的基本结构

json

复制代码

{
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#ff6600",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      }
    ]
  }
}

3.2 tabBar 配置规则

重要规则：

tabBar中的页面路径 必须放在 pages 数组的开头位置
tabBar 配置放在和 pages 平级的位置

json

复制代码

{
  "pages": [
    "pages/home/home",      // tabBar页面必须在前
    "pages/category/category", // tabBar页面
    "pages/detail/detail"   // 普通页面
  ],
  "tabBar": {              // 和pages平级
    "list": [
      {
        "pagePath": "pages/home/home",      // 对应pages中的第一项
        "text": "首页"
      }
    ]
  }
}

3.3 tabBar 属性说明

属性	类型	默认值	说明
`color`	HexColor		tab 上的文字默认颜色
`selectedColor`	HexColor		tab 上的文字选中时的颜色
`backgroundColor`	HexColor		tab 的背景色
`borderStyle`	String	black	tabbar上边框的颜色，仅支持 black/white
`list`	Array		tab 的列表，最少2个、最多5个 tab
iconPath	String		未选中时图片的路径
selectedIconPath	String		选中时图片的路径

list 数组中的对象属性：

属性	类型	必填	说明
`pagePath`	String	是	页面路径，必须在 pages 中先定义
`text`	String	是	tab 上按钮文字
`iconPath`	String	否	图片路径，icon 大小限制为40kb
`selectedIconPath`	String	否	选中时的图片路径

四、全局样式与局部样式

4.1 全局样式（app.wxss）

在小程序根目录下的 app.wxss 文件中定义的样式为全局样式 ，作用于所有页面。

4.2 局部样式（页面的 .wxss 文件）

在页面的 .wxss 文件中定义的样式为局部样式 ，只作用于当前页面。

4.3 样式优先级规则

注意：

① 当局部样式和全局样式冲突时，根据就近原则 ，局部样式会覆盖全局样式。

② 当局部样式的权重大于或等于 全局样式的权重时，才会覆盖全局的样式。

4.4 样式引入

小程序支持使用 @import 语句导入外联样式表：

css

复制代码

/* 在当前 .wxss 文件中导入另一个样式文件 */
@import "common.wxss";

/* 使用相对路径导入 */
@import "../styles/theme.wxss";

五、实际配置示例

5.1 完整 app.json 示例

json

复制代码

{
  "pages": [
    "pages/home/home",
    "pages/category/category",
    "pages/cart/cart",
    "pages/user/user",
    "pages/detail/detail"
  ],
  "window": {
    "navigationBarBackgroundColor": "#07c160",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的商城",
    "backgroundColor": "#f5f5f5",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#999999",
    "selectedColor": "#ff6600",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "images/category.png",
        "selectedIconPath": "images/category-active.png"
      }
    ]
  },
  "style": "v2"

六、总结

小程序的页面 .json 配置文件是我们精细化控制每个页面外观和交互的有力工具。从设定导航栏的颜色和标题，到调整页面背景和启用下拉刷新，这些配置让每个页面都能拥有独特的个性。在实际开发中，我们需要牢记颜色必须使用16进制，真机测试必不可少，以及为TabBar页面正确安排路径顺序。