今日总结 – 小程序使用WXS对页面数据进行处理

WXS(WeiXin Script)是小程序的一套脚本语言,WXS 就是在 page-frame 中运行的 JS,可以对 view 数据做一些变换。在wxml页面中,只能在插值{{ }}中写简单的js表达式,而不能调用方法。

例如后台返回数据的时间是2020-11-12T15:59:32这种格式,但是我们页面实际只想显示年月日(2020-11-12),就不能调用slice()方法。

遇到这种需求,我们的一般解决方案是在拿到后台数据时,先不渲染页面,把格式不对的数据处理成我们想要的格式,在通过setSata渲染数据。使用这种方案可以满足需求,如果是数据量特别大,就会导致页面白屏或者加载时间过长,用户体验不好。现在微信有了WXS脚本语言,我们就可以在标签内调用js,对数据进行处理。

1 编写WXS文件

首先定义一个wxs文件,以.wxs为后缀。里面是对数据处理的方法,通过 module.exports导出。

function formatData(val){
  return val.substring(0,10)
}
module.exports = {
  formatData: formatData
}

上面这个也比较简单,定义一个formatData方法,这个方法返回对数据处理的结果。然后再导出这个方法。

其实也可以通过标签的形式把方法写在页面中,适用于方法只针对这个页面,如果多个页面都需要使用,还是单独创建.wxs文件比较好。

2 使用WXS文件

wxml页面导入。定义module为tools,这个名字可以自定义。

<wxs src="../../wxs/format.wxs" module="tools" />

使用定义数据格式化的方法

<view class="col-time">{{tools.formatData(item.createTime)}}</view>

3 效果

使用之前

使用之后

正文完