微信小程序在{{ }}中直接使用函數(shù)的方法示例
前言
在微信小程序開發(fā)中(原生wxml、wxcss),想直接在{{ }}調(diào)用方法處理數(shù)據(jù), 但是會報錯。如:在項目中涉及到百分比的計算,js浮點(diǎn)數(shù)運(yùn)算會出現(xiàn)精度問題,造成小數(shù)位數(shù)過多,因此想在模板語法中對值進(jìn)行相應(yīng)的處理。
1. 使用
<view>¥{{(money*0.03).toFixed(2)}}手續(xù)費(fèi)(費(fèi)率3%)</view>
報錯,無法直接使用,也不能調(diào)用js中的方法。
2. 解決方案
既然{{}}中無法調(diào)用js中的函數(shù),那該怎么辦呢?微信提出了一種新的概念,WXS(WeiXin Script) ,小程序的一套腳本語言,可以在WXML的{{}}中調(diào)用.wxs的方法。
我們新建一個.wxs文件
// 支持es4語法 var filter = { numberToFixed: function(value){ return value.toFixed(2) } } // 導(dǎo)出對外暴露的屬性 module.exports = { numberToFixed: filter.numberToFixed }
在.wxml中引入文件:
<!-- 引入.wxs文件 src為相對路徑,module指定當(dāng)前模塊的名稱 --> <wxs module="filter" src="./numberToFixed.wxs"></wxs>
在{{}}中調(diào)用.wxs模塊中的方法:
<view>¥{{filter.numberToFixed(money*0.03)}}手續(xù)費(fèi)(費(fèi)率3%)</view>
總結(jié)
從vue到小程序,寫頁面最大的感覺就是,之前vue能用computed實現(xiàn)的一些處理或者methods的方法,可以直接在{{}}中調(diào)用,處理某些數(shù)據(jù)很便捷。微信推出WXS也是彌補(bǔ)了小程序{{}}中不能直接使用js中的方法的不足。另一方面也是提高了小程序的性能,各司其職。
到此這篇關(guān)于微信小程序在{{ }}中直接使用函數(shù)的文章就介紹到這了,更多相關(guān)微信小程序{{ }}使用函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 實現(xiàn)鍵盤上下左右功能的小例子
這篇文章介紹了javascript 實現(xiàn)鍵盤上下左右功能的小例子,有需要的朋友可以參考一下2013-09-09JS button按鈕實現(xiàn)submit按鈕提交效果
今天在使用表單是同時使用POST更新、刪除操作。然而form表單的 submit 且一旦提交則全部提交,所以想到的實現(xiàn)方法就是 使用button實現(xiàn),怎么實現(xiàn)呢?下面小編給大家分享JS button按鈕實現(xiàn)submit按鈕提交效果,感興趣的朋友參考下吧2016-11-11大轉(zhuǎn)盤抽獎小程序版 轉(zhuǎn)盤抽獎網(wǎng)頁版
這篇文章主要為大家詳細(xì)介紹了大轉(zhuǎn)盤抽獎小程序版和網(wǎng)頁版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-01-01微信小程序引入map組件并在地圖上標(biāo)點(diǎn)的實現(xiàn)代碼
這篇文章主要介紹了微信小程序引入map組件并在地圖上標(biāo)點(diǎn),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10