微信小程序之自定义表单组件(radio)

背景：

最近在做项目的时候遇到一个问题，那就是微信的官方表单组件的可扩展性不强，无法达到设计稿所要求的效果，所以想到了用自定义组件的方法自定义一个表单组件。

（自定义组件其实往往用在需要复用的地方，比如每个页面都有一样的头部和底部，那么我们就可以把它们封装到自定义组件中，这样就不用每个页面都复制粘贴一样的一堆代码了）

开始：

下面以自定义radio组件为例：

官方radio的样式只能修改color(当然要修改其他样式也是有办法的，不过较为麻烦，这里先不提)，扩展性不强。

而我想要达到类似于button样式的效果↓

那么就需要自定义一个radio出来了。

第一步：

首先在该目录下新建一个components 文件夹(当然文件夹命名也可以取其他，不过命名为components方便辨认)

再在components里新建一个文件夹用于放自己的自定义组件，这里我统一命名为myradio

鼠标移到myradio处右键选择"新建 Component"，接着自动生成如下四个文件

第二步：

分别在myradio.wxml、myradio.wxss和myradio.js中写入以下代码↓

myradio.wxml：

//class里是选中与未选中的样式，point是鼠标的点击事件名，data-index是在point这个鼠标点击事件的返回值data中传入名为index的值
<view class="radio">
    <view class="{{currentIndex==1?'item_active':'item'}}" bindtap="point" data-index="1">男</view>
    <view class="{{currentIndex==0?'item_active':'item'}}" bindtap="point" data-index="0">女</view>
</view>

 myradio.wxss：

注意自定义组件中的wxss的选择器最好写类选择器，否则会警告、甚至出现意料之外的副作用。

//盒子使用弹性布局（给父盒子添加display:flex）
.radio{
   width: 580rpx;
   height: 80rpx;
   display: flex;
   justify-content: center;
}
.item{
    width: 200rpx;
    height: 80rpx;
    border-radius: 20rpx;
    margin: 0 30rpx;
    background-color:lightgrey;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item_active{
    width: 200rpx;
    height: 80rpx;
    border-radius: 20rpx;
    margin: 0 30rpx;
    background-color:#503E9D;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

myradio.js：

Component({
    // 使自定义组件有类似于表单控件的行为
    behaviors: ['wx://form-field'],
    /**
     * 组件的属性列表
     */
    properties: {
        value:{//这里的属性名之所以取名value是因为表单控件有name和value属性
            type:String,
            value:"1"
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        currentIndex:1
    },

    /**
     * 组件的方法列表
     */
    methods: {
        point(e){
            const {index}=e.currentTarget.dataset;
            if(index==1){
                this.setData({//properties和data里的值都可用setData设置
                    value:"1",//1表示男
                    currentIndex:1
                })
            }
            else{
                this.setData({
                    value:"2",//2表示女
                    currentIndex:0
                })
            }
        }
    }
})

第三步：

在要引入该自定义组件的页面的json文件中写上↓

{
    "usingComponents": {
        "myradio":"/components/myradio/myradio"//这里我把该组件的标签也命名为myradio
    }
}

 然后在要引入的页面的wxml文件中用myradio标签引入即可，比如↓

<view>//这里包裹该自定义组件的大盒子样式未给出，可以根据自身需求写样式
   <text>性别</text>
   <myradio name="gender" value="1"></myradio>//myradio标签
</view>

最终效果举例：（这样就做好啦！）