小程序:如何在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 ...
随机推荐
- Zabbix 监控 Mysql 状态
简介: 如何使用 Zabbix 来监控 Mysql 状态 ? Zabbix 有自带监控 Mysql 的模板,但是却不能直接使用.. 需要我们根据模板提供的 Key 自己写脚本获取数据 1.查看都有哪些 ...
- Scanner和BufferReader之区别
在Java SE6中我们可知道一个非常方便的输入数据的类Scanner,位于java.util包中,这个Scanner的具体用法为Scanner in = new Scanner(System.in) ...
- shell 脚本的坑
最近都在写shell脚本,免不了遇到每个新手都要填的坑,在这里简单记录一下. test语句的坑 test语句在shell脚本里用的非常多,像if语句后面的其实都是test语句,也是新手最容易遇到坑的地 ...
- Python基础语法习题一
Part 1 习题 1.简述编译型与解释型语言的区别,且分别列出你知道的哪些语言属于编译型,哪些属于解释型 2.执行 Python 脚本的两种方式是什么 3.Pyhton 单行注释和多行注释分别用什么 ...
- Android自定义view与activity的传值
昨晚在写团队项目的时候,遇到一个问题,直到今天早上才解决...即在自定义view"转盘"结束转动后获取结果的处理中,我是想吧值传到activity中的一个textview中的,但我 ...
- Linux 安装elasticsearch、node.js、elasticsearch-head
前提:下载es的安装包 官网可以下载 es官网 安装elasticsearch 1 新建两个文件夹 一个存放安装文件,一个存放解压后的文件 mkdir -p /export/software //存放 ...
- Cocoapods 版本升级
和往常一样使用 Cocoapods ,执行命令: $ pod install #输出信息 /System/Library/Frameworks/Ruby.framework/Versions/2.0/ ...
- Unity3d收藏链接/ 小马哥视频
Unity3d视频教程下载链接: http://pan.baidu.com/s/1kVwFhrh 密码: v6c7 第一部分 https://pan.baidu.com/share/in ...
- 274. H-Index论文引用量
[抄题]: Given an array of citations (each citation is a non-negative integer) of a researcher, write a ...
- SSM项目与Shiro项目的整合(单体式项目)
1.项目的包结构: 2.jar包,配置文件及工具类 2.1pom.xml的配置 <?xml version="1.0" encoding="UTF-8"? ...