JS ライブラリを使用して、小さなプログラムでのクロスページ メッセージとデータ送信の問題を解決する方法について話しましょう

青灯夜游
リリース: 2021-05-08 09:00:48
転載
3051 人が閲覧しました

JS ライブラリを使用して、小さなプログラムでのクロスページ メッセージとデータ送信の問題を解決する方法について話しましょう

WeChat アプレットの wx.navigateBack メソッドは値を返すことをサポートしていないため、ページは戻った直後にデータを都合よく更新できません。

1. 要件分析

このタイプの要件は、大まかに意味します: ページ A がページ B に入り、ページ B が戻って A に値を渡す、またはイベントがトリガーされたときページ B では、ページ A にもイベントによってトリガーされる変更があります。

JS ライブラリを使用して、小さなプログラムでのクロスページ メッセージとデータ送信の問題を解決する方法について話しましょう

ビジネス分析

最初の方法: WeChat の wx.setStorage を使用して、ミニ プログラム インスタンスにデータをキャッシュします。ページ B からページ A に戻るとき、ページ B は最初にデータをキャッシュし、次にページ A の onshow メソッドで wx.getStorage を呼び出してキャッシュを読み取ります。しかし、それは将来のメンテナンスに多くの隠れた危険をもたらします。 (グローバル変数メソッドと同様)

Second: 前のページインスタンスを取得するメソッドでもこの機能を実装できます。コードの一部は次のとおりです:

JS ライブラリを使用して、小さなプログラムでのクロスページ メッセージとデータ送信の問題を解決する方法について話しましょう

#この方法の欠点: ページ B への入り口が多数ある可能性があるためです。そうすると、不正なページ インスタンスが取得される可能性があります。

2. メソッドの紹介

本題に入り、onfire.js() を紹介します

onfire.js は非常にシンプルなイベント配布ですシンプルで実用的なJavaScriptライブラリ(わずか0.9kb)。

1. 単純なイベント配信。

2. React、Vue.js、Angular でのクロスコンポーネントの軽量実装に使用されます。

3. イベントのサブスクリプションと公開。

使用上のアイデア: (モバイル開発を行ったことがある人は、これが iOS 通知や Android ブロードキャストに似ていることを知っています)

a.A ページは最初にイベントをサブスクライブし、処理メソッドを定義します。

#b. ページ B から戻ったら、メッセージを送信します;

c. ページ A がアンロードされたら、購読を解除します。

私の使用方法は次のとおりです:

A ページ コード:

JS ライブラリを使用して、小さなプログラムでのクロスページ メッセージとデータ送信の問題を解決する方法について話しましょう

A ページで onfire.on メソッドを直接呼び出して、 subscribe key という名前のメッセージ。上記のコードでは、メッセージに添付されたパラメータはパラメータなしで渡されます。

パラメータを渡す必要がある場合は、関数にパラメータを直接追加します。例:

JS ライブラリを使用して、小さなプログラムでのクロスページ メッセージとデータ送信の問題を解決する方法について話しましょう

これは onUnload (ページの読み込み時に) になければならないことに注意してください。は終了時間です)メッセージのサブスクライブを解除し、eventObj のバインドを解除します。

B ページのコードのコールバック領域に次のコードを追加します:

JS ライブラリを使用して、小さなプログラムでのクロスページ メッセージとデータ送信の問題を解決する方法について話しましょう

##3. 分析ライブラリ コード

このコードから、on メソッドをサブスクライブするときに、実際には _bind メソッドが呼び出されることがわかります。このメソッドは、2 次元配列を使用して、サブスクライブされたオブジェクトを保管します。

JS ライブラリを使用して、小さなプログラムでのクロスページ メッセージとデータ送信の問題を解決する方法について話しましょうFire メッセージ送信メソッドの本質は、_fire_func メソッドを呼び出し、名前 (キー) でサブスクライバを走査し、サブスクライバに通知することです。 un メソッドを呼び出して、名前 (キー) でサブスクライバーを走査し、サブスクライバーを見つけたら削除します。

推奨事項: 「

ミニ プログラム開発チュートリアル

以上がJS ライブラリを使用して、小さなプログラムでのクロスページ メッセージとデータ送信の問題を解決する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:jisuapp.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート