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のワンクリックインストールとパスワードポリシーの変更方法

推薦する

Dockerプライベートウェアハウスレジストリの導入

使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...

ミニプログラムカスタムコンポーネントの非効率的なグローバルスタイルの解決策

目次長すぎて読めないコンポーネントスタイルの分離デモテスト優先度ページの分離構成参考文献ネイティブ ...

RGBカラーテーブルコレクション

RGBカラーテーブル色英語名RGB 16色雪255 250 250 #FFFAFAゴーストホワイト2...

Docker コンテナで ASP.NET Core を実行する手順

最近は学ぶべき知識が多すぎて、どれを先に学べばいいのかわかりません。このブログはもともとxamari...

JSの高階関数5つを共有する

目次1. はじめに2. 再帰3. コールバック関数3.1 匿名コールバック関数3.2 パラメータ付き...

Java は Excel から MySQL にデータをインポートします

実際の業務では、Excel からデータベースにデータをインポートする必要がある場合があります。データ...

Nodejsはgitee実装コードに自動的に同期するドキュメント同期ツールを作成します

本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...

Alipay の新しいホームページのフロントエンドの実践的な概要

もちろん、ページ パフォーマンスの最適化に関する個人的な経験も含まれています。ここでいくつかの点につ...

Linux でのマルチスレッドプログラミング例の分析

1 はじめにスレッド技術は 1960 年代にすでに提案されていましたが、マルチスレッドがオペレーティ...

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...

Linux運用保守ツールSupervisor(プロセス管理ツール)のインストールと使用

1. はじめにSupervisor は Python で開発された汎用プロセス管理プログラムです。通...

ピクセルを包括的なブランド体験に変えるヒント

編集者:この記事では、インタラクティブデザインがブランドコミュニケーションチェーン全体で果たすべき役...

Nginx のリロード プロセスの背後にある真実を探る

本日の記事では、主にNginxのリロードプロセスについて紹介します。実は前回の記事では、nginx ...

CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法

以下は、Flex レイアウトを使用した棒グラフです。 HTML: <div class=&qu...

CSSスタイルの記述順序と命名規則と注意事項

書き順の重要性ブラウザのリフローを減らし、ブラウザのDOMレンダリングパフォーマンスを向上させる①:...