h5 学习笔记：小程序使用wxs 解决wxml保留2位小数问题

今天在编写小程序的时候遇到一个浮点数的问题，处理一个浮点价格乘以一个数量的出现溢出的问题。一直以来js浮点数运算都是有溢出的问题。刚好在编写过程发现这种小问题。小程序提供的wxs方法可以将函数入侵注入到wxml进去可以解决到保留小数的问题。下面我们看一下现象

1.出现溢出表现

从图中可以看到数字超出了很长长度。代码里面是如下这样的。为什么在0.35出现？或者一些相成的计算出现? 而 0.34却不会。

0.41 也会出现，好像是二进制运算出现结果。

 data: {
    price:0.01,
    num:35
  },

wxml文件仅仅是处理一个相处的结果。

<view>
 {{price*num}}
</view>

2.在wxml文件加入一个约束2位小数操作

从官方的文档里面，可以看到加入一个wxs的模块就可以扩展一些方法在wxml里面使用。

wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调。
由于运行环境的差异，在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
以下是一些使用 WXS 的简单示例：

有了官方的介绍，在wxml文件里面创建一个方法，调用的时候就可以直接使用保留2位小数的问题了。创建一个wxs模块，看如下的代码，在模块里面添加对应的处理方法。

<view>
 {{we.toFixed(price*num)}}
</view>

<wxs module="we">
  var toFixed = function (value) {
  return value.toFixed(2);
}
module.exports = {
   toFixed :toFixed
}
</wxs>

经过这个方法处理，小程序的运算可以保留到2位小数了。