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

更新日期: 2020-08-07 阅读次数: 457 字数: 424 分类: 微信小程序

需求场景

在小程序页面展示时,对时间、金额进行格式化处理。但是每次在 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 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。同时也欢迎关注我的微信公众号“大象工具”: 大象工具微信公众号

相关文章

爱评论不评论

近期节日

2020年10月01日 国庆节
2020年10月01日 中秋节
2020年10月04日 世界动物日
2020年10月08日 寒露
2020年10月09日 世界邮政日
2020年10月10日 辛亥革命纪念日
2020年10月13日 中国少年先锋队诞辰日
2020年10月14日 世界标准日
2020年10月15日 国际盲人节
2020年10月16日 世界粮食日
2020年10月17日 国际消除贫困日
2020年10月22日 世界传统医药日
查看更多节日