WeChatミニプログラムページとコンポーネント間の情報伝達と機能呼び出し

WeChatミニプログラムページとコンポーネント間の情報伝達と機能呼び出し

今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。

  1. ページからコンポーネントにデータを渡す方法
  2. コンポーネントがページにデータを渡す方法
  3. ページはコンポーネント内の関数をどのように呼び出しますか?
  4. コンポーネントはページ内でどのように関数を呼び出すのでしょうか?

1. ページはどのようにしてコンポーネントにデータを渡すのでしょうか?

最も一般的で標準化された方法は、データ リスナー オブザーバーを設定することです。

​コンポーネントscがページに導入されていると仮定します

"コンポーネントの使用": {
    "sc":""
 }

ページ上のデータ リストの変更を監視するリスナーを構成するには、コンポーネントを次のようにページに記述します。

<sc
リスト="{{リスト}}"
>
</sc>

コンポーネント内のリスナーは以下のように記述します。ページ内の `list` の値が変わるたびに `observer` リスナーがトリガーされ、変更された値が出力されます。

プロパティ:
    リスト:{
      タイプ:配列、
      オブザーバー: 関数 (newVal, oldVal){
        コンソールログ(新しい値)
      }
    }
}

同様に、動的な値の送信に加えて、このメソッドは静的な値を直接渡すこともできます。つまり、オブザーバー リスナーを呼び出す必要はありません。コンポーネントでは、this.properties.* を直接使用して、プロパティの値を取得できます(* は各プロパティ値の名前を表します)。

2. コンポーネントはどのようにしてページにデータを渡すのでしょうか?

コンポーネントは、データ転送の効果を実現するためにページ データの変更を監視するリスナーを設定できるため、ページもリスナーを使用して、コンポーネントによってトリガーされた情報転送を監視することができます。

上記のコンポーネントを例に挙げて、ページに情報を送信するにはどうすればよいでしょうか。

​ ページでコンポーネントリスナーを構成する

コンポーネントリスナー(e){
    info = e.detail; とします。
 }

コンポーネントはイベントを選択し、リスナーをバインドします

<sc
bind:listener="コンポーネントリスナー"
> 
</sc>

コンポーネントからページに入力を渡すには、コンポーネント内の対応するイベントをトリガーするだけです。e.detail は渡されるデータです。

 this.triggerEvent('リスナー',{func,tid});


3. ページはコンポーネント内の関数をどのように呼び出すか

特定のロジックでトリガーする必要がある関数 handleCloseInput を含むコンポーネント comment-bottom を導入して使用するとします。

コンポーネント内の関数を使用する場合は、ページ上の DOM 操作を通じてコン​​ポーネントを選択し、コンポーネント内の関数を呼び出すことができるように、コンポーネントの一意の ID を構成する必要があります。

<コメントボトムid="コメントボトム"></コメントボトム>

ページ上のコンポーネント内の関数の呼び出しロジックは次のとおりです。

this.commentBottom = this.selectComponent("#commentBottom");
コメント下部のハンドルを閉じる入力();

4. コンポーネントはページ上の関数をどのように呼び出すのでしょうか?

ページにデータを転送する上記の方法は、実際にはページ内の関数を呼び出します。関数マッピングとしてロジックと使用法を理解することができます。

<コンポーネント バインド:componentfunc="pagefun"></コンポーネント>

トリガーを使用して componentfunc をトリガーすると、ページ内の pagefunc は bind: function マッピング関係を通じてトリガーされます。

次に、ページ スタックを介してページ内の関数を呼び出すこともできます。コンポーネントはページのスタック領域を占有しないため、コンポーネント内で getCurrentPages を使用して、対応するページのデータとメソッドを取得できます。

var allpages = getCurrentPages(); //すべてのページデータを取得します。 var nowpage = allpages[allpages.length - 1].data; //現在のページのデータを取得します。
var nowpage = allpages[allpages.length - 1]; //データとメソッドを含むページを取得します

この部分のコンテンツは私の記事の 1 つからの抜粋です。参照ファイルにアドレスを記載しておきます。

結論:

コンポーネント間のデータ転送は、コンポーネントとページ間のデータ転送とほとんど変わらず、コンポーネントをコンポーネント内にネストすることもできます。

参考文献

WeChat ミニプログラム開発スキルの概要 (I) - データ転送と保存

WeChatミニプログラムページとコンポーネント間の情報伝達と関数呼び出しに関するこの記事はこれで終わりです。WeChatミニプログラムページとコンポーネントの関連コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットのカスタムコンポーネント値転送ページとコンポーネントデータ転送操作例
  • WeChatミニプログラムページでカスタムコンポーネントを呼び出すイベントの詳細な説明
  • WeChatアプレットカスタムコンポーネントの実装方法とカスタムコンポーネントとページ間のデータ転送の問題
  • WeChatアプレットWebViewコンポーネントの相互作用、インラインh5ページ、およびWeChat支払い実装分析を実装するWebページ
  • WeChatアプレットはカスタムコンポーネントのトリガーイベントのページ監視を実装します
  • WeChatアプレットスライドページ非表示および表示コンポーネント機能実装コード
  • WeChatアプレットはカスタムコンポーネントナビゲーションを使用して現在のページを強調表示します

<<:  Linux でバックグラウンドで実行中のプログラムを表示して終了する方法

>>:  MySQL 5.7のワンクリックインストールとパスワードポリシーの変更方法

推薦する

WeChatアプレットコンポーネントライフサイクルの落とし穴の記録

通常、コンポーネントのライフサイクルは、ビジネス ロジックが始まる場所です。ビジネスシナリオが複雑で...

MySQL データテーブルのパーティション戦略と利点と欠点の分析

目次なぜパーティションが必要なのでしょうか?パーティショニング戦略パーティションの危険性なぜパーティ...

Windows Server 2008 R2 に MySQL 5.7.10 をインストールする手順

MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...

Linuxの運用・保守の基礎知識から上級者向け知識までをまとめました

運用保守エンジニアは、初期段階では非常に大変な仕事です。この期間中、コンピューターの修理、ネットワー...

「MySQL サービスを開始できません エラー 1069」を解決する方法

今日、外出中に同僚から、ウェブサイトのバックエンドにアクセスできないというメッセージが届きました。と...

WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します

目次序文応用フィルタードラッグファイル間での参照の受け渡しwxsはjsロジック層にパラメータを渡しま...

Robots.txtの詳細な紹介

Robots.txt はプレーンテキスト ファイルであり、Web サイト管理者は、ロボットによるアク...

MySQL 全文インデックスガイド

全文インデックスには特別なクエリ構文が必要です。全文検索はインデックスの有無にかかわらず実行できます...

純粋な CSS3 で水平無限スクロールを実装するためのサンプル コード

この記事の例はすべて小さなプログラムで書かれていますが、実装される機能には影響しません。 wxmlル...

MySQLクライアントとサーバーのプロトコルの解釈

目次MySQL クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...

MySQL sql_modeクエリと設定の詳細な説明

1. SQLを実行して表示する @@session.sql_mode を選択します。 グローバルレベ...

MySQL データベースのインストールと Navicat for MySQL の使用に関するチュートリアル

MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...

gorm で MySql データベースを操作する方法

1. テーブル内のフィールドの大文字と小文字の区別を設定するgorm クエリを使用する場合、MySQ...

Angularの動的コンポーネントの詳細な説明

目次使用シナリオ達成方法1. 動的コンポーネントを配置する場所2. コンポーネントのインスタンスを取...

JSオブジェクトの走査順序の詳細な説明

JavaScript ではオブジェクトを走査する順序は固定されていないと聞いたことがある人もいるかも...