四时宝库

程序员的知识宝库

微信小程序使用wxs(微信小程序使用蓝牙授权)

小程序内的wxs文件强大之处在于,它可以结合了vue的filters和computed的特点,可以在小程序内作为强大的filters使用,真的很好用。

注意wxs文件内不能使用引用文件,不能使用es6、es7语法

var myreg = getRegExp('^[1][3,4,5,6,7,8,9][0-9]{9}
); var filters = { checkVal:function (index, blur, val){ var obj = { warning: false, str: '', cls:'' } index = parseInt(index) if (blur && !val.trim()) { if (index === 0) { obj.warning = true obj.str = '请输入真实姓名' obj.cls = 'warning' } else if(index === 1) { obj.warning = true obj.str = '请输入手机号' obj.cls = 'warning' } else if (index === 2) { obj.warning = true obj.str = '请输入验证码' obj.cls = 'warning' } } else if (blur && val.trim()){ if (index === 1 && !myreg.test((val.trim()))){ obj.warning = true obj.str = '请输入正确的手机号' obj.cls = 'warning' } } else if (!blur){ obj.warning = false obj.str = '' obj.cls = '' } return obj }, loading:function (bol) { if (bol) { return 'main999 disabled-background' } else { return 'fff green-background' } }, isCanSubmit: function(name, mobile, code, indata){ var obj = { event: '', cls : '' } if (name.trim() && mobile.trim() && myreg.test((mobile.trim())) && code && indata.scheduleId){ obj.event = 'submit' obj.cls = 'fff green-background' } else { obj.event = '' obj.cls = 'main999 disabled-background' } return obj } } module.exports = filters

页面内引用以及使用

< wxs module='filters' src='./index.wxs'></wxs >
< view class='form-item flex flex-cross-center {{filters.checkVal(0, warning[0], truename).cls}}'>
 < view class='fot28 main666 icon iconfont icon-_xingmingx'></view >
 < view class='input-el flex-box-1'>
 < in put type='text' maxlength='7' auto-focus value='{{truename}}' class='fot28 main333 ' data-index='0' bindinput='bindinput' bindfocus='inputFocus' bindblur='inputBlur' placeholder-class='fot28' placeholder='请输入真实姓名'></ inp ut>
 
 < view class='tips-text fot24 warn' wx:if='{{filters.checkVal(0, warning[0], truename).str}}'>{{filters.checkVal(0, warning[0], truename).str}}</ view>
</view >

希望各位程序员朋友会喜欢我的帖子,各位工作顺利,工资越来越高!!!

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接