es6小程序

【小程序】WXS解读

2018-07-24  本文已影响796人  嘻洋洋

1官方解读

2用途和使用场景

var MAX_COUNT = 19
module.exports = {
    MAX_COUNT: MAX_COUNT
}

3具体用法

工具类函数

var moneyFormat = function (num) {
  if(null==""){return ""}
  num = parseFloat((num + "").replace('/[^\d\.-]/g', "")).toFixed(2) + "";
  var integ = num.split(".")[0].split("").reverse(), deci = num.split(".")[1];
  var space = "";
  for (i = 0; i < integ.length; i++) {
    space += integ[i] + ((i + 1) % 3 == 0 && (i + 1) != integ.length ? "," : "");
  }
  var text = space.split("").reverse().join("") + "." + deci;
  if (text.substring(text.length - 3) == ".00") {
    text = text.substring(0, text.length - 3)
  } else if (text.substring(text.length - 1) == "0") {
    text = text.substring(0, text.length - 1)
  }
  return text
}
module.exports = {
    moneyFormat : moneyFormat
}

将wxs引入到wxml中,设置module名为tool,引入的时候,wxs标签src填写相对路径(绝对路径无效)

<wxs src="../../tool.wxs" module="tool" />

wxml中使用函数

    <view class="pay-right">
      <text>¥{{tool.moneyFormat(originalCost)}}</text>
      <text>-¥{{tool.moneyFormat(shopInfo.promAmt)}}</text>
      <text>+¥{{tool.moneyFormat(postage)}}</text>
      <text wx:if="{{usePcardAmt > 0}}">-¥{{tool.moneyFormat(usePcardAmt)}}</text>
      <text wx:if="{{useAccAmt > 0}}">-¥{{tool.moneyFormat(useAccAmt)}}</text>
      <text wx:if="{{useCrdtAmt > 0}}">-¥{{tool.moneyFormat(useCrdtAmt)}}</text>
    </view>

4结合JS函数使用

无论是WXS函数和JS函数都是能操作data数据,很多时候通过JS函数得到data,然后用WXS函数处理。
验证邮箱

// 通过正则来检验邮箱是否有效
var validateEmail = function(email) {
    var reg = getRegExp('^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$')
    return reg.test(email)
}

module.exports = {
    validateEmail: validateEmail
}
//页面使用,WXS函数使用data:email
<!-- 通过检测邮箱是否有效,来设置相应的class,再在wxss中写好相应的样式 -->
<input class="email_input {{util.validateEmail(email)?'':'error'}}" placeholder='请输入邮箱' value='{{email}}' bindinput='emailInput'></input>
//JS函数获取data
emailInput(e){
        let that = this
        let email = e.detail.value // 获取输入框的数据
        that.setData({
            email
        })
    }
上一篇 下一篇

猜你喜欢

热点阅读