【小程序】WXS解读

1官方解读

• wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。其实也差不多。
• wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
• wxs 函数不能作为组件的事件回调。
• 由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

2用途和使用场景

• wxs是专门用于wxml页面的，主要在视图层调用函数。
• wxs和js不能互相直接调用，有的事情，用wxs和js都能实现，但是你会发现用wxs更方便、直接。
• 页面中的一些常量放在wxs中

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

• 检查手机格式的函数放在wxs中来使用。
• 格式化金额

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填写相对路径（绝对路径无效）

wxml中使用函数

    
      ￥{{tool.moneyFormat(originalCost)}}
      -￥{{tool.moneyFormat(shopInfo.promAmt)}}
      +￥{{tool.moneyFormat(postage)}}
      -￥{{tool.moneyFormat(usePcardAmt)}}
      -￥{{tool.moneyFormat(useAccAmt)}}
      -￥{{tool.moneyFormat(useCrdtAmt)}}
    

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


//JS函数获取data
emailInput(e){
        let that = this
        let email = e.detail.value // 获取输入框的数据
        that.setData({
            email
        })
    }