微信小程序中带参数返回上一页的方法总结「三种」-猿码集

微信小程序中带参数返回上一页的方法总结「三种」

在微信小程序中，有时候需要在返回上一页的同时，传递一些参数供上一页使用。以下是三种实现带参数返回上一页的方法：

方法一：使用wx.navigateBack方法传参

这种方法是使用微信小程序提供的wx.navigateBack函数，在该函数中通过delta、success、fail、complete等参数控制返回上一页的行为。其中delta表示返回的层数，success表示成功时的回调函数，fail表示失败时的回调函数，complete表示执行完后的回调函数。传递参数时，可以使用url传递参数，需要将参数拼接在url上。示例代码：


wx.navigateBack({
  delta: 1,
  success: function(res){
    // 回调函数
  },
  fail: function() {
    // 回调函数
  },
  complete: function() {
    // 回调函数
  }
})

在上一页的Page对象的onLoad函数中，可以通过options获取传递的参数。示例代码：


onLoad: function(options){
  console.log(options)
}

需要注意，使用wx.navigateBack方法传参时，向上一页传参的数据有大小限制，不能超过1MB。

方法二：使用事件触发传参

这种方法是通过在当前页面触发事件，在上一页监听事件传递参数。首先，在当前页面定义一个事件，代码如下：


var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];
prevPage.onLoad=function(options){
  console.log(options)
}

在上一页的onLoad函数中监听这个事件，代码如下：



onJump: function() {
  var pages = getCurrentPages();
  var prevPage = pages[pages.length - 2];// 上一页
  prevPage.triggerEvent('myevent', {mydata: '这是传给上一页的数据'})// 触发上一页监听的myevent事件
}

需要注意，使用事件触发传参时，向上一页传参的数据没有大小限制。

方法三：使用wx.setStorage传参

这种方法是使用wx.setStorage进行本地存储，在上一页中使用wx.getStorage获取存储的参数。在当前页面调用wx.setStorage存储参数，代码如下：


var that=this
that.setData({
  mydata: '这是需要传递的数据'
})
wx.setStorage({
  key: "mydata",
  data: that.data.mydata
})

在上一页的onLoad函数中使用wx.getStorageSync获取存储的参数，代码如下：


onLoad: function () {
  var mydata=wx.getStorageSync('mydata')
  console.log(mydata)
}

需要注意，使用wx.setStorage传参时，向上一页传参的数据没有大小限制，但是需要注意小程序的存储上限，默认大小为10MB，超出后会自动删除早前的数据。

总结

以上就是微信小程序中三种实现带参数返回上一页的方法。需要注意的是，使用wx.navigateBack传参存在数据大小限制，使用事件触发传参需要在上一页监听事件，使用wx.setStorage传参需要注意小程序的存储上限，在实际使用中需要根据实际情况选择合适的传参方式。

微信小程序中带参数返回上一页的方法总结「三种」