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

{{ }} で関数を直接使用する 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を応援してください。

<<:  Nginx がリクエストを処理する際のマッチングルールの詳細な分析

>>:  MySQL 5.7.18 Green Edition のダウンロードとインストールのチュートリアル

推薦する

2048 ゲームを実装するためのネイティブ js

2048ミニゲーム、参考までに具体的な内容は以下のとおりですまず、2048ゲームは16のグリッドか...

Dockerイメージ解析ツールのダイブ原理解析

今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...

閲覧時に作成されたWebページの下部にある余分な空白スペースを削除する方法

Dreamweaver または FrontPage を使用して HTML Web ページを作成する場...

MySQL の悲観的ロックと楽観的ロックの使用例

悲観的ロック悲観的ロックは、データを悲観的であるとみなします。データをクエリするときに、ロックを追加...

VMware 15 仮想マシンに Ubuntu 18.04 をインストールするグラフィック チュートリアル

ここ数年、私は自動化とコンピューターを行ったり来たりしてきました。最近は、機械学習に関連するプロジェ...

MySQLの結合の基本原理についての簡単な説明

目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...

フロントエンドJavaScriptのクラス

目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...

Python ベースの MySQL レプリケーション ツールの詳細な説明

目次1. はじめに2回目の練習2.1 インストールと設定2.2 コアクラスの紹介2.3 使い方は? ...

DockerコンテナでArthasを使用するための詳細な手順

Arthas はあなたのために何ができるでしょうか? Arthas 、開発者に深く愛されている Al...

...

jsはウォーターフォールフローのボトムアウトによるデータの動的ロードを実現します

この記事では、ウォーターフォールフローが底に達したときにデータを動的にロードするためのjsの具体的な...

nginx 用の zabbix 5.0 をインストールして展開する方法

目次実験環境インストールと展開データベースをインストールして設定します (ここでは mariadb ...

Dockerでローカルマシン(ホストマシン)にアクセスする方法

質問Docker でローカル データベースにアクセスするにはどうすればよいでしょうか? 127.0....

dockerを使用してGrafana+Prometheus構成をデプロイする

docker-compose-monitor.yml バージョン: '2' ネットワ...

ノードをMySQLデータベースに接続する際に発生する問題と解決策

今日、MySQL の新しいバージョン (8.0.21) をインストールしましたが、ノード フレームワ...