小程序：如何在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更新: 該小程序已上線，歡迎大家使用