在 WXML 中直接使用 JS 代码

2022-11-03,,

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

在 WXML 中直接使用 JS 代码的相关教程结束。

《在 WXML 中直接使用 JS 代码.doc》

下载本文的Word格式文档,以方便收藏与打印。