20.微信小程序之从子页面退回父页面时的数据传递 wx.navigateBack()

朱雀 2022-03-26 11:13 294阅读 0赞

凌晨十二点半。。。磨磨蹭蹭开了电脑的后果

废话少说，要实现：

**1.在【父级页】调用wx.navigateTo方法到【子级页】**

**2.然后从【子级页】返回【父级页】，并将【子级页】中的数据传回【父级页】**

这样做的好处是【父级页】输入的信息不会因为跳转而被清空

# 一.效果图 #

1.![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70][]

2.![20190117004210295.png][]

3.![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1][]

# 二、代码 #

1.first.wxml

<view class="wrap">
      <view>我是父级页面</view>
      <button bindtap='goToSecond'>去子级页面</button>
      <text wx:if="{
       {secondData}}">子级页面带回来的参数是：{
       {secondData}}</text>
      <view  wx:if="{
       {secondData}}" class='tip'>此时页面数据已经改变为我们传递过来的数据。如果想要返回之后处理这些数据，那么要在onShow函数里执行，因为我们执行的是返回，所以不会触发onLoad函数，所以我们要在onShow里执行我们想要使用的函数。</view>
    </view>

2.first.js

Page({
    
      data: {
        iswitch:'first',
        secondData:''
      },
    
      goToSecond(){
        wx.navigateTo({
          url: '../second/second'
        })
      }, 
    })

3.second.wxml

<view class="wrap">
      <view>我是子级页面</view>
      <button bindtap='goToFirst'>返回父级页面</button>
    </view>

4.second.js

Page({
      data: {
        //标记是子级页，可以在console.log(pages) 中查看
        iswitch: 'second',
      },
    
      goToFirst(){
        var pages = getCurrentPages();
        console.log(pages);
        var currPage = pages[pages.length-1];
        console.log('当前页：');
        console.log(currPage);
        var prevPage = pages[pages.length-2];
        console.log('上一个页面：');
        console.log(prevPage);
        prevPage.setData({
          secondData:'盘子呐'
        })
    
    
        wx.navigateBack({
          //返回上一级
          delta: 1,
        })
      },
      
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70]: /images/20220326/6776b09ce0e6492599391f000c5debc5.png
[20190117004210295.png]: /images/20220326/6a699cca9487474390939e6d1870567e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1]: /images/20220326/92b8432522b444318354659478450832.png