早上过来遇到一个这样的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函数的更多相关文章

  1. 如何在C语言中调用Swift函数

    在Apple官方的<Using Swift with Cocoa and Objectgive-C>一书中详细地介绍了如何在Objective-C中使用Swift的类以及如何在Swift中 ...

  2. 微信小程序wxml文件中调用自定义函数

    想在微信小程序的wxml文件里自如的像vue那样调用自定义的方法,发现并不成功,得利用WXS脚本语言. WXS脚本语言是 WeiXin Script 脚本语言的简称,是JavaScript.JSON. ...

  3. 在COM组件中调用JavaScript函数

    转载自: http://blog.csdn.net/cheungmine/article/details/1451489 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS) ...

  4. 微信小程序——页面中调用组件方法

    我现在有一个弹层的组件(popup),组件里面定义了显示组件(showPopup)和隐藏组件(hidePopup)的方法. 我们如何在调用组件的页面中调用组件里面的方法呢? 在调用组件的页面写如下代码 ...

  5. 微信小程序:其中wxml和wxss的样式说明

    微信小程序:其中wxml和wxss的样式说明 一.简介 对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了 ...

  6. 一步一步学Silverlight 2系列(21):如何在Silverlight中调用JavaScript

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  7. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  8. 小程序webview跳转页面后没有返回按钮完美解决方案

    随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...

  9. 小程序swiper实现订单页面

    小程序swiper实现订单页面 myOrder.wxml <!--pages/myorder/myorder.wxml--> <view class="swiper-tab ...

随机推荐

  1. Zabbix 监控 Mysql 状态

    简介: 如何使用 Zabbix 来监控 Mysql 状态 ? Zabbix 有自带监控 Mysql 的模板,但是却不能直接使用.. 需要我们根据模板提供的 Key 自己写脚本获取数据 1.查看都有哪些 ...

  2. Scanner和BufferReader之区别

    在Java SE6中我们可知道一个非常方便的输入数据的类Scanner,位于java.util包中,这个Scanner的具体用法为Scanner in = new Scanner(System.in) ...

  3. shell 脚本的坑

    最近都在写shell脚本,免不了遇到每个新手都要填的坑,在这里简单记录一下. test语句的坑 test语句在shell脚本里用的非常多,像if语句后面的其实都是test语句,也是新手最容易遇到坑的地 ...

  4. Python基础语法习题一

    Part 1 习题 1.简述编译型与解释型语言的区别,且分别列出你知道的哪些语言属于编译型,哪些属于解释型 2.执行 Python 脚本的两种方式是什么 3.Pyhton 单行注释和多行注释分别用什么 ...

  5. Android自定义view与activity的传值

    昨晚在写团队项目的时候,遇到一个问题,直到今天早上才解决...即在自定义view"转盘"结束转动后获取结果的处理中,我是想吧值传到activity中的一个textview中的,但我 ...

  6. Linux 安装elasticsearch、node.js、elasticsearch-head

    前提:下载es的安装包 官网可以下载 es官网 安装elasticsearch 1 新建两个文件夹 一个存放安装文件,一个存放解压后的文件 mkdir -p /export/software //存放 ...

  7. Cocoapods 版本升级

    和往常一样使用 Cocoapods ,执行命令: $ pod install #输出信息 /System/Library/Frameworks/Ruby.framework/Versions/2.0/ ...

  8. Unity3d收藏链接/ 小马哥视频

      Unity3d视频教程下载链接: http://pan.baidu.com/s/1kVwFhrh 密码: v6c7     第一部分  https://pan.baidu.com/share/in ...

  9. 274. H-Index论文引用量

    [抄题]: Given an array of citations (each citation is a non-negative integer) of a researcher, write a ...

  10. SSM项目与Shiro项目的整合(单体式项目)

    1.项目的包结构: 2.jar包,配置文件及工具类 2.1pom.xml的配置 <?xml version="1.0" encoding="UTF-8"? ...