href="https://www.cnblogs.com/ljbguanli/p/19621989"

title="发布于

aria-level="2">微信小应用页面配置详解

id="content_views">

在前面的学习中，我们已经了解了小程序的基本结构和组件使用。

今天，我们将系统学习页面的配置。

小程序的配置分为全局配置（app.json）和页面配置（页面的.json文件）。

全局配置为整个小程序设定基础规则，而页面配置则允许我们为每个独立页面进行个性化定制。

理解这两者的关系和区别，是掌握小程序开发的重要一步。

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

小程序根，是整个小程序的起点。

在小程序启动时，系统会首先读取这个文件来了解小程序的整体结构。

1.2

常用的全局配置项

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

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

pages和style之前已经学习过了，今天我们重点学习其他两个。

全局配置只可以配置导航栏和背景区域。

alt=""

src="https://i-blog.csdnimg.cn/direct/d7c491ff7924417b9d5437383f6e8682.png"

配置项详解

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

2.1

window

{"navigationBarBackgroundColor":

"#ffffff","navigationBarTextStyle":

"black","navigationBarTitleText":

"#f5f5f5","backgroundTextStyle":

"light"}

常用属性说明

重要说明：

• 颜色值只支持16进制表示，如 #07c160

• navigationBarTextStyle 和 backgroundTextStyle 只有两个可选值

• onReachBottomDistance一般不改

• style="margin-left:

  0">下拉功能在模拟机上操作和真机上效果有一点不同，在真实的手机上下拉刷新后背景不会自动合上，所以不能完全相信模拟机。

三、tabBar

配置项详解

tabBar 用于配置小程序底部的

tab

栏效果，可以让用户在不同页面间快速切换。

3.1

tabBar

"images/home.png","selectedIconPath":

}

配置规则

重要规则：

• tabBar中的页面路径必须放在 pages 数组的开头位置

• tabBar 配置放在和 pages平级的位置

json

tabBar页面必须在前"pages/category/category",

和pages平级"list":

属性说明

list

数组中的对象属性：

四、全局样式与局部样式

4.1

全局样式（app.wxss）

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

4.2

.wxss

文件）

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

4.3

样式优先级规则

注意：

①

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

②

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