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