微信小程序返回上级页面传参的几种方法

在做微信小程序跳转页面，经常会遇到二级页面要返回上级页面，并且需要携带参数，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两种⽅式。**