WeChat applet example of using functions directly in {{ }}

Preface

In WeChat applet development (native wxml, wxcss), I want to call methods directly in {{ }} to process data, but an error will be reported. For example, when calculating percentages in a project, js floating-point operations may cause precision problems, resulting in too many decimal places. Therefore, you want to process the values ​​accordingly in the template syntax.

1. Use

<view>￥{{(money*0.03).toFixed(2)}} handling fee (rate 3%)</view>

An error is reported and it cannot be used directly, nor can the methods in js be called.

2. Solution

Since functions in js cannot be called in {{}}, what should we do? WeChat has proposed a new concept, WXS (WeiXin Script), a scripting language for mini-programs that can call .wxs methods in WXML's {{}}.

We create a new .wxs file

// Support es4 syntax var filter = {
	numberToFixed: function(value){
		return value.toFixed(2)
	}
}
// Export externally exposed properties module.exports = {
	numberToFixed: filter.numberToFixed
}

Import the file in .wxml:

<!-- Import the .wxs file src as a relative path, module specifies the name of the current module-->
<wxs module="filter" src="./numberToFixed.wxs"></wxs>

Call the method in the .wxs module in {{}}:

<view>￥{{filter.numberToFixed(money*0.03)}} handling fee (rate 3%)</view>

Summarize

From Vue to Mini Programs, the biggest feeling when writing pages is that some processing or methods that Vue could previously implement with computed can now be called directly in {{}}, which makes it very convenient to process certain data. WeChat launched WXS to make up for the shortcoming that methods in js cannot be directly used in mini-programs {{}}. On the other hand, it also improves the performance of mini programs, each of which performs its own functions.

This is the end of this article about how WeChat Mini Programs use functions directly in {{ }}. For more information about how WeChat Mini Programs use functions in {{ }}, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!