小程序:如何在wxml页面中调用JavaScript函数
早上过来遇到一个这样的bug:
在计算百分比的时候没有保留小数点后2位,从而导致一些无法整除的结果显示太长
一开始,我以为这是一个很普通的bug,既然wxml在页面{{}}内支持简单的运算,我想也应该会支持toFixed()方法
于是动手改代码,试试看
<text class="vote-item-data-percent">{{(item.vote_count/vote.data.voters_count).toFixed(2)*100}}%</text>
运行结果:不支持
换一种方法试试看
在util.js文件里面写一个公共的numberToFixed函数,然后在页面调用
const numberToFixed = n => {
n = n.toFixed(2) * 100 + '%'
return n
} module.exports = {
numberToFixed: numberToFixed
}
页面调用
<text class="vote-item-data-percent">{{util.numberToFixed(item.vote_count/vote.data.voters_count)}}%</text>
运行结果:找不到方法,页面没有有效引入
找了一下文档,发现可以使用wxs文件解决
文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/
通过使用wxs文件,实现在wxml页面中调用自定义的JavaScript函数
具体思路:
使用到wxs文件,然后在wxs文件里面添加numberToFix函数;然后在需要使用numberToFix方法的wxml页面引入该wxs文件,然后就可以通过{{numberToFix(persent)}}这种方式调用了
1# 创建一个numbertofix.wxs文件,创建numberToFix函数
var filter = {
numberToFix: function (value) {
return value.toFixed(1)
}
}
module.exports = {
numberToFix: filter.numberToFix
}
2# 在需要使用numberToFix函数的页面引入numbertofix.wxs文件
<wxs module="filter" src="../../utils/numbertofix.wxs"></wxs>
3# 调用即可
<text class="vote-item-data-percent">{{filter.numberToFix(item.vote_count/vote.data.voters_count*100)}}%</text>
运行结果:正常,bug解决
2018/05/10更新: 该小程序已上线,欢迎大家使用
小程序:如何在wxml页面中调用JavaScript函数的更多相关文章
- 如何在C语言中调用Swift函数
在Apple官方的<Using Swift with Cocoa and Objectgive-C>一书中详细地介绍了如何在Objective-C中使用Swift的类以及如何在Swift中 ...
- 微信小程序wxml文件中调用自定义函数
想在微信小程序的wxml文件里自如的像vue那样调用自定义的方法,发现并不成功,得利用WXS脚本语言. WXS脚本语言是 WeiXin Script 脚本语言的简称,是JavaScript.JSON. ...
- 在COM组件中调用JavaScript函数
转载自: http://blog.csdn.net/cheungmine/article/details/1451489 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS) ...
- 微信小程序——页面中调用组件方法
我现在有一个弹层的组件(popup),组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法. 我们如何在调用组件的页面中调用组件里面的方法呢? 在调用组件的页面写如下代码 ...
- 微信小程序:其中wxml和wxss的样式说明
微信小程序:其中wxml和wxss的样式说明 一.简介 对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了 ...
- 一步一步学Silverlight 2系列(21):如何在Silverlight中调用JavaScript
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
- 小程序swiper实现订单页面
小程序swiper实现订单页面 myOrder.wxml <!--pages/myorder/myorder.wxml--> <view class="swiper-tab ...
随机推荐
- Dubbo限制大数据传输的解决方案
当service层向web层传输大数据容量的对象时,会受到Dubbo的限制,报类似如下异常: com.alibaba.dubbo.remoting.transport.AbstractCodec.ch ...
- sublime +react+es6开发环境
Babel Sublime3才有的插件,支持ES6.JSX语法高亮. 菜单->View->Syntax->Open all with current extension as...- ...
- 封装basedao及动态创建新类型的java数组
package com.huawei.base; import java.io.Serializable;import java.lang.reflect.Array;import java.lang ...
- 前端 webpack
前端 webpack http://www.cnblogs.com/lvdabao/
- windows系统mysql-5.7.19官方绿色版zip包安装教程
环境: 系统环境 Windows 10 64位 mysql版本 5.7.19 一.万变不离的下载 下载页面:https://dev.mysql.com/downloads/mysql/ 点击 Down ...
- shiro 集成spring 配置 学习记录(一)
首先当然是项目中需要增加shiro的架包依赖: <!-- shiro --> <dependency> <groupId>org.apache.shiro</ ...
- Git blame
一.简介 git blame可以将文件中的每一行的作者.最新的变更提交和提交时间展示出来. 二.实例 http://blog.csdn.net/hudashi/article/details/76 ...
- Redis学习(3)——认识配置文件redis.conf[转]
#是否作为守护进程运行 daemonize yes #配置 pid 的存放路径及文件名,默认为当前路径下 pidfile redis.pid #Redis 默认监听端口 port 6379 ...
- EZOJ #227
传送门 分析 我们发现第一段数和最后一段数对答案的贡献系数为1/-1,其余为0/2/-2 而且对于相邻两段不能系数均非0 于是可以dp 代码 #include<iostream> #inc ...
- vmware workstation 12 密钥
VMware Workstation 12序列号:5A02H-AU243-TZJ49-GTC7K-3C61N