从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程
为什么写组件呢？
主要是避免在不同的页面中重复使用，也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。
自定义组件在使用时与基础组件非常相似。
如何编写一个自定义组件？
每个自定义组件由四个代码文件组成：
json文件 用于于放置一些最基本的组件配置
wxml 文件 组件模版
wxss 文件 组件的样式，只在组件内部节点上生效
js 文件 组件的 JS 代码，承载组件的主要逻辑
这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。
1、组件配置
json 配置文件信息
这里我们把文件放置在小程序的 components目录下 命名为 emptyPage。
命名为 emptyPage.json 。
{
"component": true,
"usingComponents": {}
}2、组件模板
在同一目录下，创建一个模版文件 emptyPage.wxml
<view class='emptyPage-view' wx:if='{{isShow}}'>
<image class='emptyPage-image' src='../../images/wuneirong.png'></image>
<view class='emptyPage-text'>这里什么也没有哦！</view>
</view>3、组件样式
在同一目录下，创建一个模版文件 emptyPage.wxss
.emptyPage-view{
width: 100%;
height: 100%;
background-color: white;
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
}
.emptyPage-image{
margin-top: 266rpx;
width: 360rpx;
height: 188rpx;
}
.emptyPage-text{
margin-top: 28rpx;
font-family: PingFangSC-Regular;
font-size: 28rpx;
color: #C6C6C6;
text-align: center
}4、组件定义
组件的 JS 文件中必须包含组件定义。定义时使用 Component 构造器：
Component({
/**
* 组件的属性列表
*/
properties: {
isShow: Boolean,//是否显示
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
}
})简单的 Component 构造器调用包含3个定义段：
methods 中的方法可以用来包含组件的事件回调函数；
data 是组件的内部数据，可以用 this.setData 方法来改变；
properties 中声明这个组件的属性，上例中声明了 isShow 属性，这样，组件外部在使用组件时就可以指定这个属性的值。
这样我们就编写好了 emptyPage 这个组件。
如何使用自定义组件呢？
使用上面这个自定义组件的方法很简单。
1、声明组件
在需要使用这个组件的页面所对应的 json 文件中，添加下面的自定义组件声明：
{
"usingComponents": {
"emptyPage": "/components/emptyPage/emptyPage"
}
}2、使用组件
在页面对应的wxml文件中使用 是否显示该界面
<emptyPage isShow='{{true}}' />除了上述的基本功能外，自定义组件还提供了一组基础接口，用来实现各种各样的功能。
这里只是写一个简单的小组件， 如果想学习更多最好到官网查看更加详细信息