小程序使用WXS对页面数据进行处理

简介: 小程序使用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 效果

使用之前

image.png

使用之后

image.png

相关文章
|
3月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
50 1
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
82 1
|
3月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
4月前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
2月前
|
小程序 JavaScript 开发工具
|
2月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
80 4
|
2月前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
46 3
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
3月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
3月前
|
小程序 JavaScript 开发工具
微信小程序——全局数据共享
微信小程序——全局数据共享
下一篇
DataWorks