微信小程序自定义组件——手写radio

问题描述

微信小程序某些组件暴露的修改特性的接口不够，有些时候需要进行自定义

文档内容

相关的api文档在这里
看一下实例代码：

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
      }
    },
    lastLeaf: {
      // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

手写实现一个radio

由于而本次需求中对radio的选中样式做了要求（包括选中样式，选中前样式等），原生的radio组件就无法满足此次的开发需求，看下自定义radio的实现：
新建component文件夹：
radio.wxml

<view class="bg" catchtap="checkRadio">
  <image wx:if="{{checked}}" class="checked" src="{{cdn}}selected@2x.png"></image>
</view>

radio.wxss

/* components/radio/radio.wxss */
.bg {
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid #343664;
  border-radius: 50%;
  display: inline-block;
  vertical-align: bottom;
}
.checked {
  width: 36rpx;
  height: 36rpx;
}

radio.js

// components/radio/radio.js
import { CDN_URL } from '../../config';
Component({

  properties: {
    checked: {
      type: Boolean,
      value: true,
      observer: function(newVal, oldVal) {
        oldVal = newVal
        this.setData({checked: oldVal})
      }
    },
  },

  /**
   * 页面的初始数据
   */
  data: {
    cdn: CDN_URL,
    checked: false
  },

  methods: {
    checkRadio: function() {
      var value = {}
      value.checked = !this.data.checked
      this.triggerEvent('check', value)
    },
  }
})

这样就完成了基础的radio组件，那么如何使用呢？

radio引入

在需要使用页面的json文件中进行如下配置：

{
  "usingComponents": {
    "radio": "/components/radio/radio",
  }
}

看下在wxml的使用：

 <radio checked="{{formData.sendnotice}}" bind:check="check5"/>

添加check5的定义：

  check5: function (e) {
    this.setData({
      'formData.sendnotice': e.detail.checked ? 1 : 0
    })
  },

这样就完成了一个基础的radio组件的定义和使用，我们也可以在properties中为radio添加更多的属性，以方便radio的初始化工作。