开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

自定义组件：可复用的 WXML、WXSS、JS、JSON。
behavior：可复用的组件 JS（属性、数据、生命周期函数和方法等）。
wxs：可复用的普通 JS。
template 模板：可复用的 WXML。

创建自定义组件：

自定义组件类似于页面，也是由 json、wxml、wxss、js 4个文件组成。

在 json 文件中进行自定义组件声明：将 component 字段设为 true 可将这一组文件设为自定义组件。
```
/* custom-component.j'son */
{"component": true
}
```

在 wxml 文件中编写组件模板；在 wxss 文件中加入组件样式；在 js 文件中使用 Component() 来注册组件。

<!-- custom-component.wxml -->
<view class="container">{{text}}
</view>/* custom-component.wxss */
.container {color: #FF4A2F;
}// custom-component.js
Component({data: {text: 'Hello World',},
})

使用自定义组件：

在使用自定义组件的页面的 json 文件中进行引用声明：需要提供自定义组件的标签名和对应的文件路径。

自定义组件也可以引用自定义组件，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
```
/* index.j'son */
{"usingComponents": {// 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符"custom-component": "components/custom-component/custom-component"}
}
```
在使用自定义组件的页面的 wxml 中就可以像使用基础组件一样使用自定义组件：节点名即自定义组件的标签名，节点属性即传递给自定义组件的属性。
```

<custom-component></custom-component>
```

抽象节点：

有时，自定义组件中的一些节点，其对应的自定义组件不是由自定义组件本身确定的，而是自定义组件的调用者确定的。这时可以把这个节点声明为“抽象节点”。

在自定义组件中使用抽象节点：

// 实现一个选框组 selectable-group组件，它其中可以放置单选框 custom-radio 或者复选框 custom-checkbox
<!-- selectable-group.wxml -->
<view wx:for="{{labels}}"><label><selectable disabled="{{false}}"></selectable>{{item}}</label>
</view>

selectable 不是任何在 json 文件的 usingComponents 字段中声明的组件，而是一个抽象节点，它需要在 componentGenerics 字段中声明。

{"componentGenerics": {"selectable": true}
}

在页面中使用包含抽象节点的自定义组件：

节点的 generic 引用 generic:xxx=“yyy” 中，值 yyy 只能是静态值，不能包含数据绑定。因而抽象节点特性并不适用于动态决定节点名的场景。
```
// 在使用 selectable-group 组件时，必须指定“selectable”具体是哪个组件
<selectable-group generic:selectable="custom-radio" />
```
```
{"usingComponents": {"custom-radio": "path/to/custom/radio",}
}
```

抽象节点的默认组件：

抽象节点可以指定一个默认组件，当具体组件未被指定时，将创建默认组件的实例。默认组件可以在 componentGenerics 字段中指定。

{"componentGenerics": {"selectable": {"default": "path/to/default/component"}}
}

第三方自定义组件：

开发第三方自定义组件：

使用官方提供的命令行工具初始化项目。

执行 npm install -g @wechat-miniprogram/miniprogram-cli 命令安装命令行工具。
新建一个空目录作为项目根目录，在此根目录下执行 miniprogram init --type custom-component。
命令执行完毕后会发现项目根目录下生成了许多文件，这是根据官方的项目模板生成的完整项目，之后开发者可直接在此之上进行开发修改。

《九》微信小程序中的自定义组件相关推荐

手把手教你实现小程序中的自定义组件
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于 ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
微信小程序怎么修改自定义组件中的样式
在微信小程序中我们经常要用到自定义组件,但是有时我们因为引用的地方不同可能组件的一些样式也要修改,比如颜色,高度,宽度等来适合不同的页面,有没有办法来修改自定义组件中的样式呢,很显然是有的,我们要用到 ...
五分钟学会在微信小程序中使用 vantUI 组件库
前言我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步.但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库.而 vant ...
微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
文章目录一.自定义组件 1.创建组件 2.引用组件 3.组件和页面区别 4.组件样式 5.data.methods.properties 6.小程序的 data 和 properties 区别 7. ...
入门微信小程序三（自定义组件）
1.组件的创建 ① 在项目的根目录中,鼠标右键,创建 components -> test 文件夹 ② 在新建的 components -> test 文件夹上,鼠标右键,点击" ...
微信小程序开发：自定义组件-behaviors
1.什么是behaviors behaviors是小程序中,用于实现组件间代码共享的特性,类似于vue的"mixins". 2.behaviors的工作方式每个behavior可 ...
微信小程序中使用video组件
文章目录前情提要搭建视频服务器小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js ...

《九》微信小程序中的自定义组件