WeChat アプレットの WXML テンプレート構文の概要

この記事では、WeChat ミニ プログラム に関する関連知識を提供します。主に、データ バインディング、イベント バインディング、条件付きレンダリング、リスト レンダリング、その他の問題など、WXML テンプレート構文に関する関連コンテンツを紹介します。以下をご覧ください。皆さんのお役に立てれば幸いです。

【関連する学習の推奨事項: 小さなプログラム学習チュートリアル】

WXML テンプレート構文- データ バインディング

1. データ バインディングの基本原則

① データを data で定義する #②

WXML

2.

In# でデータを使用する ## でページのデータを定義しますデータ ページに対応する

.js ファイルで、データを定義します。## に移動するだけです。 #データ オブジェクト:

3. 口ひげ

文法形式

##data

にデータをバインドします。ページ内でレンダリングするには、## を使用します。 #Mustache 構文 (二重中括弧) で変数を囲みます。 vue の補間式と同様に、構文形式は次のとおりです: 4. Mustache

文法の応用シナリオ

バインディングコンテンツバインディング属性

演算 (三項演算、算術演算など)

3. 5.

動的バインディング コンテンツ

データの # ページは次のとおりです:

ページの構造は次のとおりです。

## ページのデータは次のとおりです:

Q

7.

三項演算

ページのデータは次のとおりです。

構造ページの内容は次のとおりです:

#8.

算術操作

##WXML テンプレート構文

- イベント バインディング: 1. イベントとは

イベントは コミュニケーション手段ですレンダリング層からロジック層まで#。イベントを通じて、レンダリング層でのユーザーの動作をロジック層にフィードバックして業務処理を行うことができます。

2.

ミニ プログラムでよく使用されるイベント

タイプ

#イベント説明 または bind:##change

Tied 定義メソッド

tap

bindtap

tap

指が触れてすぐに離れます。これは、HTML # の クリック ## と同様です。イベント＃＃＃＃＃＃

#input

##bindinput

または bind:input

テキスト ボックスの入力イベント

bindchange

または

bind:change

ステータス変更時にトリガーされます

3. イベントオブジェクトの属性リスト

## イベントコールバックがトリガーされると、イベント オブジェクト event が受信されます。その詳細な属性は次の表に示すとおりです。 #属性

追加情報##changedTouches

##タイプ	#説明	タイプ 文字列
イベント タイプ	timeStamp	Integer
ページが開くミリ秒数イベントがトリガーされるまでの経過	##target	Object
#イベントをトリガーするコンポーネントのいくつかのプロパティ値のコレクション	currentTarget	Object
#いくつかの属性値のコレクション現在のコンポーネントの	##詳細	##オブジェクト
	タッチ	#配列	タッチイベント、現在画面上にあるタッチポイント情報の配列
##配列	##タッチイベント、現在変更されているタッチポイント情報の配列	## 4. ターゲット と currentTarget ## の違いtarget はイベントをトリガーした ソース コンポーネント であり、currentTarget は 現在のイベントがバインドされているコンポーネント。例: ##内部ボタンをクリックすると、クリック イベントが発生します。 バブル 外部拡散は、また、外側の view の tap イベント処理関数もトリガーします。 現時点では、外側の ビュー : 1 。 target は、イベントをトリガーしたソース コンポーネントを指します。したがって、 e.target は、内部ボタン コンポーネント #2 .currentTarget は、現在イベントをトリガーしているコンポーネントを指します。したがって、e.currentTarget は現在の view Component ##5. 構文バインドタップのフォーマット ## はミニ プログラム #HTML ## には存在しません。 onclick # のマウス クリック イベントは、tap イベント を通じてユーザーのタッチ動作に応答します。 ① bindtap を通じて、コンポーネントをバインドできます tap Touch イベントの構文は次のとおりです。 # ② # 内ページの ##.js 対応するイベント処理関数はファイル内で定義されており、イベント パラメーターは仮パラメーター event を介して渡されます。 (通常、 は e と省略されます) 受信するには: 6. イベント ハンドラー関数の は data this.setData(dataObject) メソッドを呼び出すことで、ページにデータを割り当てることができます。 data のデータが再割り当てされます。例は次のとおりです: 7. イベントパラメータの受け渡し イベントをバインドするときは、パラメータ をイベント処理関数に渡します。たとえば、次のコードは正しく動作しません: アプレットは bindtap の属性値は一律にイベント名として扱われます。これは、btnHandler(123) という名前のイベント処理関数を呼び出すのと同じです。 コンポーネントに data-# を指定できます。ここで、 * はパラメータの名前 。サンプル コードは次のとおりです: 最後に: 1 情報 は として解析されます パラメータの名前 2 値 2 は パラメータの値に解析されます。 イベント処理関数で、event.target.dataset.# を渡します。 ##パラメータ名特定のパラメータ の値を取得できます。サンプルコードは次のとおりです。 #8. bindinput の構文形式 ##ミニ プログラムでは、 input event を通じてテキスト ボックスの入力イベントに応答します。構文形式は次のとおりです。① bindinput を通じて、入力イベントをテキスト ボックスにバインドできます。 ②ページの .js ファイルにイベント処理関数を定義します。 9. テキスト ボックスと データを実装します 間のデータ同期 実装手順: ① データの定義 ② レンダリング構造 ③ 美化スタイル ④ バインディング 入力 イベント処理関数 定義データ: #レンダリング構造: バインディング入力 イベント処理関数: WXML テンプレート構文- 条件付きレンダリング ： 1. wx:if1. #ミニプログラムでは、 use wx:if="{{ condition }}" コード ブロックが必要かどうかを判断するには、 wx:elif および も使用できます。 wx:else 追加する場合はelse 判断: ##2 . #組み合わせ## #使用## wx:if 複数のコンポーネントを一度に制御したい場合は、 を表示または非表示にします。 タグを使用して複数のコンポーネントをラップし、 に配置できます。 wx:if で属性を制御します。例は次のとおりです: ##注: は A ではありませんコンポーネント 、これは単なるラッピング コンテナです。 はページ内でレンダリングを行いません。 3.hidden ="{{ 条件 }}" 要素の表示と非表示を制御することもできます: 4.wx:if と 非表示 比較 ①さまざまな操作方法1 wx:if 動的に要素を作成・削除することで要素の表示・非表示を制御 2 hidden スタイルを切り替えることで要素の表示と非表示を制御します ( display : なし/ブロック; ) ② 使用方法の提案1 頻繁な切り替え hidden を使用することをお勧めします。 #2 制御条件 が複雑な場合は wx を使用することを推奨します:if 一致 wx:elif、wx:else 表示と非表示を切り替えるWXML テンプレート構文- リストのレンダリング 1.wx:for #wx:for を使用すると、指定された配列に基づいて繰り返しコンポーネント構造をループおよびレンダリングできます。構文例は次のとおりです。 # デフォルトでは、現在のループ項目 の インデックスは index ; ## で表されます。 # は現在、ループ項目 は item で表されます。 2. 現在の項目のインデックスと変数名を手動で指定します * 1 wx:for-index を使用して、 現在のインデックスを指定します。ループ item #2 の変数名は、 wx:for-item を使用して 現在のアイテム 変数名 サンプルコードは次のとおりです: リスト レンダリングで wx:key #:key を使用します。アプレットがリスト レンダリングを実装するとき、また、レンダリングされるリスト項目に一意の # を指定することをお勧めします。##key 値により、 レンダリング効率が向上します 、サンプル コードは次のとおりです。 [関連する学習の推奨事項: 小プログラム学習チュートリアル]

以上がWeChat アプレットの WXML テンプレート構文の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。