微信小程序在{{ }}中直接使用函数的方法示例

 更新时间: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中的方法的不足。另一方面也是提高了小程序的性能,各司其职。

到此这篇关于微信小程序在{{ }}中直接使用函数的文章就介绍到这了,更多相关微信小程序{{ }}使用函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js和jquery中循环的退出和继续下一个循环

    js和jquery中循环的退出和继续下一个循环

    退出循环,使用break;退出当前循环继续下一个循环,使用continue,jquery中使用return false;continue,使用return true
    2014-09-09
  • js控制多图左右滚动切换效果代码分享

    js控制多图左右滚动切换效果代码分享

    这篇文章主要介绍了js控制多图左右滚动切换效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • js计算两个时间差 天 时 分 秒 毫秒的代码

    js计算两个时间差 天 时 分 秒 毫秒的代码

    这篇文章主要介绍了js计算两个时间差 天 时 分 秒 毫秒的实例代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-05-05
  • js实现方块上下左右移动效果

    js实现方块上下左右移动效果

    这篇文章主要为大家详细介绍了js实现方块上下左右移动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JavaScript实战之带收放动画效果的导航菜单

    JavaScript实战之带收放动画效果的导航菜单

    这篇文章主要为大家详细介绍了JavaScript实战之带收放动画效果的导航菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 深度解析JavaScript中的filter()方法

    深度解析JavaScript中的filter()方法

    在JavaScript中,filter()是一个数组方法,用于从数组中过滤出符合特定条件的元素,并返回一个新数组,本文将带大家深度解析JavaScript中的filter()方法,需要的朋友可以参考下
    2023-09-09
  • 微信小程序picker选择器获取值的2种方法示例

    微信小程序picker选择器获取值的2种方法示例

    picker为用户提供了多个选择,用户选了其中一种,但仍是需要有东西去告诉后台用户选了什么,下面这篇文章主要给大家介绍了关于微信小程序picker选择器获取值的2种方法,需要的朋友可以参考下
    2023-03-03
  • JavaScript实现英语单词题库

    JavaScript实现英语单词题库

    这篇文章主要为大家详细介绍了JavaScript实现英语单词题库,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • JS的千分位算法实现思路

    JS的千分位算法实现思路

    本文为大家讲解下JS的千分位算法的具体实现,先去除空格,判断是否空值和非数;针对是否有小数点,分情况处理;感兴趣的朋友可以参考下
    2013-07-07
  • 提高网站信任度的技巧

    提高网站信任度的技巧

    网站信任度:一方面指浏览者对于站点的信任程度,另一方面指搜索引擎对于网站的信任值(TrustRank),网站信任度对于企业站点更为重要.在得到更高信任度的同时,流量更容易转化为实在的收入.
    2008-10-10

最新评论