小程序自定义组件

前言

在第一次的小程序项目中，遇到了使用原生组件比较难解决的问题，

所以自己动手构建了一个自定义组件，也可以方便当做模板在各个页面中使用。

这里记录的是自己做自定义组件时的过程，仅供参考。

步骤

自定义组件分为以下几步：

通过wxml，组合理想的组件原型

通过js，定义组件存在的属性和函数

通过json，声明是组件

通过wxss，定义样式（可忽略）

案例

在这里，我是使用 <picker> 和 <image> 组合一个带有图片的下拉框组件。

样子如下：

自定义组件.png

样式是丑了点但问题不大，其中目录列表如下

目录.png

1.定义wxml，构建理想的组件

<!-- 组件模板 -->
<view class='custom-picker-component'>
  <picker class='custom-picker' range='{{range}}' range-key='{{key}}' bindchange='_change'>
    <slot></slot>
  </picker>

  <image src='{{src}}' class='custom-picker-image' bindtap='_tap' />
</view>

很简单一个view，包含<picker>和<image>，picker中包含一个<slot>
作用是作为一个占位符组件，在使用自定义控件的时候就可以在内部添加一个子组件，该子组件位置就是<slot>的位置

2.编写js，声明函数和属性

每个组件都有自己的函数和变量，自定义组件也不例外，可以事先设置一些属性或函数提供给外界使用。

Component({

  /**
   * 让组件拥有表单属性
   */
  behaviors: ['wx://form-field'],

  /**
   * 组件的属性列表
   */
  properties: {
    range: {
      type: Array
    },
    key: {
      type: String
    },
    src: {
      type: String,
      value: "../images/img_drop.png"
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    range: [],
  },

  /**
   * 组件的方法列表
   */
  methods: {
     //我是image的事件
     _tap(e) {
      //为组件提供函数，函数名为tap
      this.triggerEvent('tap')
    },
    //我是picker的事件
    _change(e) {
      //为组件提供函数，函数名为change，并且函数还提供参数value
      this.triggerEvent('change', {
        value: e.detail.value
      });
      //为表单提供value
      this.setData({
        value: e.detail.value
      })
    }
  },
})

主要分三块：

properties：定义属性

格式：属性名:{
type:属性类型
value:默认值(可不填)
}

data：初始数据

method：定义方法

其中上述的属性：range，key，src；方法：_tap，_change都对应wxml定义的属性和事件。
this.triggerEvent('xxx')，为提供给外界的函数，xxx就是函数名，调用时为bindxxx，
behaviors: ['wx://form-field']：作用是让该控件具备表单功能，可以使用name，最后 _change 的setData，则给表单提供value，所以这里是在提交表单数据后，给我提供一个picker的索引值。

3.在json中声明为组件

{
  "component": true,
  "usingComponents": {}
}

使用

使用前，需要在使用的页面对应的json声明要使用该组件

{
  "usingComponents": {
    "custom-picker": "../../custom/custom-picker"
  }
}

在wxml引入组件

<custom-picker src='../images/img_drop.png' range="{{list}}" key="name" bindtap='customTap' bindchange='customChange'>
  <text>{{value?value:'请选择'}}</text>
</custom-picker>

属性：src，range，key，函数：tap，change，都为自定义组件提供的，<text>代替了原先的<slot>

最后是js

Page({
  data: {
    value: '',
    list: [{
      name: 'a'
    }, {
      name: 'b'
    }]
  },
  customTap: function() {
    console.log("我是自定义控件的图片点击事件")
  },
  customChange: function(e) {
    console.log("我是自定义控件的picker变更的事件")
    console.log("参数e是自定义组件_change方法提供给我的")
    console.log("不提供的话e.detail的值为undefined")
    console.log(e)
  }
})