因为有在 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>