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

缘由：
小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越复杂，单纯使用基础组件来进行开发也变得越来越不方便。
例如，较为复杂的小程序中常常会有一些通用的交互模块，比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到，逻辑也相对独立。然而，用传统的小程序开发方法来实现这样的模块是非常繁琐的。
自定义组件：
面对这个情况，小程序基础库提供了让开发者自己创建界面组件的特性，称之为“自定义组件”。通过这个特性，开发者就能够将这样的交互模块抽象成界面组件，使界面代码组织变得非常灵活。
版本要求：
从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。
注意：自定义组件在使用时与基础组件非常相似。
构成部分，每个自定义组件由四个代码文件组成：
①json文件用于于放置一些最基本的组件配置
②wxml 文件组件模版
③wxss 文件组件的样式，只在组件内部节点上生效（这个文件是可选的）④js 文件组件的 JS 代码，承载组件的主要逻辑
这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。接下来介绍如何利用这四个文件编写一个简单的自定义组件。
自定义组件 1.文件夹位置
首先要确定文件位置，官方并没有明确规定自定义组件的文件放在哪里，但是为了自己或团队的方便，建议大家在根目录下创建一个components目录，用来存放所有自定义组件。

文章图片

2.创建组文件
在components文件夹下新建myComponent组文件，用来盛放自定义组件，如下所示

文章图片

3.组件配置
类似于页面，一个自定义组件由 json 、wxml 、wxss 、js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true ，即可将该组文件设为自定义组件）
配置json文件

文章图片

4.组件模板
在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。
组件模板的写法与页面模板相同，这个模版将在组件中渲染出一个 checkbox 和一个 label

{{title}}

5.组件样式
类似于页面， wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是，样式只能通过类选择器（如 .the-class-name ）来指定。
注意：
①组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
6.组件定义
组件的 JS 文件中必须包含组件定义。定义时使用 Component 构造器：

Component({ properties:{ title:String }, data:{}, methods:{ labelTap(){ console.log('您点击了按钮') } } })

【微信小程序|微信小程序（组件---自定义组件）】Component 构造器包含3个定义段：
①properties 中声明这个组件的属性，上例中声明了 title 属性，这样，组件外部在使用组件时就可以指定这个属性的值；
②data 是组件的内部数据，可以用 this.setData 方法来改变；
③methods 中的方法可以用来包含组件的事件回调函数。
7.组件样式
注意：
②组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
③继承样式，如 font 、 color ，会从组件外继承到组件内。
④除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）

.componentArea{ color:red; background: green; font-size: 60rpx; }

8.调用自定义组件
案例：我的页面调用引入自定义组件

文章图片

9.调用自定义组件
Step 1步骤一：
在需要使用这个组件的页面所对应的 json 文件中，添加自定义组件声明。
例如在个人认证页面调用引入自定义组件

文章图片

Step 2步骤二：
在页面对应的 wxml 文件中使用即可

文章图片

文章图片

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