小程序 wepy2框架使用filters过滤千位符过滤

最新推荐文章于 2023-04-23 16:14:32 发布

原创最新推荐文章于 2023-04-23 16:14:32 发布 · 386 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序 #js #vue

收录于

vue 同时被 3 个专栏收录

24 篇文章

订阅专栏

jsvascript

22 篇文章

订阅专栏

wepy

7 篇文章

订阅专栏

本文介绍如何在wepy2框架中利用wxs实现价格数值的千位符格式化显示，以增强用户体验。由于wepy2不支持Vue的filters特性，因此采用小程序的wxs模块来完成这一功能。

需求：全部价格都用千位符过滤。

wepy2框架不支持vue的filters，只能使用小程序本身的wxs来快速解决这个需求。

1.新建filters.wxs文件，千位符参考博客：http://beteshis.com/6T2R

//单价增加千位符
function get_thousand_num(num){
    var regNum = getRegExp('\d+', 'g');
    var regThree = getRegExp('(\d{3})', 'g');
    return (num || 0).toString().replace(regNum, function (n) {
      var len = n.length;
      if (len % 3 === 0) {
        return n.replace(regThree, ',$1').slice(1);
      } else {
        return n.slice(0, len % 3) + n.slice(len % 3).replace(regThree, ',$1');
      }
    });
}

module.exports = {
    getThousandNum : get_thousand_num
}

2.在wpy中引入wxs文件注意：wxs文件里的方法只能在template中使用，wxs不支持es6，具体用法参考小程序官方文档

<wxs src="../utils/filters.wxs" module="filters" />
<template>
  <div class="orderpanel">
    //直接在模版中使用方法
    <span class="orage">¥{{filters.getThousandNum(price)}}</span>
  </div>
</template>
<script>
   ...
</script>