美文网首页微信小程序小程序微信小程序从基础到进阶
微信小程序从子页面退回父页面时的数据传递

微信小程序从子页面退回父页面时的数据传递

作者: 一斤代码 | 来源:发表于2016-12-23 14:59 被阅读23191次

    我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数。例如:

    // 源页面A相关代码
    wx.navigateTo({
      url: "/pages/mypage/mypage?a=1&b=2"
    })
    
    // 目标页面B相关代码
    Page({
      onLoad: function (options) {
        var a = options.a; // 值:1
        var b = options.b; // 值:2
      }
    })
    
    

    但是,这种方式只有在目标页面还没有创建的时候,才有效。因为一个页面的onLoad方法在页面的生命周期中,只执行一次。

    我们来考虑一下以下场景:

    1. 在【页面A】中调用wx.navigateTo方法跳转到【页面B】
    2. 然后从【页面B】返回【页面A】, 并将【页面B】中的一些数据传回【页面A】
    

    举个更实际点的例子,如下图所示,我在这个表单页面A中填写数据:


    A页面

    然后这个页面上,有一个搜索按钮,点击该按钮,将跳转到另一个证券代码搜索页面B:


    页面B

    当我在这个搜索列表中选中一个证券代码后,将返回到上一个表单页面,继续我未完成的表单填写与提交操作。

    这种场景是非常合理和常见的。

    但是,我们来想一下,怎么在退出页面B,返回页面A的时候,把页面B中选中的证券代码回传给页面A呢?使用navigateTo()中url携带参数的方式?

    基于Page生命周期的原因,我们的答案是:不行!

    那有什么办法可以做到呢?

    方法1:使用全局数据存储
    • 将要传递的数据,存储在App对象上(比如globalData属性)。
    • 将要传递的数据,存储在小程序的本地数据缓存(Storage)中。

    例如,我们在将要退出页面B的时候,作如下调用:

    //=== 1. 存储到app对象上的方式 ========
    var app = getApp()
    app.globalData.mydata = {a:1, b:2};  //存储数据到app对象上
    wx.navigateBack();  //返回上一个页面
    
    //=== 2.存储到数据缓存的方式 =========
    wx.setStorage({
      key: "mydata",
      data: {a:1, b:2},
      success: function () {
        wx.navigateBack();   //返回上一个页面
      }
    })
    

    这样一来,当返回到上一个页面的时候,可以通过读取这些全局存储区域,来获取到我们需要的数据。

    不过,这种方式也是有很明显的缺点的。由于是全局数据存储,所以当你存入了那些数据后,必须谨慎的去管理这些全局数据(何时被销毁),否则一不小心,就会产生副作用。

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

    这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属性和方法成为可能。

    如下所示:

    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];   //当前页面
    var prevPage = pages[pages.length - 2];  //上一个页面
    
    //直接调用上一个页面的setData()方法,把数据存到上一个页面中去
    prevPage.setData({
      mydata: {a:1, b:2}
    })
    

    比起全局数据存储的方式,这种方式在逻辑上要清晰得多,也不存在对数据的销毁有额外的管理工作。

    总之,目前来看,如果你遇上了这样的场景,我推荐你使用方法2来设计你的代码。也希望小程序框架能推出更好更优雅的方式,来解决这种数据回传问题。

    最后呢,如果你有什么更好的方式,请不吝赐教啦。

    相关文章

      网友评论

      • 乞力马扎罗的雪_:每次在群里都能得到宝贵的建议,感谢群主!顶,顶,顶
      • 李大鱼_:方法2的代码写在哪里?
      • deepindo:请问
        prevPage.setData({
        mydata: {a:1, b:2}
        })

        这个prevPage里面,要定义一个setData方法么?另外mydata是先在prevPage里面定义好么?
        9e506b295c40:prevPage指上一个页面对象,就是你上一个页面的page对象,mydata是page对象下的data属性下面的一个叫mydata的属性,data是一个对象,所以无论里面有没有mydata这个属性,你只要去设置他就会有,懂吧,一个对象里面有这个属性,如果去点上这个属性,赋值,那就会改变原来这个属性的值,如果没有这个属性的话,那么就会给这个对象新增一个属性。prevPage.setData就相当于你在上一个page对象的下面的不改变this指向情况下的this.setData,你肯定遇到这种情况,this不指向Page了,这时你会用var that = this保存this变量,然后that.setData,这里的this和that和prevPage都是一个东西,他们都是一个对象,虽然名字不同,但是都指向了内存中的同一块地址,wo ri,感觉越说越迷.........
        一斤代码:"prevPage就是前一个页面的Page对象“,前一个页面的Page代码里有什么,就能调什么:)
      • 933f9c11bad3:没看懂。。。
      • f01a8555aa1a:不知道楼主有没有用wepy框架,在这个框架里面,第二种方法返回上一页时,this.data 里面取不到存入的数据,但是currPage.data却取得到,也就是说,this与currPage里面的data不是同一套数据了。。。
        9243a68a1931:层主,我是在用wepy开发小程序,也遇到了这种情况,在跳转页面setData后,返回上个界面后娶不到设置的值,currPage.data这个是wepy的api么?
        一斤代码:那肯定是不一样的,wepy的每个page是该框架封装过的wepy.page对象,和小程序原生的Page不一样,所以wepy的page的this里的结构肯定和我这文章中所说的方式拿到的Page对象的是不一样的。
      • 高阳刘:var pages = getCurrentPages();
        var currPage = pages[pages.length - 1]; //当前页面
        var prevPage = pages[pages.length - 2]; //上一个页面

        //直接调用上一个页面的setData()方法,把数据存到上一个页面中去
        prevPage.setData({
        mydata: {a:1, b:2}
        })
        这些写在当前页面,上一个页面怎么把数据拿出来呢?
        贫克慢:@高阳刘 我想请问如何把这个对象的值取出来呢?
        高阳刘:@一斤代码 明白了,谢谢:pray:
        一斤代码:你注意看,这里的代码是获取上一个页面的对象,然后把数据直接设置到上一个页面中去了:)
      • 128c169acc0f:非常有用,第二种方式很巧妙
      • 80c1c2ecce6f:第二种那如何跳转到上一页呢,setdata之后
        一斤代码:返回还是用wx.navigateBack()
      • 妹子爱编程:楼主小哥哥第二种方法貌似没发调用你说的 setData方法吧
        妹子爱编程:@一斤代码 可以的小哥哥,我再试一次,是我代码写错了
        一斤代码:为了你这句评论我又再次亲自去测试了一下,确认是可以工作的。
        所以请仔细检查一下你的代码吧:)
      • 流星雨1990:楼主说的第二种方法很合理,一下就能看明白,易于接受
      • da630f786635:我是用了这个参数 但是无法调用setData
        妹子爱编程:没发实现么? 小哥哥
      • 汗青fullstack:最近也在思考这个问题,http://www.jianshu.com/p/da45f520a071 这里有个解决方案,可以参考下
      • 0b95cb620d51:可以使用https://github.com/hustcc/onfire.js这个库
        方便、小巧<1K
        使用方便:
        父页面onLoad中
        onfire.on('search', function (args) {
        that.setData({ searchVal: args.inputVal });
        });
        子页面中:
        onfire.fire('search', { inputVal: this.data.inputVal });
        933f9c11bad3:大佬教我
        一斤代码:@0b95cb620d51 嗯,采用自定义事件机制也算是一种不错的方式吧。
      • 焉知非鱼:页面间的反向传值。赞

      本文标题:微信小程序从子页面退回父页面时的数据传递

      本文链接:https://www.haomeiwen.com/subject/mtekvttx.html