摘要：WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。在此次开发中，由于接口返回数据不统一，所以要对某些字段进行过滤。但直接使用replace时竟然报错了，原来在WXS中要生成regexp对象需要使用getRegExp函数......

一、起因

其实不用说看官也能猜到，起因当然是公司的小程序又有了新的需求嘛！此次小程序的需求中有一个是关于商品组件UI优化的需求，优化规则如下：

优惠券：金额取整。不超过1元，则不显示；超过9999，则仅显示9999+
商品价格：当商品金额小于10000时，保留2位小数显示；大于等于10000元时，则显示为1.0万的格式，即保留1位小数
已售：当虚拟销小于10000件时，显示完全；当虚拟销量大于等于10000件，则显示为已售1.0万件的格式，即保留1位小数
佣金：当佣金小于10时，保留2位小数显示；大于等于10元时，保留1位有效数字；大于等于100时，保留为整数；大于等于1000时，显示为：赚¥999+

二、方案选择

考虑到现有项目的复杂程度，涉及修改的组件至有三个，分别是：普通商品、秒杀商品、拼团商品。如果在每个组件内的js中修改，肯定是不可取的，毕竟js中会有大量的逻辑运算。最后综合考虑后选择使用WXS，即：在创建一个后缀为wxs的文件，在里面封装一个函数，在需要修改的地方调用即可。

三、封装代码

创建组件等步骤这回就不多说了，直接写代码吧，然后再说坑的事情。

3.1、wxs中封装formatValue

    
/* 封装一个格式转换的方法 */
    
function formatValue(value, type) {
    
  var result = value
    
  switch (type) {
    
    case 'price': /* 普通价格 */
    
      /* 商品价格：当商品金额小于10000时，保留2位小数显示；大于等于10000元时，则显示为1.0万的格式，即保留1位小数 */
    
      result = Number(value)
    
      if (result < 10000) {
    
        result = result.toFixed(2)
    
      } else {
    
        result = (result / 10000).toFixed(1) + '万'
    
      }
    
      break
    
    case 'sold': /* 已售*/
    
      /* ...... 完整代码见文章末尾的github分支 */
    
      break
    
    case 'commission': /* 佣金 */
    
      /* ...... 完整代码见文章末尾的github分支 */
    
      break
    
    case 'coupon': /* 优惠券 */
    
      /* ...... 完整代码见文章末尾的github分支 */
    
      break
    
    }
    
  return result
    
}
    

可以看到艺灵刚写了一个名叫formatValue的方法，接收两个参数value和type。含义是：value表示要处理的值；
type表示类型，可以为：价格、已售、佣金等。毕竟规则各不相同嘛！

在需要使用的wxml页面中先引入wxs然后再使用\{\{wxs.formatValue('值', '类型')\}\}即可。示例代码如下：

    
<!-- 引入格式化函数 yiling 20200420 10:53:46 start -->
    
<wxs src="../../utils/format.wxs" module="wxs"></wxs>
    
<!-- 引入格式化函数 yiling 20200420 10:53:46 end -->
    
...... /* 省略若干项目代码 */
    
<view>
    
  \{\{wxs.formatValue(item.price, 'price')\}\}元 /* 处理价格 */
    
</view>
    
...... /* 省略若干项目代码 */
    

友情提示：上面代码中的\反斜线是为了防止在文章中转码，看官复制后替换为空即可。

保存代码后到小程序中预览就可以看到效果了，效果如图：wxs中的formatValue函数已经生效了.png

本以为这样就结束了，可谁知：当艺灵继续改到商品组件时竟然翻车了！！！如图：在商品分组组件中竟然意外出现NaN.png

当时我就懵了！这是什么情况？？？

冷静片刻后，开始查看接口返回的数据，原来接口返回的数据中带有¥！[:吐血][:吐血][:吐血]如图：接口返回数据客户的custom_price字段带有￥符号.png

再来看看我们封装的函数，里面使用了result = Number(value)，所以这个Number("¥198000")输出成NaN就不足以为奇了。

3.2、优化formatValue

    
function formatValue(value, type) {
    
  /* 新增过滤代码 start */
    
  if (typeof value === 'string') {
    
    if (value.match('¥')) {
    
      value = value.replace(/¥/g, '')
    
    }
    
  }
    
  /* 新增过滤代码 end */
    
  var result = value
    
  /* 下面代码无任何修改，此处略去 */
    
}
    

保存代码再来看效果，结果竟然报错了！！！如图：直接使用replace后在微信小程序中报错了.png

不科学啊！难道我拼写有问题？仔细检查了一番，没错呀！不放心的我又在控制台粘贴代码，输出正常。如图：同样的代码在微信小程序控制台中可正常输出.png

WXS中不支持const、let这我是知道的，难道replace也不支持？？？

带着疑问又去看了一下微信小程序的官方文档，戳我访问 WXS 数据类型，页面搜索replace发现是有的。搜索“正则”时发现要使用getRegExp！如图：WXS语法中使用正则时需要使用getRegExp函数.png

然后尝试修改刚才的代码，保存后没有报错了，页面也显示正常。如图：使用getRegExp函数后页面正常显示.png

3.3、继续优化formatValue

    
function formatValue(value, type) {
    
  if (typeof value === 'string') {
    
    if (value.match('¥')) {
    
      /* 使用getRegExp函数处理正则表达式 start */
    
      var reg = getRegExp('¥', 'g')
    
      value = value.replace(reg, '')
    
      /* 使用getRegExp函数处理正则表达式 end */
    
    }
    
  }
    
  var result = value
    
  /* 下面代码无任何修改，此处略去 */
    
}
    

至此，这篇文章中提到的坑就已经解决了。艺灵吸取的教训就是：开发微信小程序时还是要多核对官方文档，不能总是按以往的经验来写代码。

四、demo源码

demo源码已上传到了github上，如果看官需要研究源码，可以点击下面的链接进行访问并下载。

    
源码分支： https://github.com/yilingsj/weixinxiaochengxu/tree/dev-wxs-regexp-20200427  
    

源码中会有必要注释和本篇文章中的示例。若有疑问可与艺灵联系，方式见下方二维码或右侧。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2020-04-27/weixin-wxs-regexp.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。