早上过来遇到一个这样的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. Dubbo限制大数据传输的解决方案

    当service层向web层传输大数据容量的对象时,会受到Dubbo的限制,报类似如下异常: com.alibaba.dubbo.remoting.transport.AbstractCodec.ch ...

  2. sublime +react+es6开发环境

    Babel Sublime3才有的插件,支持ES6.JSX语法高亮. 菜单->View->Syntax->Open all with current extension as...- ...

  3. 封装basedao及动态创建新类型的java数组

    package com.huawei.base; import java.io.Serializable;import java.lang.reflect.Array;import java.lang ...

  4. 前端 webpack

    前端 webpack http://www.cnblogs.com/lvdabao/

  5. windows系统mysql-5.7.19官方绿色版zip包安装教程

    环境: 系统环境 Windows 10 64位 mysql版本 5.7.19 一.万变不离的下载 下载页面:https://dev.mysql.com/downloads/mysql/ 点击 Down ...

  6. shiro 集成spring 配置 学习记录(一)

    首先当然是项目中需要增加shiro的架包依赖: <!-- shiro --> <dependency> <groupId>org.apache.shiro</ ...

  7. Git blame

    一.简介 git blame可以将文件中的每一行的作者.最新的变更提交和提交时间展示出来.   二.实例 http://blog.csdn.net/hudashi/article/details/76 ...

  8. Redis学习(3)——认识配置文件redis.conf[转]

    #是否作为守护进程运行  daemonize yes  #配置 pid 的存放路径及文件名,默认为当前路径下  pidfile redis.pid  #Redis 默认监听端口  port 6379  ...

  9. EZOJ #227

    传送门 分析 我们发现第一段数和最后一段数对答案的贡献系数为1/-1,其余为0/2/-2 而且对于相邻两段不能系数均非0 于是可以dp 代码 #include<iostream> #inc ...

  10. vmware workstation 12 密钥

    VMware Workstation 12序列号:5A02H-AU243-TZJ49-GTC7K-3C61N