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

标签: 微信小程序  组件式开发

前因

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

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

这样的     

这样的 

还有组件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(显示自身),每个使用的页面可以传入不同的模板和事件,相当的自由。

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

版权声明:本文为weixin_42556039原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42556039/article/details/80825035