微信小程序返回上级页面传参的几种方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序返回上级页面传参的几种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

比较：文章来源地址https://www.toymoban.com/news/detail-483008.html

globalData和Storage两种⽅法在页⾯渲染效果上⽐其他两种稍微慢⼀点
getCurrentPages和events两种⽅法在B页⾯回退到A页⾯之前已经触发了更新，
⽽globalData和Storage两种⽅法是等返回到A页⾯之后，在A页⾯才触发更新。
并且globalData和Storage两种⽅式，
要考虑到A页⾯更新完以后要删除globalData和Storage的数据，
避免onShow⽅法⾥⾯重复触发setData更新页⾯。
所以个⼈更推荐⼤家使⽤getCurrentPages和events两种⽅式。**