小程序WeUi组件引用
1.引入组件
可以通过npm方式下载构建,npm包名为weui-miniprogram
也可以通过页面按需下载。官方下载地址https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
解压后添加到自己的项目中
首先要在app.wxss里面引入weui.wxss
@import './weui-miniprogram/weui-wxss/dist/style/weui.wxss';
这里以Checkbox-group和Checkbox做例子
在 page.json 中引入组件(page.json 指要引用组件的页面下的json文件)
这里我是直接放在全局里面也就是app.json里面 就不用每个页面都写了
"usingComponents": {
"mp-checkbox-group": "../../weui-miniprogram/checkbox-group/checkbox-group",
"mp-checkbox": "../../weui-miniprogram/checkbox/checkbox",
"mp-cells": "../../weui-miniprogram/cells/cells"
},
<!--WXML示例代码-->
<mp-cells title="单选列表项">
<mp-checkbox-group prop="radio" multi="{{false}}" bindchange="radioChange">
<mp-checkbox wx:for="{{radioItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
</mp-checkbox-group>
</mp-cells>
<mp-cells title="复选列表项">
<mp-checkbox-group prop="checkbox" multi="{{true}}" bindchange="checkboxChange">
<mp-checkbox wx:for="{{checkboxItems}}" wx:key="value" label="{{item.name}}" value="{{item.value}}" checked="{{item.checked}}"></mp-checkbox>
</mp-checkbox-group>
</mp-cells>
在 page.js中引入组件(page.js指要引用组件的页面下的js文件)
// page.js示例代码
Page({
data: {
radioItems: [
{name: 'cell standard', value: '0', checked: true},
{name: 'cell standard', value: '1'}
],
checkboxItems: [
{name: 'standard is dealt for u.', value: '0', checked: true},
{name: 'standard is dealicient for u.', value: '1'}
],
},
radioChange: function (e) {
console.log('radio发生change事件,携带value值为:', e.detail.value);
var radioItems = this.data.radioItems;
for (var i = 0, len = radioItems.length; i < len; ++i) {
radioItems[i].checked = radioItems[i].value == e.detail.value;
}
this.setData({
radioItems: radioItems,
[`formData.radio`]: e.detail.value
});
},
checkboxChange: function (e) {
console.log('checkbox发生change事件,携带value值为:', e.detail.value);
var checkboxItems = this.data.checkboxItems, values = e.detail.value;
for (var i = 0, lenI = checkboxItems.length; i < lenI; ++i) {
checkboxItems[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if(checkboxItems[i].value == values[j]){
checkboxItems[i].checked = true;
break;
}
}
}
this.setData({
checkboxItems: checkboxItems,
[`formData.checkbox`]: e.detail.value
});
},
});
效果如下:
其他WeUi组件按需引用,按照这种方式使用即可。