微信小程序如何封装自己的组件？

在现在前端领域，最常见的话语就是组件化、工程化的内容。所有的框架都在朝着这方面发展。作为前端生态中的新兴热人物小程序的出现，同样支持组件化开发。

在我们的日常开发中，可以封装一些常用的组件达到复用效果，可以大大提高我们的工作效率。今天我们学习一下如何在微信小程序中封装自己的组件。

首先我们在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'
      })
    }
  },

这样我们就完成了封装自己的组件并且应用到实际场景中的内容。