目次
1. データ バインディングの基本原則
4. ターゲット currentTarget " >4. ターゲット currentTarget
##5.
}}" コード ブロックが必要かどうかを判断するには、 " >}}" コード ブロックが必要かどうかを判断するには、
ホームページ WeChat アプレット ミニプログラム開発 WeChat アプレットの WXML テンプレート構文の概要

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

May 18, 2022 am 11:43 AM
WeChat アプレット

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

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

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

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

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

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

WXML

2.

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

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

3. 口ひげ

文法形式

##data

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

文法の応用シナリオ

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

演算 (三項演算、算術演算など)
  1. 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:elifwx: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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Xianyu WeChat ミニプログラムが正式に開始 Xianyu WeChat ミニプログラムが正式に開始 Feb 10, 2024 pm 10:39 PM

Xianyu の公式 WeChat ミニ プログラムが静かに開始されました。ミニ プログラムでは、プライベート メッセージを投稿して購入者/販売者とコミュニケーションしたり、個人情報や注文を表示したり、商品を検索したりすることができます。プログラム、見てみましょう。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評価、リサイクル。 1. ミニ プログラムでは、アイドル メッセージの投稿、プライベート メッセージを介した購入者/販売者とのコミュニケーション、個人情報と注文の表示、指定された商品の検索などができます。 2. ミニ プログラム ページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、私の投稿 5つの機能; 3. 使用したい場合は、購入する前に WeChat 支払いを有効にする必要があります。

WeChatアプレットは画像アップロード機能を実装 WeChatアプレットは画像アップロード機能を実装 Nov 21, 2023 am 09:08 AM

WeChat アプレットが画像アップロード機能を実装 モバイル インターネットの発展に伴い、WeChat アプレットは人々の生活に欠かせないものになりました。 WeChat ミニ プログラムは、豊富なアプリケーション シナリオを提供するだけでなく、画像アップロード機能などの開発者定義の機能もサポートします。この記事では、WeChat アプレットに画像アップロード機能を実装する方法と具体的なコード例を紹介します。 1. 準備作業 コードを書き始める前に、WeChat 開発者ツールをダウンロードしてインストールし、WeChat 開発者として登録する必要があります。同時に、WeChat についても理解する必要があります。

Xianyu WeChat アプレットの名前は何ですか? Xianyu WeChat アプレットの名前は何ですか? Feb 27, 2024 pm 01:11 PM

Xianyu の公式 WeChat ミニ プログラムが静かに開始され、アイドルアイテムを簡単に公開および交換できる便利なプラットフォームをユーザーに提供します。ミニ プログラムでは、プライベート メッセージを介して購入者または販売者とコミュニケーションしたり、個人情報や注文を表示したり、欲しい商品を検索したりできます。では、WeChat ミニ プログラムでは Xianyu とはいったい何と呼ばれているのでしょうか? このチュートリアル ガイドで詳しくご紹介しますので、知りたいユーザーは、この記事に従って読み続けてください。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評価、リサイクル。 1. ミニ プログラムでは、アイドル メッセージの投稿、プライベート メッセージを介した購入者/販売者とのコミュニケーション、個人情報と注文の表示、指定された商品の検索などができます。 2. ミニ プログラム ページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、マイ投稿の5つの機能、3.

WeChat アプレットにドロップダウン メニュー効果を実装する WeChat アプレットにドロップダウン メニュー効果を実装する Nov 21, 2023 pm 03:03 PM

WeChat ミニ プログラムでドロップダウン メニュー効果を実装するには、特定のコード サンプルが必要です。モバイル インターネットの普及に伴い、WeChat ミニ プログラムはインターネット開発の重要な部分となり、ますます多くの人が注目し始めています。 WeChat ミニ プログラムを使用します。 WeChat ミニ プログラムの開発は、従来の APP 開発よりも簡単かつ迅速ですが、特定の開発スキルを習得する必要もあります。 WeChat ミニ プログラムの開発では、ドロップダウン メニューが一般的な UI コンポーネントであり、より良いユーザー エクスペリエンスを実現します。この記事では、WeChat アプレットにドロップダウン メニュー効果を実装し、実用的な機能を提供する方法を詳しく紹介します。

PHPを使用してWeChatアプレットの中古取引機能を開発するにはどうすればよいですか? PHPを使用してWeChatアプレットの中古取引機能を開発するにはどうすればよいですか? Oct 27, 2023 pm 05:15 PM

PHPを使用してWeChatアプレットの中古取引機能を開発するにはどうすればよいですか?人気のモバイル アプリケーション開発プラットフォームとして、WeChat アプレットはますます多くの開発者によって使用されています。 WeChat ミニ プログラムでは、中古取引が一般的な機能要件です。この記事では、PHP を使用して WeChat アプレットの中古取引機能を開発する方法と、具体的なコード例を紹介します。 1. 準備作業 開発を開始する前に、以下の条件が満たされていることを確認する必要があります。ミニ プログラムの AppID の登録やミニ プログラムのバックグラウンドでの設定など、WeChat ミニ プログラムの開発環境がセットアップされていること。

WeChat アプレットを使用してカルーセル切り替え効果を実現する WeChat アプレットを使用してカルーセル切り替え効果を実現する Nov 21, 2023 pm 05:59 PM

WeChat アプレットを使用してカルーセル スイッチング効果を実現する WeChat アプレットは、シンプルで効率的な開発と使用特性を備えた軽量のアプリケーションです。 WeChat ミニ プログラムでは、カルーセル スイッチング効果を実現することが一般的な要件です。この記事では、WeChat アプレットを使用してカルーセル切り替え効果を実現する方法と、具体的なコード例を紹介します。まず、カルーセル コンポーネントを WeChat アプレットのページ ファイルに追加します。たとえば、&lt;swiper&gt; タグを使用すると、カルーセルの切り替え効果を実現できます。このコンポーネントでは、 b を渡すことができます。

WeChat ミニ プログラムに画像フィルター効果を実装する WeChat ミニ プログラムに画像フィルター効果を実装する Nov 21, 2023 pm 06:22 PM

WeChat ミニ プログラムでの画像フィルター効果の実装 ソーシャル メディア アプリケーションの人気に伴い、人々は写真にフィルター効果を適用して、写真の芸術的効果や魅力を高めることがますます好まれています。画像フィルター効果は WeChat ミニ プログラムにも実装でき、より興味深く創造的な写真編集機能をユーザーに提供します。この記事では、WeChat ミニ プログラムに画像フィルター効果を実装する方法を紹介し、具体的なコード例を示します。まず、WeChat アプレットのキャンバス コンポーネントを使用して画像を読み込み、編集する必要があります。 Canvasコンポーネントはページ上で使用できます

WeChat アプレットに画像回転効果を実装する WeChat アプレットに画像回転効果を実装する Nov 21, 2023 am 08:26 AM

WeChat ミニ プログラムで画像回転効果を実装するには、特定のコード サンプルが必要です。WeChat ミニ プログラムは、ユーザーに豊富な機能と優れたユーザー エクスペリエンスを提供する軽量のアプリケーションです。ミニ プログラムでは、開発者はさまざまなコンポーネントと API を使用して、さまざまな効果を実現できます。その中で、画像回転効果は、ミニプログラムに興味と視覚効果を加えることができる一般的なアニメーション効果です。 WeChat ミニ プログラムで画像の回転効果を実現するには、ミニ プログラムが提供するアニメーション API を使用する必要があります。以下は、その方法を示す具体的なコード例です。

See all articles