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

一、什么是WXS?

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

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

1.2 为什么要设计WXS语言?

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

结果:{{formatCount(value)}}

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

1.3 WXS使用的限制和特点:

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

二、WXS的写法

2.1 WXS有两种写法:

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

2.2 标签的属性:

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

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

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

三、WXS简单案例

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

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


  • wxml



  传入一个数字(整数或小数),格式化后进行展示(例如36456,展示结果3.6万)
  结果:{{format.formatCount(value)}}
  


  传入一个时间(秒),格式化后进行展示(例如100秒,展示结果为01:40)
  结果:{{format.formatDuration(value1)}}
  

  • 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]*$)');

你可能感兴趣的:(小程序“WXS”及数字格式化、时间格式化。(wxs中使用正则踩坑))