小程序

微信小程序 保留小数点后两位数的方法及转化为字符串的方法

2023-01-04

开发小程序时,因为涉及电商类的小程序经常用到小数点后面区几位等一大串问题,因为在wxml中不能直接使用较高级的js语法,如‘.toFixed’,‘toString()’,但是可以通过引入wxs模块实现这种效果。基本实现步骤如下


1、在小程序根目录新建filter文件夹,名字随便叫

2、在filter文件夹里新建文件  filter.wxs,也可以叫别的名字

3、在filter.wxs里写入下面代码

var filters={

    toFix:function(value){

        return value.toFixed(2)

    },

    toStr:function(value){

        return value.toString()

    },

    toNum:function(value){

        return value.toNumber()

    }

}


//暴露接口调用

module.exports = {

  toFix:filters.toFix,

  toStr:filters.toStr,

  toNum:filters.toNum

};


4、WXML中引入WXS

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

5、在WXML中使用

<view> {{ filters.toFix(price) }} </view>


其他如toString(),toNumber()也可用此类似方法

如商品价格保留两位小数,原代码及修改后有代码对应如下


修改小数前格式样式 {{item.price*item.num}}

修改后样式 {{filters.toFix(item.price*item.num)}}


6、有时候会提示错误:TypeError: Cannot read property 'toFixed' of undefined

保留两位小数出现报错TypeError: Cannot read property ‘toFixed’ of undefined

原因是认为 value进去时是个字符串,只要把value转成int类型就行了:

toFix:function(value){

    var val=parseInt(value)

    return val.toFixed(2)

}

或者把value乘以1,

toFix:function(value){

    var val=value*1

    return val.toFixed(2)

}