微信小程序之自定义表单组件(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>

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