38.微信小程序（组件--自定义组件）

不念不忘少年蓝@ 2022-11-25 00:35 320阅读 0赞

## 微信小程序（组件–自定义组件） ##

### 前言 ###

缘由：  
小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越复杂，单纯使用基础组件来进行开发也变得越来越不方便。

例如，较为复杂的小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。

自定义组件：  
面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。

版本要求：  
从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。  
注意：自定义组件在使用时与基础组件非常相似

构成部分，每个自定义组件由四个代码文件组成：  
①json文件 用于于放置一些最基本的组件配置  
②wxml 文件 组件模版  
③wxss 文件 组件的样式，只在组件内部节点上生效（这个文件是可选的）④js 文件 组件的 JS 代码，承载组件的主要逻辑

这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。接下来介绍如何利用这四个文件编写一个简单的自定义组件。

#### （1）文件夹位置 ####

首先要确定文件位置，官方并没有明确规定自定义组件的文件放在哪里，但是为了自己或团队的方便，建议大家在根目录下创建一个components目录，用来存放所有自定义组件。  
![在这里插入图片描述][20200806174424224.png]

#### （2）创建组文件 ####

在components文件夹下新建myComponent组文件，用来盛放自定义组件，如下所示![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

#### （3）组件配置 ####

类似于页面，一个自定义组件由 json 、wxml 、wxss 、js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true ，即可将该组文件设为自定义组件）  
配置json文件  
![在这里插入图片描述][20200806174452628.png]

#### （4）组件模板 ####

在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。  
组件模板的写法与页面模板相同，这个模版将在组件中渲染出一个 checkbox 和一个 label  
![在这里插入图片描述][20200806174502847.png]

#### （5）组件样式 ####

类似于页面， wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是，样式只能通过类选择器（如 .the-class-name ）来指定。

注意：  
①组件和引用组件的页面不能使用id选择器（\#a）、属性选择器（\[a\]）和标签名选择器，请改用class选择器。  
②组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。  
③继承样式，如 font 、 color ，会从组件外继承到组件内。  
④除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）  
![在这里插入图片描述][20200806174522772.png]

#### （6）组件定义 ####

组件的 JS 文件中必须包含组件定义。定义时使用 Component 构造器：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

#### （7）调用自定义组件 ####

案例：个人认证页面调用引入自定义组件（pages/myself/check）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]  
Step 1步骤一：  
在需要使用这个组件的页面所对应的 json 文件中，添加自定义组件声明。  
例如在个人认证页面调用引入自定义组件![在这里插入图片描述][20200806174600491.png]  
Step 2步骤二：  
在页面对应的 wxml 文件中使用即可![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

## 总结 ##

本节主要介绍了自定义组件的创建及调用  
①创建文件夹，确定自定义组文件所在文件夹位置  
②创建自定义组件的组文件  
③json组件配置，开启组件属性，即将 component 字段设为 true  
④wxml组件模板编写  
⑤wxss组件样式编写  
⑥组件定义，使用 Component 构造器（properties 属性列表、data 数据、methods 方法）  
⑦调用自定义组件（①json添加自定义组件声明；②wxml模板文件调用）

## 如有问题或者疑问请留言联系小编！！！！ ##

## 感谢来访！！！ ##

[20200806174424224.png]: /images/20221124/f94c9da53e6a49f8bbde2a1f3fbe00ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20221124/5c444e7fd92a42b89d3a1c4cc7995d46.png
[20200806174452628.png]: /images/20221124/44fab61325ad4d38b6d85606bf3e7884.png
[20200806174502847.png]: /images/20221124/b3a51c8dcdb94f7bb88102f4f800a6ad.png
[20200806174522772.png]: /images/20221124/296f02cb052b41f0ab8e48eb6f260d84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20221124/706183bee95d45b6b5a0aa0f3fa79afe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20221124/7bba8ac7e3094881be78fd617ba34511.png
[20200806174600491.png]: /images/20221124/6153de3cddad43889ea1fb8d3d8107e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20221124/7e70118273c748769d573677f0bf0732.png