我是因为公司项目接触WeUI的,实话说刚开始的时候并不顺。我最先看的是jquery weui然后偶然发现了weui+。这两种都是在WeUI基础上的拓展,但我经过一段时间的使用,觉得简单的微信公众平台页面的开发还是使用WeUI更为方便。
那么我就来分享下我的学习体会:WeUI的官方简介说WeUI is an WeChat-like UI framework officially designed by the WeChat Design Team, tailor-made for WeChat Web development, in order to improve and standardize the experience for WeChat users.实际上它就是一个为微信开发量身定做的组件库。然而我不太理解网上真正按照官方文档和用官方组件库的并不多。这里先发一下官方文档链接:WeUI的GitHub地址,WeUI.js的GitHub地址。大家可以自行参考。
好,我正式开始我使用的组件的介绍和自己项目的分享了。
- 表单篇
1)picker(选择器)
这是我觉得比较美观和体验感好的选择器,jquery weui的select选择器实在让我感到违和。如果是固定值单列的选择器是比较简单的。1)第一个就是picker(选择器)
这是我觉得比较美观和体验感好的选择器,jquery weui的select选择器实在让我感到违和。如果是固定值单列的选择器是比较简单的。前台就是简单的input控件外面套个select箭头。Html:
<div class="weui-cell weui-cell_select" style="width: 100%;">
<div class="weui-cell__hd">
<label class="weui-form-preview__label"> 区域分划</label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" name="select1" id="selectAdminarea" placeholder="请选择区域分划" readonly="readonly"></input>
</div>
</div>
而js部分就是定义好label和value值后,我们的重点就是onChange(),onConfirm(),onClose()的方法了。js:
weui.picker([
{
label: '新成路街道',
value: '310114001'
}, {
label: '真新街道',
value: '310114002'
}, {
label: '菊园新区管委会',
value: '310114001'
}, {
label: '嘉定镇街道',
value: '310114002'
}, {
label: '南翔镇',
value: '310114001'
}, {
label: '安亭镇',
value: '310114103'
}
], {
defaultValue: ['310114001'],
onChange: function (result) {
// console.log(result);
},
onConfirm: function (result) {
$("#selectAdminarea").val(result[0].label);
selectArea = result[0].value;
// console.log(selectArea);
},
id: 'selectAdminarea'
});
注意点:因为你js的选择的值还需要赋值给你所需要赋值的地方即input框所以有必要在确认方法里加$("#inputId").val(选择的返回值)。
但如果我们需要把从后台获取数据绑定在选择框上呢?并且我们往往会有多级选择的情况出现,就比如地址的选择:城市->街镇那样
var resJson = new Array();
//ajax远程加载初始化问题类别下拉框选项
myajax = $.ajax({
url: rootUrl + "casetype/getCaseType",
type: "get",
contentType: "application/json",
data: {
"parentCodes": "1,2",
"levelType": "2"
},
//traditional: true,
success: function(res) {