小程序“WXS”及数字格式化、时间格式化。(wxs中使用正则踩坑

一、什么是WXS？

1.1 WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

官方：WXS 与 JavaScript 是不同的语言，有自己的语言，并不和 JavaScript 一致。(不过基本一致)
WXS中目前只能使用ES5，ES6的使用会报错

1.2 为什么要设计WXS语言？

1.2.1 在WXML中是不能直接调用Page/Component中定义函数的; (双线程模式)

<!-- 在vue中可以直接调用函数 但是在小程序中这样调用是没用的(以前这样调用会报错，现在不会报错但是没有任何结果显示) -->
<view>结果：{{formatCount(value)}}</view>

但是某些情况下，我们希望使用函数来处理WXML中WXML中的数据(类似于Vue中的过滤器)，这个时候就可以使用WXS了

1.3 WXS使用的限制和特点：

• WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行；
• WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS中不能调用其他JavaScript文件中定义的函数，也不能调用小程序提供的API；
• 由于运行环境的差异，在IOS设备上小程序内的WXS会比JavaScript代码快 2～20 倍，在android设备上二者运行效率无差异；

二、WXS的写法

2.1 WXS有两种写法：

• 写在<wxs>标签中
• 写在以.wxs结尾的文件中

2.2 <wxs>标签的属性：

属性名	类型	说明
module	String	当前<wxs>标签的模块名。必填字段。
src	String	引用.wxs文件的相对路径。仅当本标签为单闭合标签或标签内容为空时有效。

2.3 每一个.wxs文件和 <wxs> 标签都是一个单独的模块。(一个wxml文件中可以引入多个wxs"module不能重复")

• 每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见；
• 一个模块想要对外暴露起内部的私有变量，只能通过 module.exports实现；

三、WXS简单案例

• 传入一个数字(整数或小数)，格式化后进行展示(例如36456，展示结果3.6万)

• 传入一个时间(秒)，格式化后进行展示(例如100秒，展示结果为01:40)

  
  

• wxml

<wxs module="format" src="/utils/format.wxs"></wxs>
<block>
  <view>传入一个数字(整数或小数)，格式化后进行展示(例如36456，展示结果3.6万)</view>
  <view>结果：{{format.formatCount(value)}}</view>
  <input type="number" model:value="{{value}}" class="my-input" />
</block>
<block>
  <view>传入一个时间(秒)，格式化后进行展示(例如100秒，展示结果为01:40)</view>
  <view>结果：{{format.formatDuration(value1)}}</view>
  <input type="number" model:value="{{value1}}" class="my-input" />
</block>

• wxs

function formatCount(count) {
  var patrn = getRegExp('(^[0-9]*\.([0-9]{1}\d*)$)|(^[0-9]*$)')
  if (!patrn.test(count)) return count ? "格式错误" : "";
  var count = +count;

  if (count > 100000000) {
    return (count / 100000000).toFixed(1) + "亿"
  } else if (count > 10000) {
    return (count / 10000).toFixed(1) + "万"
  }
  
  return count
}

function disposeTime(time) {
  return time < 10 ? "0" + time : time
}

function formatDuration(duration) {
  var patrn = getRegExp('(^[0-9]*$)');
  if (!patrn.test(duration)) return "格式错误";
  var isHours = duration >= 3600;

  if (isHours) {
    var hours = disposeTime(Math.floor(duration / 3600));
    duration = duration - hours * 3600;
  }
  var minutes = disposeTime(Math.floor(duration / 60));
  var seconds = disposeTime(duration % 60);

  return (isHours ? (hours + ":") : "") + minutes + ":" + seconds;
}

module.exports = {
  formatCount: formatCount,
  formatDuration: formatDuration
}

四、WXS中使用正则表达式

直接使用会报错 var patrn = /'(^[0-9]*$)'/;

要使用getRegExp函数
var patrn = getRegExp('(^[0-9]*$)');

• 注意 使用getRegExp时里面不要带/！！！！
• 错误 getRegExp('/(^[0-9]*$)/');
• 正确 getRegExp('(^[0-9]*$)');