微信小程序在{{ }}中直接使用函数的方法示例
前言
在微信小程序开发中(原生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中的方法的不足。另一方面也是提高了小程序的性能,各司其职。
到此这篇关于微信小程序在{{ }}中直接使用函数的文章就介绍到这了,更多相关微信小程序{{ }}使用函数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
相关推荐
-
微信小程序在{{ }}中直接使用函数的方法示例
前言 在微信小程序开发中(原生wxml.wxcss),想直接在{{ }}调用方法处理数据, 但是会报错.如:在项目中涉及到百分比的计算,js浮点数运算会出现精度问题,造成小数位数过多,因此想在模板语法中对值进行相应的处理. 1. 使用 <view>¥{{(money*0.03).toFixed(2)}}手续费(费率3%)</view> 报错,无法直接使用,也不能调用js中的方法. 2. 解决方案 既然{{}}中无法调用js中的函数,那该怎么办呢?微信提出了一种新的概念,WXS(We
-
微信小程序实现实时圆形进度条的方法示例
前言 最近工作中为了做一个录制按钮,研究了下小程序的实时圆形进度条实现,下面这篇文章就来给大家详细的介绍了实现的方法示例,废话不多说,先来看看效果图吧. 效果图如下 初始状态 点击中间按钮开始绘制 绘制过程 绘制结束 实现思路 建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条. WXML代码 <view class="wrap"> <view class="circle-box"> <canvas class
-
微信小程序实现传参数的几种方法示例
前言 首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小程序的传参数,话不多说了,来一起看看详细的介绍吧. 一.navigator 跳转时 wxml页面(参数多时可用"&") <navigator url='../index/index?id=1&name=aaa'></navigator> 或者添加点击事件,js用navig
-
微信小程序实现点击空白隐藏的方法示例
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: 1.蒙层的结构: <!-- 购物车蒙层 --> <view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'> //mengShow是蒙层是否显示的标志,然后蒙层绑定outbtn的点击事件 <view
-
微信小程序 定义全局数据、函数复用、模版等详细介绍
微信小程序 定义全局数据.函数复用.模版等问题总结: 1.如何定义全局数据 在app.js的App({})中定义的数据或函数都是全局的,在页面中可以通过var app = getApp(); app.function/key的方式调用,不过我们没有必要再app.js中定义全局函数. 2.如何实现代码的复用 函数的复用: test.js test: function(){ } module.exports={ test:test } other.js var common = require('
-
微信小程序 开发中遇到问题总结
微信小程序 开发中遇到问题总结 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function(){ let that = this; wx.request({ url: 'https://a.com/url.php', method: 'GET', success: function(e){ that.data = 123; } }) }; }) //conte
-
微信小程序Page中data数据操作和函数调用方法
Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. //index.js Page({ data: { text: "This is page data.", sliderOffset: 0, sliderLeft: 0, state:{ genre:[], genre_index: 0, model:[], model_index: 0, terminalStatus:'', } }, onLoad: functio
-
微信小程序开发中var that =this的用法详解
在微信小程序开发中,var that =this的声明很常见.举个例子,代码如下! 示例代码1 //index.js Page({ data: { toastHidden: true, }, loadData: function () { var that = this//这里声明了that:将this存在that里面 wx.request({ url: 'test.php', data: {a: 'a', b: 'b'}, header: { 'content-type': 'applicat
-
微信小程序 数组中的push与concat的区别
微信小程序 数组中的push与concat的区别 前言: 微信小程序中需要用到数组的操作,介于本人js基础薄弱,故数组操作进行简单记录,以备后期方便学习: push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(1); arr.push(2); arr.push([3, 4]) arr.push(5, 6); arr = arr.concat(7); arr = arr.concat([8, 9]); arr = arr.concat(
-
详解微信小程序Page中data数据操作和函数调用
微信小程序Page中data数据获取和设置 一.Page中data数据的获取和设置: 1.设置data数据 this.setData(object) setData() 参数格式:接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value.其中 key 可以非常灵活,以数据 路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义. this.setData({ ; en
随机推荐
- SqlServer类似正则表达式的字符处理问题
- Mysql中复制详细解析
- AngularJS入门教程之双向绑定详解
- 详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
- 正则应用之 日期正则表达式
- ASP中过滤UBB和Html标签
- Python绑定方法与非绑定方法详解
- DB2比较常用与实用sql语句总结
- ASP数据库连接方式大全
- win x64下安装oracle 12c出现INS-30131报错的解决方法
- react中的ajax封装实例详解
- JavaScript delete 属性的使用
- Java中四种XML解析技术
- JavaScript学习笔记整理_关于表达式和语句
- Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
- Nginx中报错:Permission denied与Connection refused的解决
- Java 多线程实例详解(二)
- C#自动设置IE代理服务器(翻墙软件)代码实现
- Python Flask-web表单使用详解
- python实现百度语音识别api