微信小程序如何点击返回时传递数据给上一个页面之getCurrentPages

数据共享

常规的页面数据共享，这个很大众了，也很简单，可以把数据放到app.js中的一个变量中存储起来，然后各个页面通过getApp()来得全局app，从而共享数据。
app.js

App({
    globalData: {
        userInfo: null
    }
})

其他页面

const app = getApp();

let username= ‘username’;
//设置全局变量
app.globalData.userInfo = {
     username: username
 };



let username02= '';
/**获取全局变量 */
if (app.globalData.username) {
    username02= app.globalData.userInfo.username;
    if (username02) {
        // doSomething
    }
}

页面间数据传递

1、分析

• 需求：【页面a】到转到页面【页面b】，做出一些骚操作，然后返回，将b页面的数据带给a页面。
• 核心知识点：

        let pages = getCurrentPages();
        let currPage = null; //当前页面
        let prevPage = null; //上一个页面

        if (pages.length >= 2) {
            currPage = pages[pages.length - 1]; //当前页面
            prevPage = pages[pages.length - 2]; //上一个页面
        }
        if(prevPage){
            prevPage.setData({
                dataFromB: '2018世界杯冠军：'+this.data.array[e.detail.value]
            });
         }

• 效果图：
  

2、代码实现

【a页面】的代码实现：

• a-page.wxml

<!--pages/page-callback/a-page/a-page.wxml-->
<text class='currentPage'>当前页面:[a-page.wxml]</text>
<view class='container'>
    <text>{{name}}</text>    
    <text>{{dataFromB}}</text>
</view>

<button type = "primary" catchtap='goToPageB'>跳转到下一页</button>

• a-page.wxss

/* pages/page-callback/a-page/a-page.wxss */
page{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #fff;
}

.currentPage{
    width: 100%;
    height: 80rpx;
    padding-left: 150rpx;
    background-color: #f0f;
    line-height: 80rpx;

}
.container{
    width: 600rpx;
    height: 300rpx;
    background-color: #f0f;
    margin-top: 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 80rpx;
}

• a-page.js

// pages/page-callback/a-page/a-page.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      name:'我是张三',
      dataFromB:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  goToPageB :function(){
      wx.navigateTo({
          url: '../b-page/b-page',
      })
  }


})

【b页面】的代码实现：

• b-page.wxml

<!--pages/page-callback/b-page/b-page.wxml-->
<text class='currentPage'>当前页面:[b-page.wxml]</text>
<view class='container'>
    <text>{{name}}</text>
</view>

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
     <view class="picker">
        世界杯冠军：{{array[index]}}
    </view> 
</picker>

• b-page.wxss

/* pages/page-callback/b-page/b-page.wxss */

page {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #fff;
}

.currentPage {
    width: 100%;
    height: 80rpx;
    padding-left: 150rpx;
    background-color: #0ff;
    line-height: 80rpx;
}

.container {
    width: 600rpx;
    height: 300rpx;
    background-color: #0ff;
    margin-top: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80rpx;
}

• b-page.js

// pages/page-callback/b-page/b-page.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        name: '我是李四',
        array: ['克罗地亚', '英格兰', '法国', '比利时'],
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {

    },

    bindPickerChange: function(e) {
        let pages = getCurrentPages();
        let currPage = null; //当前页面
        let prevPage = null; //上一个页面

        if (pages.length >= 2) {
            currPage = pages[pages.length - 1]; //当前页面
            prevPage = pages[pages.length - 2]; //上一个页面
        }
        if(prevPage){
            prevPage.setData({
                dataFromB: '2018世界杯冠军：'+this.data.array[e.detail.value]
            });
         }
        this.setData({
            index: e.detail.value
        })
    },
})

Page对象

getCurrentPages()获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。在【b页面】打印getCurrentPages()如下图，可见 数组包含两个对象，对象的字段，都是页面对象Page({...})中定义的字段，有的字段是指如data，有的字段时函数，如自定义函数 bindPickerChange 等。