评论

小程序里面数据精度计算问题

通过本文加深对wxs的理解

背景

通过本文加深对wxs的理解

前言

在项目中涉及到百分比的计算,js浮点数运算会出现精度问题,造成小数位数过多,因此想在模板语法中对值进行相应的处理。

开始

按照常规用法,使用js中的toFixed()进行处理:

<view>¥{{(cashMoney*0.02).toFixed(2)}}手续费(费率2%)</view>

报错,无法直接使用,也不能调用js中的方法。

实践

既然{{}}中无法调用js中的函数,那该怎么办呢?微信提出了一种新的概念,WXS(WeiXin Script) ,小程序的一套脚本语言,可以在WXML的{{}}中调用.wxs的方法。

我们新建一个.wxs文件

// 支持es4语法
var filter = {
numberToFixed: function(value){
return value.toFixed(2)
}
}
// 导出对外暴露的属性
module.exports = {
numberToFixed: filter.numberToFixed
}
在.wxml中引入文件:

<!-- 引入.wxs文件 src为相对路径,module指定当前模块的名称 -->
<wxs module=“filter” src="./numberToFixed.wxs"></wxs>
在{{}中调用.wxs模块中的方法:

<view>¥{{filter.numberToFixed(cashMoney*0.02)}}手续费(费率2%)</view>

总结

从vue到小程序,写页面最大的感觉就是,之前vue能用computed实现的一些处理或者methods的方法,可以直接在{{}}中调用,处理某些数据很便捷。微信推出WXS也是弥补了小程序{{}}中不能直接使用js中的方法的不足。另一方面也是提高了小程序的性能,各司其职。

最后一次编辑于  12-02  
点赞 1
收藏
评论

1 个评论

  • 小肥羊🐑🥬
    小肥羊🐑🥬
    12-02

    大家不要评论

    12-02
    赞同
    回复 2
    • Stephen
      Stephen
      12-02
      你在自言自语什么?
      12-02
      回复
    • Wang
      Wang
      12-05
      开始自言自语了吗
      12-05
      回复