WeChatミニプログラムページ間の価値転送を実装する方法の例

ミニプログラムページ間で値を渡す

みなさんこんばんは。こんばんはと言うのは、これを夜に書いたからです。この文章の始まりがそれほど唐突ではないからです。ミニプログラムのページ間の値の受け渡しについては、私が使用してきた間、wx.navigateTo と非 wx.navigateTo に非常に主観的に分けてきました。wx.navigateTo にはイベント パラメータ event があるためです。現在のページから次のページにジャンプします。戻る必要がある場合は、wx.navigateTo を使用します。このイベントの機能は、次のページから返されるパラメータを受け取ることです。このような：

インデックス

wx.navigateTo({
  URL: URL、
  イベント: {
    // 指定されたイベントのリスナーを追加して、開かれたページから現在のページに送信されるデータを取得します。acceptDataFromOpenedPage: (data) => { // このメソッドはカジュアルな名前が付けられており、要件は多くありませんが、開かれたページの最初のパラメーターはメソッド名である必要があります。console.log('sour bean buns throw from next door', data)
    },
  },
  成功: 関数 (res) {
    // 開かれたページにeventChannel経由でデータを送信します // res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

gebi.js

// 選択を確定する confirm() {
  const eventChannel = this.getOpenerEventChannel() // これは WeChat 独自のメソッドであるはずなので、そのまま使用すれば問題ありません。eventChannel.emit('acceptDataFromOpenedPage', data) // 前のページのイベントでパラメータを受け取るメソッドの名前 wx.navigateBack() // 前のページに戻る }

これら 2 つの操作により、vue2.x と同様に親子コンポーネントの値の転送が完了し、出力もまったく同じになります。

次のページに値を渡すにはどうすればいいでしょうか? store と storage が使用されていない場合は、上記の wx.navigateTo の Url または成功コールバックの後にパラメータを持つメソッドを使用できます。成功コールバックは使ったことがないのですが、調べてみると、WebWorkerを使って子スレッドに値を渡し、子スレッドがメインスレッドに値を渡すという動作と、メインスレッドと子スレッドがデータを受け取る仕組みに非常に似ている気がします。簡単に言うと「監視」（addeventlistener）だと思います（0o-_^o）
ここで言及したいのは、ジャンプするときに URL パスの前に / が付いたページが付くということです。それだけです。

wx.navigateTo({
  URL: '/pages/index/index'
})

ミニプログラムのURL値転送

ミニプログラムの URL 値の受け渡しは、通常のルーティング パラメータと同じです。どちらも疑問符 (?) とアンパサンド (&) が続きますが、基本型データ値の受け渡しと参照型データ値の受け渡しに分かれています。一般的なものは次のとおりです。

wx.navigateTo({
  URL: '/pages/index/index?page=/pages/home/home&id=0077FF'
})

はい、正しくお読みいただけました。「/pages/home/home」のような値を渡すことができます。他の特殊文字も変換されるはずですが、試していません。

アプレットのURL転送オブジェクト

オブジェクトまたは配列を渡す場合:

送信: 最初に文字列に変換してからエンコードします。

受信: 最初にデコードし、次にオブジェクトを変換します。

データ = {
	名前: '包子',
  タイプ: '牛肉の春雨'
}
wx.navigateTo({
  url: `/pages/index/index?page=/pages/home/home&params=${encodeURIComponent(JSON.stringify(data))}`
})

onLoad (オプション) {
	const {page} = オプション;
	定数パラメータ = JSON.parse(decodeURIComponent(options.params))
}

まあ、こうやって広げるだけなら何も問題ないです。

ストアを言及する

このプロジェクトでは mobx を使用しています。mobx で取得した配列データが非常に奇妙になります。解決策は不明です。 mobx には toJS() メソッドがあるので、それを使用してください。

'mobx-miniprogram' から {toJS} をインポートします。
値をtoJS(xxxx)にします

スピンジャンプ

ジャンプに関してはミニプログラムの公式サイトにとてもわかりやすく説明されているので、ここで表にしておきます。

wx.switchTab. -0-0----> tabBar ページにジャンプし、tabBar 以外のページをすべて閉じます (公式 Web サイトの元の言葉)

EventChannel に関しては、上で述べたページ間の値の受け渡しです。emit のみ使用しました。off, on, once の残りは使ったことがないので、シナリオがないとわかりにくいので説明が難しいです。publish-subscribe モデルを使えば何か書けそうです。

2つのテーブルは明確に分かれていると思いますか？ ふふふ。実は、マークダウンテーブルをうまく使っていなかったので、分けておいた方が適切だと感じています。

要約する

WeChatミニプログラムページ間の値の転送に関するこの記事はこれで終わりです。WeChatミニプログラムページ間の値の転送に関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援してください。