微信小程序 - 页面间的传值（从页面路由栈中直接获取和操作目标 Page 对象）...

最新推荐文章于 2024-04-26 10:27:26 发布

weixin_34192816

最新推荐文章于 2024-04-26 10:27:26 发布

阅读量873

点赞数 1

原文链接：https://my.oschina.net/hp2017/blog/1837344

版权

为什么80%的码农都做不了架构师？>>>

页面间的参数传递开发中很常见的，在这里总结分享下小程中页面间的参数传递。

打个比方先，假如有两个页面 A 、B，A 暂且称为父页面，B 暂且称为子页面，那么页面间跳转情况的参数传递无非两种情况： A ==> B 父页面到子页面，B ==> A 子页面到父页面。

第一种情况 A ==> B 父页面到子页面

这种情况很简单可以使用小程序导航，参考API很简单，举个简单的栗子。

//页面 A 代码
wx.navigateTo({
  url: url: "/pages/B/B?a=1&b=2"
})


//页面 B 代码
Page({
  onLoad: function (options) {
    var a = options.a;
    var b = options.b; 
    console.log(a) // 值：1
    console.log(b) // 值：2
  }
})

当然了进行跳转传值使用其它方式也行（参考小程序导航），携带参数方式大同小异，在 onload 中接受参数，在其它生命周期中也行，自己参考下小程序生命周期函数，这些先都不说言归正传。

第二种情况 B ==> A 子页面到父页面

这种情况也比较常见，但是我们想一下怎么在 B 退回到 A 页面时候携带参数到 A 页面呢？使用小程序导航跳转携带参数吗？本人试过好多次不行，那么有其他什么好办法吗？

方法1：从页面路由栈中直接获取和操作目标 Page 对象

这种方式调用小程序 API ：getCurrentPages() 函数获取当前页面栈的实例（参考小程序路由），这个路由栈中按照页面的路由顺序存放着相应的 Page 对象，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。这样我们可以获取上一个页面的对象，进而可以调用上一页方法为传参提供了可能。

var pages = getCurrentPages();
var currPage = pages[pages.length - 1];  //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面

//直接调用上一个页面的 setData() 方法，把数据存到上一个页面中去
prevPage.setData({
  mydata: {a:1, b:2，c:3}
})

在上一个页面中 onShow 方法中接受即可得到值

  onShow: function () {
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1]; //当前页面
    console.log("data：", currPage)
    var dataList = currPage.data.mydata
    console.log("data：", dataList)
  },

方法2：使用数据存缓存

可以参考小程序数据缓存

//页面 A 
wx.setStorageSync("tag", 1)

//页面 B
onShow: function () {
    var value = wx.getStorageSync('tag')
    console.log(value ) //值：1
    //如果只用一次，获取后即可清除
    wx.removeStorageSync("tag1")
  }
},

两种方法各有利弊，不过个人推荐方法1，逻辑上比较清晰，也不用对缓存数据进行操作。

如果你有更加好的方法，请不要吝啬你的才华请多多分享噢。

同时也希望微信小程序能出现更好的设计框架解决这种问题。

水平有限，若有问题请留言交流！

互相学习，共同进步：）转载请注明出处谢谢！

转载于:https://my.oschina.net/hp2017/blog/1837344