微信小程序在{{ }}中直接使用函數(shù)的方法示例
前言
在微信小程序開發(fā)中（原生wxml、wxcss），想直接在{{ }}調(diào)用方法處理數(shù)據(jù)， 但是會(huì)報(bào)錯(cuò)。如：在項(xiàng)目中涉及到百分比的計(jì)算，js浮點(diǎn)數(shù)運(yùn)算會(huì)出現(xiàn)精度問題，造成小數(shù)位數(shù)過多，因此想在模板語法中對(duì)值進(jìn)行相應(yīng)的處理。
1. 使用
<view>￥{{(money*0.03).toFixed(2)}}手續(xù)費(fèi)(費(fèi)率3%)</view>
報(bào)錯(cuò)，無法直接使用，也不能調(diào)用js中的方法。
2. 解決方案
既然{{}}中無法調(diào)用js中的函數(shù)，那該怎么辦呢？微信提出了一種新的概念，WXS(WeiXin Script) ,小程序的一套腳本語言，可以在WXML的{{}}中調(diào)用.wxs的方法。
我們新建一個(gè).wxs文件
// 支持es4語法
var filter = {
numberToFixed: function(value){
return value.toFixed(2)
}
}
// 導(dǎo)出對(duì)外暴露的屬性
module.exports = {
numberToFixed: filter.numberToFixed
}
在.wxml中引入文件：
<!-- 引入.wxs文件 src為相對(duì)路徑，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實(shí)現(xiàn)的一些處理或者methods的方法，可以直接在{{}}中調(diào)用，處理某些數(shù)據(jù)很便捷。微信推出WXS也是彌補(bǔ)了小程序{{}}中不能直接使用js中的方法的不足。另一方面也是提高了小程序的性能，各司其職。
到此這篇關(guān)于微信小程序在{{ }}中直接使用函數(shù)的文章就介紹到這了,更多相關(guān)微信小程序{{ }}使用函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序開發(fā)之自定義tabBar的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序開發(fā)之自定義tabBar的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
本文主要介紹了Mac下使用charles遇到的問題以及解決辦法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JavaScript實(shí)現(xiàn)移動(dòng)端帶transition動(dòng)畫的輪播效果
這篇文章主要介紹了JavaScript原生實(shí)現(xiàn)帶transition動(dòng)畫的自動(dòng)+手動(dòng)輪播效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
css的定位設(shè)置代碼2008-12-12
微信小程序如何實(shí)現(xiàn)頁面跳轉(zhuǎn)功能詳解
這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)頁面跳轉(zhuǎn)功能的相關(guān)資料,包括頁面跳轉(zhuǎn)的方式、跳轉(zhuǎn)傳參的方法以及頁面返回的操作,通過簡(jiǎn)單的代碼示例,幫助讀者快速掌握微信小程序頁面跳轉(zhuǎn)的基本用法,下面需要的朋友可以參考下2023-03-03
基于JavaScript實(shí)現(xiàn)數(shù)碼時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)數(shù)碼時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07![[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解](http://img.jbzj.com/images/xgimg/bcimg6.png)
[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解
下面小編就為大家?guī)硪黄猍js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了JS建造者模式基本用法,以一個(gè)完整實(shí)例形式較為詳細(xì)的分析了javascript建造者模式的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-06-06
JavaScript實(shí)現(xiàn)文字與圖片拖拽效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)文字與圖片拖拽效果的方法,涉及javascript操作文字與圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
瀏覽器圖片選擇預(yù)覽、旋轉(zhuǎn)、批量上傳的JS代碼實(shí)現(xiàn)
這篇文章主要介紹了瀏覽器圖片選擇預(yù)覽、旋轉(zhuǎn)、批量上傳的JS代碼實(shí)現(xiàn)，有需要的朋友可以參考一下2013-12-12