• 24小时服务热线:400-088-1128

当前位置 南顺网络>> 知识拓展

微信小程序如何点击返回时传递数据给上一个页面之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

当前页面:[a-page.wxml]

    {{name}}    

    {{dataFromB}}



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

当前页面:[b-page.wxml]

    {{name}}


     

        世界杯冠军:{{array[index]}}

     


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 等。