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

Posted on by

前言

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

1. 使用

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

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

2. 解決方案

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

我們新建一個.wxs文件

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

在.wxml中引入文件：

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

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

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

總結

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

到此這篇關於微信小程序在{{ }}中直接使用函數的文章就介紹到這瞭,更多相關微信小程序{{ }}使用函數內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：