微信小程序在{{ }}中直接使用函数的方法示例
更新时间：2021年06月30日 11:38:55 作者：Halo_yam
最近在学习微信小程序,在学习中遇到了一些问题,所以进行了总结了下,这篇文章主要给大家介绍了关于微信小程序在{{ }}中直接使用函数的相关资料,需要的朋友可以参考下
前言
在微信小程序开发中（原生wxml、wxcss），想直接在{{ }}调用方法处理数据， 但是会报错。如：在项目中涉及到百分比的计算，js浮点数运算会出现精度问题，造成小数位数过多，因此想在模板语法中对值进行相应的处理。
1. 使用
<view>￥{{(money*0.03).toFixed(2)}}手续费(费率3%)</view>
报错，无法直接使用，也不能调用js中的方法。
2. 解决方案
既然{{}}中无法调用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(money*0.03)}}手续费(费率3%)</view>
总结
从vue到小程序，写页面最大的感觉就是，之前vue能用computed实现的一些处理或者methods的方法，可以直接在{{}}中调用，处理某些数据很便捷。微信推出WXS也是弥补了小程序{{}}中不能直接使用js中的方法的不足。另一方面也是提高了小程序的性能，各司其职。
到此这篇关于微信小程序在{{ }}中直接使用函数的文章就介绍到这了,更多相关微信小程序{{ }}使用函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章介绍了javascript 实现键盘上下左右功能的小例子，有需要的朋友可以参考一下2013-09-09
这篇文章主要为大家详细介绍了JavaScript实现大文件分片上传处理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
今天在使用表单是同时使用POST更新、删除操作。然而form表单的 submit 且一旦提交则全部提交，所以想到的实现方法就是 使用button实现,怎么实现呢？下面小编给大家分享JS button按钮实现submit按钮提交效果，感兴趣的朋友参考下吧2016-11-11
Immutable 是 Facebook 开发的不可变数据集合。不可变数据一旦创建就不能被修改，是的应用开发更简单，允许使用函数式编程技术，比如惰性评估。微信小程序无法直接使用Immutable.js，下面就来说说微信小程序如何使用第三方库Immutable.js。2016-09-09
很多网站在做活动时会出现一个截止时间倒计时的提示,下面这篇文章主要给大家介绍了JavaScript实现倒计时功能2种方法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要为大家介绍了uni-app的iPhonex底部安全区域解决方案示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
今天小编就为大家分享一篇layui获取多选框中的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家详细介绍了大转盘抽奖小程序版和网页版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
本篇文章主要介绍了微信小程序-阅读小程序实例（demo），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要介绍了微信小程序引入map组件并在地图上标点,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
最新评论