wxs
wxs 其实就是微信小程序的js ,但其不支持es6的语法,在wxs中也不可以直接调用Page/Component中定义的函数的,在某些情况,例如我们希望通过函数来处理WXML中数据(类似Vue中过滤器) 这个时候就使用WXS了(时间戳格式化,数字转化为固定格式)
1 简单使用:
<wxs module="xxf2"> // module属性必须要有 相当于给这个wxs起一个名字
// js代码 只能写es5语法
var foo = 'hello world'
var name = 'xxf2'
var sum = function(num1,num2){
return num1 + num2
}
module.exports = {
foo:foo, // 不能简写成 foo (不支持es6)
name:name,
sum:sum
}
</wxs>
<!-- 为啥拿不到数据 是因为wxs定义的数据默认是私有是,要想拿到数据要暴露出来 -->
<view>{{xxf2.name}}</view>
<view>{{xxf2.sum(10,20)}}</view>
2 抽离 :
把wxs抽离成一个单独的文件,在xxf2.wxs 中的代码为
var foo = 'hello world'
var name = 'xxf2'
var sum = function(num1,num2){
return num1 + num2
}
module.exports = {
foo:foo,
name:name,
sum:sum
}
在对应要使用wxml 页面使用时
<wxs src="/wxs/xxf2.wxs" module="xxf2"></wxs>
<view>{{xxf2.name}}</view>
<view>{{xxf2.sum(10,20)}}</view>
3wxs 的实际运用 案例
1新建对应 wxs 文件
代码:
var formatprice = function(price){
return price.toFixed(2)
}
module.exports={
formatprice:formatprice
}
在对应需要用到的wxml页面引入
<view>{{price}}</view>
<view>对price保留两位小数</view>
<view>{{format.formatprice(price)}}</view>
<wxs src="/wxs/format.wxs" module="format"></wxs>
]