uni-appを使用して、$on $emitを使用してページ間で情報を送信します。

uni-app 使用 $on $emit 进行跨页情報伝達

uni-app 使用 $on $emit 进行跨页情報伝達、Vue23 の書き方を添付します。

最近、ask コミュニティで、ユーザーが uni-app プログラムのページ間通信を正しく使用する方法について質問していました。ユーザーは $on を使用してメッセージを受信できないと報告しており、ここではベストプラクティスの要約を試みて、同様の疑問を持つユーザーに参考となる情報を提供します。

この記事を読むべき人#

アプリケーションレベルのページ間通信を行うために、さまざまな理由から $on/$emit を使用してデータを送信する必要がある場合。

よくある問題のシナリオ#

A ページから B ページに移動する際に、一部の複雑なオブジェクト情報を持っている場合。A ページで $emit を定義し、B ページで $on を定義しましたが、ページ遷移後に B ページでイベントを受け取ることができませんでした。ページを戻して再度遷移すると受け取ることができます。また、一部のユーザーは、setTimeoutを追加すると遅延後に使用できることに気付きました。

この方法は信頼性がありません。結局のところ、A ページでイベントを発行するとき、B ページはまだ初期化されていないため、関連するイベントを受け取ることはできません。

ここでは、異なるビジネス要件に対応するために 2 つのソリューションを提供します。

ソリューション 1：ハンドシェイク後に送信#

デモコードのリンク：https://gitcode.net/xiurensha5731/uni-app-questions/-/tree/q/api-emit/src/pages

index ページと about ページを観察してください。

index ページ、つまり page1 ページでは、まず $on イベントを登録し、コールバック関数で具体的なデータを送信します。

// ここでは、indexからaboutに移動する際に情報を渡します
const go = () => {
  uni.navigateTo({
    url: "/pages/about/index?msg=hello",
  });
};

onLoad(() => {
  // アイデアは、リスナーを最初に登録し、その後に情報を送信することです。この時点でpage2
  // は遷移後にページがアクティブ化され、onイベントを受け取ることができます
  uni.$on("page2Ready", function (data) {
    console.log("page1がpage2から送られた情報を受け取りました", data);
    uni.$emit("update", { msg: "ページの更新" });
  });
});

onUnload(() => {
  uni.$off("page2Ready");
});

about ページ、つまり page2 ページでは、まずイベントを登録し、その後 page1 に情報を通知します。

const message = ref("");

onLoad(() => {
  uni.$on("update", function (data) {
    console.log("page2がupdateからのイベントを検知しました。パラメータmsgは：" + data.msg);
    message.value = data.msg;
  });
  uni.$emit("page2Ready", { msg: "page2が準備できました、送信してください" });
});
onUnload(() => {
  uni.$off("update");
});

完全なコードは上記のリンクを参照してください。

ソリューション 2：`uni.navigateTo`の events を使用する#

公式ドキュメントのリンク：https://uniapp.dcloud.net.cn/api/router.html#navigateto
events キーワードを検索すると、使用方法にたどり着くことができます。

ここでもオンラインで実行結果を見ることができます。git のリンク index ページと about ページを観察してください。

index ページ、つまり page1 ページ

// ここでは、indexからaboutに移動する際に情報を渡します
const go = () => {
  uni.navigateTo({
    url: "/pages/about/index?msg=hello",
    events: {
      // 次のページからの通知を受け取ることができます
      page1: function (data) {
        console.log(444, data);
      },
    },
    success: function (res) {
      // eventChannelを介してデータを開かれたページに送信します
      res.eventChannel.emit("page2", { data: "page1からの情報" });
    },
  });
};

about ページ、つまり page2 ページ、ここでは option と composition の 2 つの方法を提供します。


// vue3のsetupの書き方
const message = ref("");
// vue3のsetupの書き方
onLoad(() => {
  const { proxy } = getCurrentInstance();
  const eventChannel = proxy.getOpenerEventChannel();
  eventChannel.emit("page1", { data: "data from test page" });
  // acceptDataFromOpenerPageイベントをリッスンして、前のページから現在のページにeventChannelを介して送信されたデータを取得します
  eventChannel.on("page2", (data) => {
    console.log(222, data.data);
    message.value = data.data;
  });
});

// vue2の書き方
// export default {
//   data() {
//     return { message: "" };
//   },
//   onLoad(option) {
//     const _this = this;
//     const eventChannel = this.getOpenerEventChannel();
//     eventChannel.emit("page1", { data: "data from test page" });
//     // acceptDataFromOpenerPageイベントをリッスンして、前のページから現在のページにeventChannelを介して送信されたデータを取得します
//     eventChannel.on("page2", (data) => {
//       console.log(222, data.data);
//       _this.message = data.data;
//     });
//   },
// };

技術的なまとめ#

上記の 2 つのソリューションは、emit と on を使用してページ間の情報を伝達するために使用することができます。同様の問題に直面したユーザーの参考になることを願っています。