WXS
WXS是小程序专门设计的一种脚本语言,可以用在WXML文件中实现逻辑处理,类似于JavaScript。
需要通过module.exports暴露出去,才能被页面应用到。
模块化导入导出
直接在页面中使用:
<view>
<view>{{m1.showInfo()}}</view>
<view>{{m1.num}}</view>
</view>
<wxs module='m1'>
// 这里可以实现业务处理
console.log('hello wxs')
// 支持模块导出
module.exports.showInfo = function () {
return 'hello'
}
module.exports.num = 123
</wxs>
文件导入导出
单独的文件形式,
// test.wxs
module.exports.add = function (a, b) {
return a + b
}
引入到页面的结构当中wxml:
<view>
<view>{{m2.add(1, 2)}}</view>
</view>
<!-- 引入独立的 wxs 文件 -->
<wxs module='m2' src='./test.wxs'></wxs>
应用场景
WXS 一般是结合 WXML 使用的,一般用来格式化展示数据,类似于 Vue 中过滤器的功能。
<!-- 将 now 时间戳传入 date.format 方法 -->
<view class="now">{{date.formatDate(now)}}</view>
<!-- 模块 date 暴露了 format 方法 -->
<wxs module="date" src="../../wxs/date.wxs"></wxs>
Page({
// 获取当前时间(时间戳)
data: {
now: Date.now()
}
})
// date.wxs
module.exports.formatDate = function (timestamp) {
// wxs 中通过 getDate 函数获得时间对象
var d = getDate(timestamp);
// 返回值会在 wxml 中被渲染展示
return d.getFullYear() + '年' + (d.getMonth() + 1) + '月' d.getDate() + '日';
}