在现在前端领域，最常见的话语就是组件化、工程化的内容。所有的框架都在朝着这方面发展。作为前端生态中的新兴热人物小程序的出现，同样支持组件化开发。
在我们的日常开发中，可以封装一些常用的组件达到复用效果，可以大大提高我们的工作效率。今天我们学习一下如何在微信小程序中封装自己的组件。
首先我们在app.json中新建一个页面，组件自己的结构和普通页面的机构是一样的，同样由.js、.json、.wxml、wxss组成，所以我们像注册一个普通页面一样注册它。
我们来试着封装一个一键返回顶部的按钮。
首先进去页面的json文件，把component属性设置为true。
{
"component":true
}
wxml代码如下：
<view class="inner" bindtap="scrollTop">
{
{btnFont}}
</view>
wxss代码如下：
page {
height: 2000rpx;
}
.inner {
width: 160rpx;
height: 160rpx;
line-height: 160rpx;
border-radius: 50%;
background-color: rgb(45, 150, 233);
text-align: center;
font-weight: bold;
position: fixed;
right: 40rpx;
bottom: 40rpx;
}
wxml和wxss的代码和普通页面的格式一模一样。
js内容如下：
Component({
properties: {
btnFont: {
type: String,
value: 'default value'
}
},
data: {
someData:{
}
},
methods: {
scrollTop() {
if(wx.pageScrollTo) {
wx.pageScrollTo({
scrollTop:0
})
}else {
wx.showModal({
title:'提示',
content:'当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试！'
})
}
}
},
lifetimes: {
},
})
我们来看一下它和普通页面的js结构上有什么区别？
普通的页面的js文件中是由Page({})涵盖的，而组件的js文件是由Component({})涵盖的。对象中的内容也略有不同。
Component对象中的全部属性如下：
| 定义段 | 类型 | 是否必填 | 描述 | 最低版本 |
|---|---|---|---|---|
| properties | Object Map | 否 | 组件的对外属性，是属性名到属性设置的映射表 | |
| data | Object | 否 | 组件的内部数据，和properties一同用于组件的模板渲染 |
|
| observers | Object | 否 | 组件数据字段监听器，用于监听properties和data的变化 |
2.6.1 |
| methods | Object | 否 | 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用 | |
| behaviors | String Array | 否 | 类似于mixins和traits的组件间代码复用机制 | |
| created | Function | 否 | 组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 setData |
|
| attached | Function | 否 | 组件生命周期函数-在组件实例进入页面节点树时执行 | |
| ready | Function | 否 | 组件生命周期函数-在组件布局完成后执行 | |
| moved | Function | 否 | 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行 | |
| detached | Function | 否 | 组件生命周期函数-在组件实例被从页面节点树移除时执行 | |
| relations | Object | 否 | 组件间关系定义 | |
| externalClasses | String Array | 否 | 组件接受的外部样式类 | |
| options | Object Map | 否 | 一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举） | |
| lifetimes | Object | 否 | 组件生命周期声明对象 | |
| pageLifetimes | Object | 否 | 组件所在页面的生命周期声明对象 | |
| definitionFilter | Function | 否 | 定义段过滤器，用于自定义组件扩展 |
Component对象的属性有很多，最常用的就是properties，data，methods,lifetimes
其实properties，如果你学习过Vue的话，这个东西的作用和props是一模一样的，我们可以在这里设置组件属性的格式。比如我们这个按钮，我想让按钮的文字动态显示，在页面中使用的时候动态设置，所以我们在wxml中用{
{}}设置内容为btnFont，在js的properties中设置它的接收格式和默认值。
因为这个按钮的功能是返回顶部，所以我们在组件封装的时候就可以把事件绑定上，在scrollTop方法中，我们写入了返回顶部的代码。
到这里，我们就可以完成了一个组件的封装。
接下来就是引入了，首先我们要先进入引入页面的json文件中
{
"usingComponents": {
"ScrollTop":"../testDemo/testDemo"
}
}
usingComponents属性就是用来挂载组件的，属性的key就是组件的名字，value就是组件的路径
然后直接去wxml中使用即可。
<ScrollTop btnFont="返回顶部" style="display:{
{
isHidden}}"></ScrollTop>
有部分js内容需要在使用页面中写，比如监听当前窗口距离顶部的高度。
data: {
isHidden:'none'
},
onPageScroll(e) {
console.log(e);
if(e.scrollTop !== 0) {
this.setData({
isHidden:'block'
})
}else {
this.setData({
isHidden:'none'
})
}
},
这样我们就完成了封装自己的组件并且应用到实际场景中的内容。
有任何问题都可以联系我哦！
QQ:505417246
微信:18331092918
微信公众号:Code程序人生
个人博客:https://Creator12333.github.io
