WeChat アプレットのビュー レイヤー WXML は、データ、テンプレート、ロジックをバインドします...

前の記事では、ミニ プログラムの MVC 構造を紹介しました。

page.js は、ビジネス ロジック層とも呼ばれる制御層 (C) です。

page.js のデータ属性は、データ モデル層 (M) です。 ;

page.wxml はプレゼンテーション層 (V) です。

page.wxss はプレゼンテーション層の効果を強化する CSS です。

ビジネスロジック層(C)を介してデータ属性(M)を変更し、プレゼンテーション層(V)に表示します。

それが MVC デザインパターンです。

1. データバインディング

まず、PageページのMVCプロセス構造図を見てください

次のアニメーションに示すように、ページ {{title}} を渡すと効果が表示されます。

2. データ バインディングの共通構文

2.1、コンテンツ

2.2、コンポーネント属性 (二重引用符で囲む必要があります)

content と同じ

2.4、キーワード ({{ }} 内で必須)

tru​​e: ブール型の true、真の値を表します。

false: ブール型の false。偽の値を表します。

注: 計算結果は文字列なので、変換して表現されます。真の値に変換します。

2.5、三項演算

2.6、算術演算

{{a + b}} + {{c}} + d

2.7、文字列操作{{"hello" + 名前 }}

2.8、データパス操作

オブジェクト型の場合は、object.keyを通じて値を取得できます

配列型の場合は、添字インデックスを通じて値を取得できます。インデックス 0 から始まります

{{object.key}} {{array[0]}}

コードとレンダリング:

3. 論理レンダリング構文
3.1、論理判断 wx:if
;/view>

or

1
2
3

ブロックwx:if

<ブロックwx:if="{{ true}}">
view1
view2

3.2、wx:for

デフォルト配列の現在の項目の添字変数名はデフォルトで Index になり、配列の現在の項目の変数名はデフォルトで item になります。 wx:for-index および wx:for-item を通じて指定することもできます。

{{index}}: {{item.message}}

指定

< ; wx:for="{{array}}" wx:for-index="idx​​"wx:for-item="itemName">
{{idx}}: {{itemName.message}}
< を表示します。 /view>

block wx:for

{{item}}

3.3、wx:key

リスト内の項目の位置が動的に変更する場合、または新しい項目がリストに追加されたときに、リスト内の項目が独自の特性とステータス ( の入力内容、 の選択状態など) を維持するようにしたい場合;)、wx:key を使用して、リスト内の項目の一意の識別子を指定する必要があります。

wx:key の値は 2 つの形式で提供されます

1) for ループの配列内の項目のプロパティを表す文字列。プロパティの値はリスト内の唯一の文字列または数値である必要があります。 、動的変更はできません。

2) 予約されたキーワード *this は、for ループ内の項目自体を表します。この表現では、項目自体が一意の文字列または数値である必要があります

データの変更により、レンダリング レイヤが再レンダリングされます。キーを使用してコンポーネントを修正すると、フレームワークは、コンポーネントが独自の状態を維持し、リストのレンダリングの効率を向上させるために、コンポーネントが再作成されるのではなく順序が変更されることを保証します。

{{item.id}}

写真を見る

4. テンプレート

WXML は、さまざまな場所で呼び出されるテンプレート (テンプレート) を提供します。再利用の効果を実現します。