【小程序】自定义组件样式

你的名字 2024-03-30 12:03 14阅读 0赞

**目录**

组件的创建与引用

1. 创建组件

2. 引用组件

3. 局部引用组件

4. 全局引用组件

编辑 5. 全局引用 VS 局部引用

6. 组件和页面的区别

样式

1. 组件样式隔离

2. 组件样式隔离的注意点

3. 修改组件的样式隔离选项

4. styleIsolation 的可选值

## 组件的创建与引用 ##

### 1. 创建组件 ###

在项目的根目录中，鼠标右键，创建 components -> test 文件夹

在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”

键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和

.wxss 注意：

为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中，例如：

![3ed1fef961a74fde8c38daf0189b3b1a.png][]

### 2. 引用组件 ###

组件的引用方式分为“局部引用”和“全局引用”，顾名思义：

局部引用：组件只能在当前被引用的页面内使用

全局引用：组件可以在每个小程序页面中使用

### 3. 局部引用组件 ###

在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：

![0f039d9ad0094a82ad262a97a772b300.png][]

### 4. 全局引用组件 ###

在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下：

### ![833b45b645314e908b55a70590e3bf3d.png][] 5. 全局引用 VS 局部引用 ###

根据组件的使用频率和范围，来选择合适的引用方式：

如果某组件在多个页面中经常被用到，建议进行“全局引用”

如果某组件只在特定的页面中被用到，建议进行“局部引用”

### 6. 组件和页面的区别 ###

从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页

面的 .js 与 .json 文件有明显的不同：

组件的 .json 文件中需要声明 "component": true 属性

组件的 .js 文件中调用的是 Component() 函数

组件的事件处理函数需要定义到 methods 节点中

## 样式 ##

### 1. 组件样式隔离 ###

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构，如图所示：

组件 A 的样式不会影响组件 C 的样式

组件 A 的样式不会影响小程序页面的样式

小程序页面的样式不会影响组件 A 和 C 的样式

好处：

防止外界的样式影响组件内部的样式

防止组件的样式破坏外界的样式

![9bb48077eac441ed9ebcf35e2fb3da60.png][]

### 2. 组件样式隔离的注意点 ###

app.wxss 中的全局样式对组件无效

只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

### 3. 修改组件的样式隔离选项 ###

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希

望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用

法如下：

![6fdd6819efcc48df8ca687f01876530c.png][]

### 4. styleIsolation 的可选值 ###

![21549b3e8d3c4eb1841840ecb54d5352.png][]

[3ed1fef961a74fde8c38daf0189b3b1a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0f5cd66fbba34aa49f535c98dca22fbb.png
[0f039d9ad0094a82ad262a97a772b300.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/68fc2e2cc679449bbb03616d0fb179d7.png
[833b45b645314e908b55a70590e3bf3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1293cd0238504b60ae6af876e784f0ec.png
[9bb48077eac441ed9ebcf35e2fb3da60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b7cf8f7d0762443d881433864a2d9689.png
[6fdd6819efcc48df8ca687f01876530c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/563c9765281a4540acc4fec743973a30.png
[21549b3e8d3c4eb1841840ecb54d5352.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/66ca7dd696b749a6a784296a053e264d.png