在 WXML 中直接使用 JS 代码

因为有在 Vue 下开发应用的习惯，希望能够直接在 wxml 中的标签里使用 JS 代码。微信小程序其实也是可以的，在使用 JS 代码的时候需要用{{}}来包裹起来。

以下是在 wxml 中使用 JS 代码的演示：

<view class="price text-red text-lg">
  {{ Math.floor((data.price * data.discount) * 100) / 100) }}
</view>

上面的演示是对于直接使用 JS 内置的函数或者类。但是对于自定义函数，不能和上面的方式一样。需要创建 wxs 文件，然后 wxml 引入这个文件才可以使用自定义函数。

下面是自定义函数，并引入到 wxml 中的方法：

1）创建 wxs 文件，并自定义函数，最后 module.exports 导出函数：

var calculate = function (decimal) {
  return Math.floor(decimal * 100) / 100
}

module.exports.calculate = calculate

2）在 wxml 文件中引入 wxs 文件：

<wxs src="./utils.wxs" module="utils" />

3）在 wxml 中调用自定义函数：

<view class="price text-red text-lg">
  {{ utils.calculate(data.price * data.discount) }}
</view>