开发小程序时,因为涉及电商类的小程序经常用到小数点后面区几位等一大串问题,因为在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)
}