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

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

首先我们在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内容如下：

我们来看一下它和普通页面的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
      })
    }
  },

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