微信小程式傳回上級頁面傳參的幾種方法

文章目錄

• • 1、使⽤本地緩存Storage實作
  • 2、使⽤⼩程式的Page頁⾯棧getCurrentPages實作
  • 3、使⽤globalData實作
  • 4、使⽤wx.navigateTo API的events實作

在做微信小程式跳轉頁面，經常會遇到二級頁面要傳回上級頁面，并且需要攜帶參數，wx.navigateTo()跳轉大家都知道直接在url上面拼接參數，之後再二級頁面onLoad(options)裡擷取，但是傳回頁面wx.navigateBack()不可以那樣做，是以就可以用以下幾種方式來做，具體看個人業務适合用哪種吧，沒有固定的。

1、使⽤本地緩存Storage實作

setStorage存儲

将資料存儲在本地緩存中指定的 key 中。會覆寫掉原來該 key 對應的内容。除非使用者主動删除或因存儲空間原因被系統清理，否則資料都一直可用。單個 key 允許存儲的最大資料長度為 1MB，所有資料存儲上限為 10MB。

// 異步存儲
	wx.setStorage({
	  key:"key",
	  data:"value"
	})

	// 開啟加密存儲
	wx.setStorage({
	  key: "key",
	  data: "value",
	  encrypt: true, // 若開啟加密存儲，setStorage 和 getStorage 需要同時聲明 encrypt 的值為 true
	  success() {
	    wx.getStorage({
	      key: "key",
	      encrypt: true, // 若開啟加密存儲，setStorage 和 getStorage 需要同時聲明 encrypt 的值為 true
	      success(res) {
	        console.log(res.data)
	      }
	    })
	  }
	})

	// 同步存儲
	try {
	  wx.setStorageSync('key', 'value')
	} catch (e) { }
           

getStorage擷取

從本地緩存中異步擷取指定 key 的内容。

// 異步擷取
	wx.getStorage({
	  key: 'key',
	  success (res) {
	    console.log(res.data)
	  }
	})

	// 開啟加密存儲
	wx.setStorage({
	  key: "key",
	  data: "value",
	  encrypt: true, // 若開啟加密存儲，setStorage 和 getStorage 需要同時聲明 encrypt 的值為 true
	  success() {
	    wx.getStorage({
	      key: "key",
	      encrypt: true, // 若開啟加密存儲，setStorage 和 getStorage 需要同時聲明 encrypt 的值為 true
	      success(res) {
	        console.log(res.data)
	      }
	    })
	  }
	})

	// 同步擷取
	try {
	  var value = wx.getStorageSync('key')
	  if (value) {
	    // Do something with return value
	  }
	} catch (e) {
	  // Do something when catch error
	}
           

removeStorage、clearStorage清除緩存

清理本地資料緩存。

// 從本地緩存中移除指定 key。
	wx.removeStorage({
	  key: 'key',
	  success (res) {
	    console.log(res)
	  }
	})
	
	try {
	  wx.removeStorageSync('key')
	} catch (e) {
	  // Do something when catch error
	}
	
	// 清理本地資料緩存。
	wx.clearStorage()
	
	try {
	  wx.clearStorageSync()
	} catch(e) {
	  // Do something when catch error
	}
           

2、使⽤⼩程式的Page頁⾯棧getCurrentPages實作

在目前頁設定上一頁的data

var pages = getCurrentPages(); // 擷取頁面棧
	var currPage = pages[pages.length - 1]; // 目前頁面
	var prevPage = pages[pages.length - 2]; // 上一個頁面
	prevPage.setData({
		// 要設定的值
		mydatas: {
			a:1,
			b:2
		} 
	})
	wx.navigateBack({ delta: 1})
           

直接調用方法名來更新資料

【頁面A使用wx.navigateTo跳轉到頁面B】

// 頁面A
	Page({ 
		data: { name: '' }, 
		//更新name 
		changeData: function(name){ 
			this.setData({ name: name }) 
		}
	})
           

// 頁面B
	Page({ 
		// 此方法用于文本框輸入回調 
		onInputback : function (e) { 
			//擷取頁面棧 
			var pages = getCurrentPages(); 
			if(pages.length > 1){ 
				//上一個頁面執行個體對象 
				var prePage = pages[pages.length - 2]; 
				// 調用上個頁面的方法 
				prePage.changeData(e.detail.value) 
			} 
		}
	})
           

3、使⽤globalData實作

使用全局存儲儲存值，在需要的地方使用或修改

var app = getApp();
	Page({
	  onLoad: function() {
	  	// 擷取globalData裡的值
	    console.log(app.globalData.xxx);
	    
		// 設定globalData裡的值
		getApp().globalData.xxx = 'abc'
	  }
	})
           

4、使⽤wx.navigateTo API的events實作

wx.navigateTo的events的實作原理是利⽤設計模式的釋出訂閱模式實作的

wx.navigateTo({
	  url: 'test?id=1',
	  events: {
	    // 為指定事件添加一個監聽器，擷取被打開頁面傳送到目前頁面的資料
	    acceptDataFromOpenedPage: function(data) {
	      console.log(data)
	    },
	    someEvent: function(data) {
	      console.log(data)
	    }
	    ...
	  },
	  success: function(res) {
	    // 通過 eventChannel 向被打開頁面傳送資料
	    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
	  }
	})
           

//test.js
	Page({
	  onLoad: function(option){
	    console.log(option.query)
	    const eventChannel = this.getOpenerEventChannel()
	    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
	    eventChannel.emit('someEvent', {data: 'test'});
	    // 監聽 acceptDataFromOpenerPage 事件，擷取上一頁面通過 eventChannel 傳送到目前頁面的資料
	    eventChannel.on('acceptDataFromOpenerPage', function(data) {
	      console.log(data)
	    })
	  }
	})
           

比較：

• globalData

  和

  Storage

  兩種⽅法在頁⾯渲染效果上⽐其他兩種稍微慢⼀點

• getCurrentPages

  和

  events

  兩種⽅法在B頁⾯回退到A頁⾯之前已經觸發了更新，

  ⽽

  globalData

  和

  Storage

  兩種⽅法是等傳回到A頁⾯之後，在A頁⾯才觸發更新。

  并且

  globalData

  和

  Storage

  兩種⽅式，

  要考慮到A頁⾯更新完以後要

  删除globalData

  和

  Storage

  的資料，

  避免onShow⽅法⾥⾯重複觸發setData更新頁⾯。

• 是以個⼈更推薦⼤家使⽤

  getCurrentPages

  和

  events

  兩種⽅式。**