WeUI组件库简介 这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。
项目背景 随着小程序的普及，微信也有很多内部小程序在开发，每个小程序都需要从零到1进行开发设计，而这个过程中，有大量的UI交互是重复的，另外，微信内部已经有一套H5版本的WeUI样式库。综合考虑，我们基于WeUI样式库开发了小程序版本的UI组件库，在内部多个小程序项目已经使用OK的情况下，我们把这套组件库开源让外部开发者也可以使用，欢迎大家Star以及提Issue。
下载地址weui-wxss 官方说明文档简介 wxml
<!--pages/user/user_info/user_info.wxml--> <!--pages/visitor/user_info/user_info.wxml--> <view class="page"> <form report-submit='true' bindsubmit="formSubmit"> <view class="weui-cell weui-cell_input"> <image mode="aspectFill" class='user_img' src='{{comp_img}}' bindtap='change_img'></image> </view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">姓氏</view> </view> <view class="weui-cell__bd"> <input name="comp_surname" disabled='{{disabled}}' value="{{comp_surname}}" class="weui-input" placeholder=""/> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">名字</view> </view> <view class="weui-cell__bd"> <input name="comp_name" disabled='{{disabled}}' value="{{comp_name}}" class="weui-input" placeholder=""/> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">E-mail</view> </view> <view class="weui-cell__bd"> <input value='{{comp_email}}' name='comp_email' class="weui-input" placeholder=""/> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">手机</view> </view> <view class="weui-cell__bd"> <input value="{{comp_mobile}}" name="comp_mobile" class="weui-input" placeholder=""/> </view> </view> </view> <view class="weui-cells__title">性别</view> <view class="weui-cells weui-cells_after-title"> <radio-group name="comp_sex"> <label class="weui-cell weui-check__label" wx:for="{{arrSex}}" wx:key="index"> <radio value="{{item.id}}" checked="{{item.checked}}"/> <view class="weui-cell__bd">{{item.val}}</view> </label> </radio-group> </view> <view class="weui-cells__title">职业</view> <view class="weui-cells weui-cells_after-title"> <radio-group name="usgu_class"> <label class="weui-cell weui-check__label" wx:for="{{arrGuideClass}}" wx:key="index"> <radio value="{{item.id}}" checked="{{item.checked}}"/> <view class="weui-cell__bd">{{item.val}}</view> </label> </radio-group> </view> <view class="weui-cells__title">擅长语言(非必选项)</view> <view class="weui-cells weui-cells_after-title"> <checkbox-group name="usgu_foreign_language"> <label class="weui-cell weui-check__label" wx:for="{{arrLanguageClass}}" wx:key="index"> <checkbox value="{{item.id}}" checked="{{item.checked}}"/> <view class="weui-cell__bd">{{item.val}}</view> </label> </checkbox-group> </view> <view class="weui-cells__title">居住城市</view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell weui-cell_select"> <view class="weui-cell__bd"> <picker name="comp_work_pcp" mode="multiSelector" bindchange="func_changeCitysChange" bindcolumnchange="func_changeCitysChangeColumn" value="{{ citysIndex }}" range="{{ cityArray }}"> <view class="weui-select">{{address?address:'请选择'}}</view> </picker> </view> </view> </view> <view class="weui-cells__title">籍贯</view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell weui-cell_select"> <view class="weui-cell__bd"> <picker name="comp_birth_pcp" mode="multiSelector" bindchange="func_changeCitysChange_b" bindcolumnchange="func_changeCitysChangeColumn_b" value="{{ citysIndex_b }}" range="{{ cityArray }}"> <view class="weui-select">{{address_b?address_b:'请选择'}}</view> </picker> </view> </view> </view> <!--view class="weui-cells__title">详细地址</view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell"> <view class="weui-cell__bd"> <textarea class="weui-textarea" name="comp_work_address" value='{{comp_work_address}}' /> </view> </view> </view--> <view class="space-between"> <view class="weui-cells__title">证件</view> <view class="weui-cells__title" bindtap="imgStyle"><view class="help_tab"><icon class='iconfont position_bottom3 icon-wenhao font_bold'></icon>证件规范</view></view> </view> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">资格证号</view> </view> <view class="weui-cell__bd"> <input value="{{usgu_guide_card}}" disabled='{{disabled}}' maxlength='22' name="usgu_guide_card" class="weui-input" placeholder="请输入导游证号码"/> </view> </view> <view class="weui-cell weui-cell_input"> <view class="weui-cell__hd"> <view class="weui-label">证件照片</view> </view> <view class="weui-cell__bd"> <image bindtap='up_img' mode='aspectFit' class='usgu_guide_cardImg' src='{{usgu_guide_cardImg}}'></image> </view> </view> </view> <checkbox-group bindchange="bindAgreeChange" name='read'> <label class="weui-agree"> <view class="weui-agree__text"> <checkbox class="weui-agree__checkbox" id="weuiAgree" value="{{read}}" checked="{{isAgree}}" /> <view class="weui-agree__checkbox-icon"> <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon> </view> <text class='font_black font30'> 同意相关的法律法规，并对提供的信息负责</text> </view> </label> </checkbox-group> <view class='kong20'></view> <view class="text_center font28 font_hui">注意:审核通过后，不能修改姓名，证件号和证件照。</view> <button form-type='submit' class="submit">确定</button> </form> </view>wxss
@import '../../../weui.wxss'; textarea{ height: 120rpx; border: 1px #ccc solid; } .change_img{ background-color: rgb(124, 124, 124); padding: 0px 10px; color: #fff; border-radius: 2px; } .user_img{ height: 200rpx; width: 200rpx; margin: 5px auto; } .submit { background-color: #1296DB; color: #fff; } .usgu_guide_cardImg{ max-width: 300rpx; max-height: 600rpx; margin: 3px auto; }下载地址WxValidate.js
创建规则和提示
// 验证规则 const rules = { comp_surname: { required: true, maxlength: [5], Chinese: true }, comp_name: { required: true, maxlength: [6], Chinese: true }, comp_work_address:{ required: true, maxlength: [30], }, comp_email: { required: true, email: true, }, comp_mobile: { required: true, tel: true, }, usgu_guide_card:{ required: true, maxlength: [22], EnglishNum: true, } // 配置false可关闭验证 }; // 验证提示信息 const messages = { comp_surname: { Chinese: '姓氏只能为汉字', maxlength: '姓氏不可超过5个字', required:'姓氏不可为空' }, comp_name: { Chinese: '名字只能为汉字', maxlength: '名字不可超过5个字', required:'名字不可为空' }, comp_work_address:{ maxlength: '详细地址不可超过30个字', required:'地址不可为空' }, usgu_guide_card:{ maxlength: '资格证号不可超过22个字符', EnglishNum:'资格证号只能输入英文或者数字' required:'证件不可为空' } }; // 创建实例对象 this.WxValidate = new WxValidate(rules, messages)过滤，验证 不符合条件的都会弹出窗消息提示错误
formSubmit: function (e) { var that = this; console.log(e.detail.value); if (!this.WxValidate.checkForm(e.detail.value)) { const error = this.WxValidate.errorList[0] wx.showModal({ content: error.msg, showCancel: false, }) return false } else { //上传 } }如果希望空值时是wx.showToast消息框提示，则可以关闭required验证，在过滤条件时判断字段值的长度
formSubmit: function (e) { var that = this; console.log(e.detail.value); if (!this.WxValidate.checkForm(e.detail.value)) { const error = this.WxValidate.errorList[0] wx.showModal({ content: error.msg, showCancel: false, }) return false } else if (e.detail.value.comp_surname.length == 0) { wx.showToast({ title: '请填写姓氏!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.comp_name.length == 0) { wx.showToast({ title: '请填写名字!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.comp_sex.length == 0) { wx.showToast({ title: '请选择性别!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.comp_mobile.length == 0) { wx.showToast({ title: '请填写电话!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.comp_work_pcp.length == 0) { wx.showToast({ title: '请选择地址!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.comp_birth_pcp.length == 0) { wx.showToast({ title: '请选择籍贯!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.usgu_class.length == 0) { wx.showToast({ title: '请选择职业!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.usgu_guide_card.length == 0) { wx.showToast({ title: '请填写资格证号!', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else if (e.detail.value.read.length == 0) { wx.showToast({ title: '请同意相关条款', icon: 'loading', duration: 1500 }) setTimeout(function () { wx.hideToast() }, 2000) } else { //提交 } }添加自定义条件 在/*** 初始化默认验证方法*/that.methods里添加正则
/**只能输入汉字 */ Chinese(value) { return that.optional(value) || /^[\u4e00-\u9fa5]+$/.test(value) }, /**只能输入英文和数字 */ EnglishNum(value){ return that.optional(value) || /^[0-9a-zA-Z]+$/.test(value) }在/*** 初始化默认提示信息*/this.defaults里添加提示
Chinese: this.formatTpl('请输入{0}位以内的汉字。'), EnglishNum: this.formatTpl('请输入{0}位以内的英文或者数字。'),