微信小程序使用 wxs 对模板数据格式化展示

需求场景

在小程序页面展示时，对时间、金额进行格式化处理。但是每次在 js 文件中处理，并 setData 感觉无比麻烦。是否可以直接在 wxml 模板文件中进行处理。正好发现了微信小程序 wxs，完全满足需求。

微信小程序 wxs 使用场景

WXS（WeiXin Script）是微信创造的一套脚本语言，虽然看起来很 JS 异常相似，但是官方说法是：

“WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致”。

作为模板变量filter不错，随模板打包带走挺好用

WXS 特点：

• 在视图层（webview）中运行的 JS
  
• 可以监听 touch 事件，处理滚动、拖动交互
  
• WXS 函数不能作为组件的事件回调
  
• 不能调用小程序提供的API
  
• 在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异
  

WXS 适用场景：

• 文本、日期格式化
  
• 用户交互频繁、仅需改动组件样式（比如布局位置），无需改动数据内容的场景，比如侧滑菜单、索引列表、滚动渐变等
  

wxs 写在独立文件中比较好

• 这样就能复用代码
  
• 方便代码格式化
  

以金额格式化为例：

wxs 代码

utils/filter.wxs

function formatMoney(money) {
  return (money * 1.0 / 100).toFixed(2)
}

module.exports = {
  formatMoney: formatMoney
}

在模板中使用 wxs 代码

<wxs module="filter" src="../../utils/filter.wxs"></wxs>

<view class="summary">
    <view>￥ {{filter.formatMoney(money)}}</view>
</view>

这样就起到了格式化数据展示的效果，而且不需要修改 js 文件中的 data 数据。

参考

• https://www.jianshu.com/p/46455225876b
  
• https://codingnote.cc/p/21562

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式