微信小程序页面返回传值的解决方案是什么

这篇文章主要介绍“微信小程序页面返回传值的解决方案是什么”，在日常操作中，相信很多人在微信小程序页面返回传值的解决方案是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序页面返回传值的解决方案是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联于2013年开始，先为习水等服务建站，习水等地企业，进行企业商务咨询服务。为习水企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

使用场景

小程序从A页面跳转到B页面，在B页面选择一个值后返回到A页面，在A页面使用在B页面选中的值。例如：在购买订单页面跳转到地址列表，选择完地址以后回退到订单页面，订单页面的配送地址需要同步更新。

解决方案

常见的比容要容易解决的方案是使用小程序的全局存储globalData、本地缓存storage、获取小程序的页面栈，调用上一个Page的setData方法、以及利用wx.navigateTo的events属性监听被打开页面发送到当前页面的数据。下面给大家简单对比下四种方法的优缺点：

1、使用globalData实现

//page A
const app = getApp() //获取App.js实例
onShow() {//生命周期函数--监听页面显示
  if (app.globalData.backData) {
    this.setData({ //将B页面更新完的值渲染到页面上
      backData: app.globalData.backData
    },()=>{
     	delete app.globalData.backData //删除数据 避免onShow重复渲染
    })
  }
}
//page B
const app = getApp() //获取App.js实例
changeBackData(){
   app.globalData.backData = "我被修改了"
   wx.navigateBack()
}

2、使用本地缓存Storage实现

//page A
  onShow: function () {
    let backData = wx.getStorageSync("backData")
    if(backData){
       this.setData({
     		 backData
    	},()=>{
     		 wx.removeStorageSync("backData")
    	})
    }
  },
 //page B
 changeBackData(){
    wx.setStorageSync("backData", "我被修改了")
    wx.navigateBack()
 },

3、使用小程序的Page页面栈实现

使小程序的页面栈，比其他两种方式会更方便一点而且渲染的会更快一些，不需要等回退到A页面上再把数据渲染出来，在B页面上的直接就会更新A页面上的值，回退到A页面的时候，值已经被更新了。globalData和Storage实现的原理都是在B页面上修改完值以后，回退到A页面，触发onShow生命周期函数，来更新页面渲染。

//page B
changeBackData(){
    const pages = getCurrentPages();
    const beforePage = pages[pages.length - 2]
    beforePage.setData({  //会直接更新A页面的数据，A页面不需要其他操作
      backData: "我被修改了"
    })
}

4、使用wx.navigateTo API的events实现

wx.navigateTo的events的实现原理是利用设计模式的发布订阅模式实现的，有兴趣的同学可以自己动手实现一个简单的，也可以实现相同的效果。

//page A
 goPageB() {
    wx.navigateTo({
      url: "B",
      events: {
        getBackData: res => { //在events里面添加监听事件
          this.setData({
            backData: res.backData
          })
        },
      },
    })
  },
//page B	
changeBackData(){
    const eventChannel = this.getOpenerEventChannel()
       eventChannel.emit("getBackData", {  
     	 backData: "我被修改了"
    });
     wx.navigateBack()
 }

到此，关于“微信小程序页面返回传值的解决方案是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

当前名称：微信小程序页面返回传值的解决方案是什么
新闻来源：http://shouzuofang.com/article/jpepsh.html

网站建设知识