WeChat アプレットが子ページから親ページに戻るときのデータ転送プロセスの詳細な説明-ミニプログラム開発-php.cn

WeChat アプレットが子ページから親ページに戻るときのデータ転送プロセスの詳細な説明

Y2J

リリース： 2017-04-27 14:59:55

オリジナル

2001 人が閲覧しました

WeChat アプレットでは、あるページから別のページに移動するときに、通常、ナビゲーションまたはリダイレクト時に URL を介してパラメーターを運び、ターゲットページの onLoad 関数パラメーターでこれらの URL パラメーターを取得できることがわかっています。例:

// 源页面A相关代码
wx.navigateTo({
  url: "/pages/mypage/mypage?a=1&b=2"
})

// 目标页面B相关代码
Page({
  onLoad: function (options) {
    var a = options.a; // 值：1
    var b = options.b; // 值：2
  }
})

ログイン後にコピー

ただし、この方法は対象のページがまだ作成されていない場合にのみ有効です。ページの onLoad メソッドは、ページのライフサイクル中に 1 回だけ実行されるためです。

次のシナリオを考えてみましょう:

1. 在【页面A】中调用wx.navigateTo方法跳转到【页面B】
2. 然后从【页面B】返回【页面A】, 并将【页面B】中的一些数据传回【页面A】

ログイン後にコピー

より実用的な例として、下の図に示すように、このフォームページ A:

WeChat アプレットが子ページから親ページに戻るときのデータ転送プロセスの詳細な説明

A ページにデータを入力します

その後、このページにデータを入力します、検索ボタンがあります。このボタンをクリックすると、別のセキュリティコード検索ページ B:

WeChat アプレットが子ページから親ページに戻るときのデータ転送プロセスの詳細な説明

ページ B

この検索リストでセキュリティコードを選択すると、前のページに戻りますページ未完了のフォームへの入力と送信操作を続行するためのフォームページ。

このシナリオは非常に合理的で一般的です。

しかし、考えてみましょう。ページ B を終了してページ A に戻るときに、ページ B で選択したセキュリティコードをページ A に戻すにはどうすればよいでしょうか? URLを使用してnavigateTo()でパラメータを運ぶにはどうすればよいですか?

ページのライフサイクルに基づくと、私たちの答えは「いいえ」です。

それでは何ができるでしょうか？

方法 1: グローバルデータストレージを使用する

転送するデータを App オブジェクト (globalData 属性など) に保存します。
転送するデータをミニプログラムのローカルデータキャッシュ(Storage)に保存します。

たとえば、ページ B を終了しようとしているとき、次の呼び出しを行います:

//=== 1. 存储到app对象上的方式 ========
var app = getApp()
app.globalData.mydata = {a:1, b:2};  //存储数据到app对象上
wx.navigateBack();  //返回上一个页面

//=== 2.存储到数据缓存的方式 =========
wx.setStorage({
  key: "mydata",
  data: {a:1, b:2},
  success: function () {
    wx.navigateBack();   //返回上一个页面
  }
})

ログイン後にコピー

このようにして、前のページに戻るときに、これらのグローバルストレージ領域のデータを読み取ることで、必要なものを取得できます。

ただし、この方法には明らかな欠点もあります。グローバルデータストアなので、そのデータを保存する場合は、グローバルデータの管理（破壊時）に注意しないと、注意しないと副作用が発生します。

方法 2: ページルーティングスタックから対象の Page オブジェクトを直接取得して操作する

この方法は、このルーティングスタック内のミニプログラムの API: getCurrentPages() を呼び出して、現在のページルーティングスタックの情報を取得します。ルーティングシーケンスには、ページに応じて現在のページルーティングスタックの情報が取得され、上位レベルのページの完全な Page オブジェクトを簡単に取得できるため、プロパティとメソッドを直接呼び出すことができます。 Page オブジェクトの。

以下に示すように:

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
  mydata: {a:1, b:2}
})

ログイン後にコピー

グローバルデータストレージ方法と比較して、この方法はロジックがはるかに明確であり、データ破壊のための追加の管理作業がありません。

つまり、現時点では、そのようなシナリオに遭遇した場合は、方法 2 を使用してコードを設計することをお勧めします。また、ミニプログラムフレームワークが、このデータリターンの問題を解決するための、より優れた、よりエレガントな方法を導入できることを願っています。

以上がWeChat アプレットが子ページから親ページに戻るときのデータ転送プロセスの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。