WeChat アプレットはページパラメータの受け渡しをどのように実装しますか?

序文

アプレットが 1 ページを超える場合、ページパラメータの転送が必要になる場合があります。以下に 4 つのページメソッドをまとめます。

パス転送

URL の後にパラメータを結合することで、? を使用してパラメータとパスを区切ったり、パラメータのキーとパラメータ値を = で接続したり、異なるパラメータを &; で区切ったりします (「path?key=value&key2=value2」のように)。

ケース: パラメータと A ページ
ジャンプコードを使用して、A ページがB ページにジャンプします

goB(){
    wx.navigateTo({
      url: '/pages/B/index?id=value',
    })
  },

Bページ受信コード

onLoad: function (options) {
	console.log('id', options.id)
}

上記の場合は文字列パラメータですが、多くの場合、次のコードのようにオブジェクトを渡す必要があります。

Page({
  data: {
    userInfo:{
      name:'cym',
      age:16
    }
  },
  goB(){
    wx.navigateTo({
      url: '/pages/B/index?id='+this.data.userInfo,
    })
  },
})

上記と同じ構造を使用した場合、出力結果は次のようになります: [object Object]

このとき、パラメーターを渡すために JSON.stringify(obj) を通じてオブジェクトオブジェクトを JSON 文字列に変換し、受信ページの JSON.parse を通じて解析して使用する必要があります。

ページジャンプコード

 goB(){
    let userStr = JSON.stringify(this.data.userInfo)
    wx.navigateTo({
      url: '/pages/B/index?id='+userStr,
    })
  }

Bページ受信コード

onLoad: function (options) {
    console.log('id', JSON.parse(options.id))
  }

グローバル変数

アプリのグローバルオブジェクトを通じてグローバル変数を保存します。

app.jsコード

App({
 // 存放对象的全局变量
  globalData:{},
})

ページジャンプコード

// 获取App对象
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {
      name: 'cym',
      age: 16
    }
  },

  goB() {
    app.globalData.userInfo = this.data.userInfo
    wx.navigateTo({
      url: '/pages/B/index',
    })
  },
})

Bページ受信コード

// 获取全局对象
 const app = getApp()
Page({

  onLoad: function (options) {
    console.log(app.globalData.userInfo)
  }
})

App グローバル変数に格納され、複数のページで使用でき、App オブジェクトから直接取得できます。このデータは内部テストに保存され、アプレットが破棄されるたびに失われます。

データキャッシュ

データキャッシュに保存することによって。

ページジャンプコード

 goB() {
    wx.setStorageSync('userInfo', this.data.userInfo)
    wx.navigateTo({
      url: '/pages/B/index',
    })
  }

Bページ受信コード

 onLoad: function (options) {
    let userInfo = wx.getStorageSync('userInfo', this.data.userInfo)
    console.log(userInfo)
  }

データキャッシュに保存されているため、複数のページで使用でき、getStorageSync を使用して直接取得できます。このデータはデータキャッシュに保持され、データキャッシュがクリアされるかアプレットが削除されない限り、常に存在します。

事件通信

イベントコミュニケーションチャネルを通じて。

ページジャンプコード

goB() {
    wx.navigateTo({
      url: '/pages/B/index',
      success:(res)=>{
				// 发送一个事件
				res.eventChannel.emit('toB',{ userInfo: this.data.userInfo })
			}
    })
  }

Bページ受信コード

onLoad: function (options) {
     //	获取所有打开的EventChannel事件
     const eventChannel = this.getOpenerEventChannel();
     // 监听 index页面定义的 toB 事件
     eventChannel.on('toB', (res) => {
       console.log(res.userInfo) 
     })
   }

要約する

特定のビジネスシナリオに応じて、適切なパラメータの受け渡し方法を選択できます。