Applet: How to call a JavaScript function in a wxml page

 

Came here this morning and encountered a bug like this:

2 decimal places are not reserved when calculating the percentage, resulting in some undivided results that are displayed too long

 

 

At first, I thought this was a very common bug, since wxml supports simple operations in the page {{}}, I think it should also support the toFixed() method

So start to change the code and try it out

<text class="vote-item-data-percent">{{(item.vote_count/vote.data.voters_count).toFixed(2)*100}}%</text>

 

Running result: not supported

 

Try another way

Write a public numberToFixed function in the util.js file, and then call it on the page

const numberToFixed = n => {
    n = n.toFixed(2) * 100 + '%'
    return n
}

module.exports = {
    numberToFixed: numberToFixed
}

　　

page call

<text class="vote-item-data-percent">{{util.numberToFixed(item.vote_count/vote.data.voters_count)}}%</text>

　　

Running result: No method found, the page is not effectively imported

 

I found the document and found that it can be solved using the wxs file

Document address: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

 

Through the wxs file, the defined JavaScript function can be called in the wxml page

 

Specific ideas:

Use the wxs file, then add the numberToFix function in the wxs file; then import the wxs file in the wxml page that needs to use the numberToFix method, and then you can
call it by {{numberToFix(persent)}}

 

1# Create a numbertofix.wxs file and create the numberToFix function

var filter = {
  numberToFix: function (value) {
    return value.toFixed(1)
  }
}
module.exports = {
  numberToFix: filter.numberToFix
}

　

2# Introduce the numbertofix.wxs file to the page that needs to use the numberToFix function

<wxs module="filter" src="../../utils/numbertofix.wxs"></wxs>

　　

3# just call

<text class="vote-item-data-percent">{{filter.numberToFix(item.vote_count/vote.data.voters_count*100)}}%</text>

　　

Running result: normal, bug solved