1. 官网文档
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
2. 为什么要自定义组件
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
3. 使用场景
在我们实际开发过程中，列表无处不在，细心观察发发现一个问题，在很多页面中的列表一模一样，如果不自定义模版，我们会在每个页面重复写wxss样式和布局文件wxml，导致代码冗余。还有一个更为恼火的事情，如果有一天，UI设计跑来告诉你，列表样式需要改一改，这就需要去每个页面做修改。此时，心中就会有一万个…在奔腾。下图举例说明，在实际开发过程中，遇到的很多列表是一模一样的场景
4. 如何自定义组件？
- 一个自定义组件由
json wxml wxss js4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：
{
"component": true
}
- 在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与平时写其它页面的写法类似。
wxml结构
<!-- 这是自定义组件的内部WXML结构 -->
<view class="content-container">
<image class="avatar" src="{
{avatarUrl}}" mode="" />
<view class="right-box">
<text class="title">{
{
title}}</text>
<text class="author">{
{
author}}</text>
<text class="content">{
{
content}}</text>
</view>
</view>
wxss样式
/* 自定义组件样式 */
.content-container{
display: flex;
height: 220rpx;
margin: 20rpx;
overflow: hidden;
flex-direction: row;
}
.content-container .avatar{
width: 180rpx;
height: 100%;
}
.content-container .right-box{
display: flex;
margin-left: 20rpx;
flex-direction: column;
flex: 1;
}
.right-box .title{
font-size: 34rpx;
}
.right-box .author{
color: #666666;
margin-top: 10rpx;
font-size: 28rpx;
}
.right-box .content{
margin-top: 20rpx;
font-size: 28rpx;
color: #999999;
overflow: hidden;
text-overflow: ellipsis;
line-height: 50rpx;
max-height: 100rpx;
}
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
- 在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。
组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。
Component({
properties: {
// 这里定义了avatarUrl,title,author,content属性，属性值可以在组件使用时指定
avatarUrl: {
type: String,
value: "http://shi.cyhp.cn/d/file/p/ea7563a14e451c5df6334a2a2db968dd.jpg"
},
title: {
type: String,
value: "张进酒"
},
author: {
type: String,
value: "唐朝 ： 李白"
},
content: {
type: String,
value: "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。"
}
}
})
5. 如何使用自定义组件？
- 使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar",
"poetry-item": "/components/poetry-item/poetry-item"
}
}
哪个页面需要使用到自定义组件，就需要在哪个json中注册（
口诀：谁使用谁注册）
- 在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。
<block wx:for="{
{historyLists}}" wx:key="{
{item.history_id}}">
<view bind:tap="onItemClickHandle" data-item="{
{item.poetryInfo}}">
<poetry-item
avatarUrl="{
{item.poetryInfo.author_avatar}}"
title ="{
{item.poetryInfo.title}}"
author ="{
{item.poetryInfo.dynasty}} ： {
{item.poetryInfo.author}}"
content ="{
{item.poetryInfo.content}}"
>
</poetry-item>
</view>
</block>
6. 小技巧
在创建微信小程序项目时，微信内部在components下提供了一个navigation-bar自定义组件，所以我们就可以依葫芦画瓢，如下图所示
