{{ }} で関数を直接使用する WeChat アプレットの例

序文

WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソッドを呼び出してデータを処理したいのですが、エラーが報告されます。たとえば、プロジェクトでパーセンテージを計算する場合、js の浮動小数点演算によって精度の問題が発生し、小数点以下の桁数が多すぎる可能性があります。そのため、テンプレート構文で値を適切に処理する必要があります。

1. 使用

<view>￥{{(money*0.03).toFixed(2)}} 手数料（利率 3%）</view>

エラーが報告され、直接使用することも、js 内のメソッドを呼び出すこともできません。

2. 解決策

js 内の関数は {{}} 内で呼び出すことができないので、どうすればよいでしょうか? WeChat は、WXML の {{}} で .wxs メソッドを呼び出すことができるミニプログラム用のスクリプト言語である WXS (WeiXin Script) という新しい概念を提案しました。

新しい.wxsファイルを作成します

// es4構文をサポート var filter = {
	numberToFixed: 関数(値){
		戻り値.toFixed(2)
	}
}
// 外部に公開されたプロパティをエクスポート module.exports = {
	固定数: filter.固定数
}

.wxml 形式のファイルをインポートします。

<!-- .wxs ファイル src を相対パスとしてインポートし、module は現在のモジュールの名前を指定します -->
<wxs モジュール="フィルター" src="./numberToFixed.wxs"></wxs>

{{}} の .wxs モジュールのメソッドを呼び出します。

<view>手数料￥{{filter.numberToFixed(money*0.03)}}（手数料率3％）</view>

要約する

Vue からミニプログラムまで、ページを作成するときに最も感じる点は、Vue が以前は computed を使用して実装できた一部の処理やメソッドを {{}} で直接呼び出すことができるようになったことです。これにより、特定のデータを処理するのに非常に便利になります。 WeChat は、js のメソッドをミニプログラムで直接使用できないという欠点を補うために WXS をリリースしました {{}}。一方、それぞれが独自の機能を実行するミニプログラムのパフォーマンスも向上します。

WeChatミニプログラムが{{ }}で直接関数を使用する方法についてはこれで終わりです。WeChatミニプログラムが{{ }}で関数を使用する方法の詳細については、123WORDPRESS.COMで以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。