微信小程序——自定义组件

前因

最近在做公司的小程序项目，发现设计上有很多不统一，代码上有很多冗余。所以我打算深入一下小程序的组件式开发，以便可以让项目在设计上的整体统一，代码上可以做到小功能做成组件，提高复用性和可维护性。

举一个弹窗的例子，小程序自带了很多弹窗了，比如：

这样的

还有组件picker 的滚动选择弹窗。

如果是做一个简单小程序，这些已经够用了，但是如果小程序做大了，这些就远远满足不了了。

这就需要根据项目的风格做定制化的小部件啦。

而我们公司目前的问题在于，由于有多个设计共同参与设计，导致不同的界面在很基础的小部件都有不同的设计模样，这就导致代码也是一样的，东一种弹窗样式，西一种弹窗样式。这对我这种有点代码洁癖的人是难易容忍的。

创建自定义组件

这时候就需要运用小程序提供的自定义组件做功能小部件的封装了。

小程序针对自定义组件在文档上讲的很清楚的，小程序文档传送门：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

我就讲讲自己在公司做的一点小小努力。

以这个底部弹出窗做个案例。

首先要新建一个bottom_pupop的文件夹，里面包含WXML、WXSS、JS、JSON四个文件

其中JSON文件需要声明自己为自定义组件，比如：

{
  "component": true
}

然后WXML和WXSS就像普通页面一样写，需要注意的是，不管是组件本身还是引用组件的页面(包括app.wxss)，只用class选择器就不会出问题，用别的选择器很可能出现样式覆盖。比如：

<view class='bottom_pupop_mask' hidden='{{!isShow}}' bindtap='close'>
  <view class='bottom_pupop'>
    <!-- slot标签接受外部页面使用组件时所包含的代码 -->
    <slot></slot>
    <view class='bottom_pupop_close' bindtap='close'>取消</view>
  </view>
</view>


.bottom_pupop_mask{
  width: 100vw;
  height: 100vh;
  background-color: rgba(5, 0, 1, 0.5);
  position: fixed;
  top: 0;
  left: 0;
}
.bottom_pupop{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  animation: bottom_form linear .6s;
}
@keyframes bottom_form{
  0%{
    bottom: -100%;
  }
}
.bottom_pupop>view{
  width: 100%;
	height: 100rpx;
	line-height: 100rpx;
	background-color: #ffffff;
  font-size: 30rpx;
  color: #2b2b2b;
  text-align: center;
  border-top: 1rpx solid #e8e8e8;
  white-space: nowrap;
}
.bottom_pupop_close{
  margin: 10rpx 0 1rpx;
}

还有JS需要写Componen()来声明组件，比如：


Component({

  behaviors: [],

  properties: {
    isShow: {         // 属性名
      type: Boolean,  // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: true,    // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function (newVal, oldVal) { } // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
    },
  },
  data: { }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    // 关闭整个组件
    close: function () {
      this.setData({
        isShow: false,
      });
    },
  }
})

到这里就将组件的基本框架搞完了，这个组件很简单，一个接受参数isShow，一个自定义方法close()，还有一个<slot></slot>标签

使用自定义组件

然后就要在项目上使用了

首先要在要用的页面的JSON文件引入组件，比如：

{
  "navigationBarTitleText": "红包记录",
  "usingComponents": {
    "bottom_pupop": "/pages/common/bottom_pupop/bottom_pupop"
  },
}

然后就可以在WXML使用了，比如：

<bottom_pupop isShow='{{isShow_bottom_pupop}}'>
  <!-- 通过slot标签传入组件内 -->
  <view bindtap='text'>收到的红包</view>
  <view>发出的红包</view>
</bottom_pupop>

只要将isShow_bottom_pupop改为true就能将弹窗显示出来。

就这样，我做出来了这个简易小部件。

我可以在每个页面用这个组件，组件有自己的自有方法close(关闭自身)，可以接受外部参数isShow(显示自身)，每个使用的页面可以传入不同的模板和事件，相当的自由。

很高心可以在这里宣布，我的自定义组件技能已点亮√