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

イベント タイプ

ページが開くミリ秒数イベントがトリガーされるまでの経過

##target

Object

currentTarget

Object

##詳細

#配列

タッチイベント、現在画面上にあるタッチポイント情報の配列

##タッチイベント、現在変更されているタッチポイント情報の配列

##

4. ターゲット と currentTarget

## の違いtarget はイベントをトリガーした ソース コンポーネント であり、currentTarget は 現在のイベントがバインドされているコンポーネント。例:

バブル 外部拡散は、また、外側の view の tap イベント処理関数もトリガーします。

ビュー :

。 target は、イベントをトリガーしたソース コンポーネントを指します。したがって、 e.target は、内部ボタン コンポーネント #2

は、現在イベントをトリガーしているコンポーネントを指します。したがって、e.currentTarget は現在の view Component

##5.

構文バインドタップのフォーマット ## はミニ プログラム #HTML ## には存在しません。

onclick # のマウス クリック イベントは、tap イベント を通じてユーザーのタッチ動作に応答します。 ①

を通じて、コンポーネントをバインドできます tap Touch イベントの構文は次のとおりです。

# 内ページの ##.js

対応するイベント処理関数はファイル内で定義されており、イベント パラメーターは仮パラメーター

を介して渡されます。 (通常、 は 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="{{

}}" コード ブロックが必要かどうかを判断するには、

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 値により、

レンダリング効率が向上します 、サンプル コードは次のとおりです。 [関連する学習の推奨事項: 小プログラム学習チュートリアル]