小程序 user agent stylesheet 覆盖了page下wxss背景色

**小程序 User Agent Style Sheet 覆盖了 Page 下 wxss 背景色**

在微信小程序开发中，我们经常会遇到一个问题：小程序的 User Agent Style Sheet 覆盖了 Page 下的 wxss 背景色。这是一个比较常见的问题，但是解决方法却不是那么明显。下面我们就来一步步分析这个问题，并给出解决方案。

**什么是 User Agent Style Sheet**

User Agent Style Sheet 是一种特殊的样式表，它由微信小程序系统提供，用于覆盖页面的样式。这种样式表通常会在用户打开小程序时被加载，而不是通过我们自己编写的 wxss 文件来加载。

**为什么 User Agent Style Sheet 覆盖了 Page 下 wxss 背景色**

当我们在 Page 中定义背景色时，例如 `background-color: #fff;`，但是微信小程序系统又定义了一种全局样式表覆盖了我们的背景色，这就是 User Agent Style Sheet 的作用。这种情况下，我们的背景色就被覆盖了。

**如何解决这个问题**

为了解决这个问题，我们可以通过以下几种方式：

###1. 使用 `page` 属性我们可以在小程序的 `app.json` 文件中添加一个 `page` 属性，例如：

json{
 "pages": [
 {
 "path": "index",
 "style": {
 "background-color": "#fff"
 }
 }
 ]
}

这样，我们就可以在 `index` 页面定义背景色了。

###2. 使用 `wxss` 文件覆盖 User Agent Style Sheet我们也可以通过编写一个 `wxss` 文件来覆盖 User Agent Style Sheet。例如：

csspage {
 background-color: #fff !important;
}

这样，我们就可以在 `index` 页面定义背景色了。

###3. 使用 `wxss` 文件覆盖 Page 下的 wxss 背景色我们也可以通过编写一个 `wxss` 文件来覆盖 Page 下的 wxss 背景色。例如：

csspage {
 background-color: #fff !important;
}

/* 覆盖 User Agent Style Sheet */
.page {
 background-color: transparent !important;
}

这样，我们就可以在 `index` 页面定义背景色了。

###4. 使用 `wxss` 文件覆盖 Page 下的 wxss 背景色和 User Agent Style Sheet我们也可以通过编写一个 `wxss` 文件来覆盖 Page 下的 wxss 背景色和 User Agent Style Sheet。例如：

csspage {
 background-color: #fff !important;
}

/* 覆盖 User Agent Style Sheet */
.page {
 background-color: transparent !important;
}

/* 覆盖 Page 下的 wxss 背景色 */
.index {
 background-color: #fff !important;
}

这样，我们就可以在 `index` 页面定义背景色了。

**总结**

小程序 User Agent Style Sheet 覆盖了 Page 下 wxss 背景色是一个比较常见的问题，但是解决方法却不是那么明显。通过上面的分析和示例代码，我们可以看到有多种方式来解决这个问题，例如使用 `page` 属性、编写一个 `wxss` 文件覆盖 User Agent Style Sheet、编写一个 `wxss` 文件覆盖 Page 下的 wxss 背景色等。

**参考**

* 微信小程序官方文档：[ />* 小程序 User Agent Style Sheet 覆盖了 Page 下 wxss 背景色的解决方案：[