小程序必备技巧(2)—结合wxs对wxml中数据进行格式化

在业务开发场景中，我们经常会碰到对数据进行格式化的操作，比如：对大数字进行格式化变为XX.X万的形式、对时间进行格式化展示成几分几秒的形式等。

由于小程序不支持在js中编写对应的函数，然后在“{{}}”进行调取，我们可利用官方提供的wxs（小程序的一套脚本语言）来对wxml中的数据进行格式化：

步骤1、编写wxs文件

我们可在utils中创建wxs文件进行对应逻辑的编写，如：format.wxs

！需要注意的是，wxs中只能使用ES5语法！所以不要出现let、const、对象增强写法、export等...

function formatCount(count) {
  var counter = parseInt(count)
  if (counter > 100000000) {
    return (counter / 100000000).toFixed(1) + "亿"
  } else if (counter > 10000) {
    return (counter / 10000).toFixed(1) + "万"
  } else {
    return counter + ""
  }
}

function formatDuration(duration) {
  duration = duration / 1000 // 转换成秒钟
  var minute = Math.floor(duration / 60) // 拿到分钟
  var second = duration % 60 // 拿到秒钟
  return padLeftZero(minute) + ":" +  padLeftZero(second)
}

function padLeftZero(time) {
  time = time + ""
  return ("00" + time).slice(time.length)
}

// wxs中不支持ES6语法，所以不支持es6的export导出方式，要使用commonjs导出方式
module.exports = {
  // 注意，不要写对象增强写法，不支持！
  formatCount: formatCount,
  formatDuration: formatDuration
}
复制代码

• 这里需要注意的是，由于不能使用ES6语法，所以在导出函数时，需要使用commonjs方式进行导出

• 还需要注意的是，导出的对象不要使用“对象增强写法”

• 推荐一个对时间“补0”算法： ("00" + time).slice(time.length)

  • 比如，时间12，先添加两个0，变成0012，再对0012进行截取，从其本身的长度位置开始截取（也就是2），那么就会变为12
  • 再比如，时间3，先添加两个0，变成003，再对003进行截取，从其本身的长度位置开始截取（也就是1），那么就会变为03~

步骤2、引入wxs文件并使用

• 使用wxs标签中的src属性对wxs文件进行引入
• 使用wxs标签中的module属性对wxs文件起一个模块名
• 使用模块名.方法即可对wxs中相关方法进行调取