現(xiàn)在的微信小程序是火的不要要的，很多公司都開始做微信小程序的產(chǎn)品項(xiàng)目，很多前端工程師都或主動(dòng)或被動(dòng)的一頭扎向小程序開發(fā)大軍，當(dāng)然我也不可避免的開始加入其中。
不管是做什么樣的項(xiàng)目黑低，或多或少會(huì)涉及到表單，小程序提供了一系列的原生表單組件酌毡，其中很多組件是很不錯(cuò)的克握，我們直接拿來用就可以，但是單選和復(fù)選框的樣式枷踏，實(shí)在是不在丑的不忍直視玛荞，當(dāng)然和我們的設(shè)計(jì)小哥哥小姐姐做的設(shè)計(jì)圖更是相差甚遠(yuǎn)，為了達(dá)到預(yù)期效果我們就必須要將原生組件進(jìn)行優(yōu)化呕寝，但是小程序的組件優(yōu)化又不同于網(wǎng)頁版勋眯，直接用我的另一篇博文《使用 CSS 修改 HTML 默認(rèn)單選和復(fù)選框樣式（網(wǎng)頁版）》進(jìn)行優(yōu)化就可以婴梧。主要原因在于我們無法在調(diào)試模式下看到組件的原生樣式代碼，在這里我主要以復(fù)選框作為案例來記錄我是如何進(jìn)行修改的客蹋，廢話不多說上代碼塞蹭。
小程序開發(fā)手冊中給我們提供的原生復(fù)選框示例是這樣的
WXML
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
JavaScript
Page({
data: {
items: [
{name: 'USA', value: '美國'},
{name: 'CHN', value: '中國', checked: 'true'},
{name: 'BRA', value: '巴西'},
{name: 'JPN', value: '日本'},
{name: 'ENG', value: '英國'},
{name: 'TUR', value: '法國'},
]
},
checkboxChange: function(e) {
console.log('checkbox發(fā)生change事件，攜帶value值為：', e.detail.value)
}
})
最終效果：
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-cGgDGpeO-1586964935221)(https://developers.weixin.qq.com/miniprogram/dev/image/pic/checkbox.png?t=18101919)]
其中并沒有給到我們樣式是怎么寫的讶坯，我也是經(jīng)過多番搜索查找才知道番电，小程序的復(fù)選框的類名是 wx-checkbox-input， 但是他具體是怎么工作的辆琅，我也不想去深究了漱办，我們只要達(dá)到我們優(yōu)化的目的就可以了。
我這里進(jìn)行優(yōu)化的方法也很簡單總共分為三步：
一婉烟、給原生復(fù)選框設(shè)置樣式使其隱藏
WXSS
.wx-checkbox-input{
display: none;
}
二娩井、我們自己寫一個(gè)復(fù)選框組件代碼替換原生代碼
WXML
<checkbox-group bindchange="checkboxChange">
<label class="checkbox" wx:for="{{items}}">
<checkbox class="ws-checkbox" value="{{name}}" checked="{{checked}}"/>{{item.value}}
</label>
</checkbox-group>
三、給我們自己寫的復(fù)選框組件設(shè)置我們想要的樣式
WXSS
.ws-checkbox {
display: inline-block;
float: left;
margin: 25rpx 20rpx 0 50rpx;
width: 40rpx;
height: 40rpx;
background-image: url('https://xjl.jindanke.cn/uploads/wx_img/checked-box.png');
background-size: 100%;
}
.ws-checkbox[checked] {
background-image: url('https://xjl.jindanke.cn/uploads/wx_img/checked-box-hover.png');
}
最終效果：
至此似袁，我們小程序的復(fù)選框優(yōu)化就完成了洞辣，單選框和復(fù)選框的優(yōu)化方式是一樣的，這里就不再重復(fù)寫了昙衅，如果在過程中有什么問題歡迎留言評論扬霜。
