微信小程序在{{ }}中直接使用函數的方法示例

前言

在微信小程序開(kāi)發(fā)中（原生wxml、wxcss），想直接在{{ }}調用方法處理數據， 但是會(huì )報錯。如：在項目中涉及到百分比的計算，js浮點(diǎn)數運算會(huì )出現精度問(wèn)題，造成小數位數過(guò)多，因此想在模板語(yǔ)法中對值進(jìn)行相應的處理。

1. 使用

<view>￥{{(money*0.03).toFixed(2)}}手續費(費率3%)</view>

報錯，無(wú)法直接使用，也不能調用js中的方法。

2. 解決方案

既然{{}}中無(wú)法調用js中的函數，那該怎么辦呢？微信提出了一種新的概念，WXS(WeiXin Script) ,小程序的一套腳本語(yǔ)言，可以在WXML的{{}}中調用.wxs的方法。

我們新建一個(gè).wxs文件

// 支持es4語(yǔ)法
var filter = {
	numberToFixed: function(value){
		return value.toFixed(2)
	}
}
// 導出對外暴露的屬性
module.exports = {
	numberToFixed: filter.numberToFixed
}

在.wxml中引入文件：

<!-- 引入.wxs文件 src為相對路徑，module指定當前模塊的名稱(chēng) -->
<wxs module="filter" src="./numberToFixed.wxs"></wxs>

在{{}}中調用.wxs模塊中的方法：

<view>￥{{filter.numberToFixed(money*0.03)}}手續費(費率3%)</view>

總結

從vue到小程序，寫(xiě)頁(yè)面最大的感覺(jué)就是，之前vue能用computed實(shí)現的一些處理或者methods的方法，可以直接在{{}}中調用，處理某些數據很便捷。微信推出WXS也是彌補了小程序{{}}中不能直接使用js中的方法的不足。另一方面也是提高了小程序的性能，各司其職。

到此這篇關(guān)于微信小程序在{{ }}中直接使用函數的文章就介紹到這了,更多相關(guān)微信小程序{{ }}使用函數內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！