uni-app 之返回上一个页面并传递参数(以微信小程序为例)

在uni-app中,想要返回页面时获取参数。需要用到当前页面的堆栈getCurrentPages()

背景

 要求:从页面1跳转到页面2, 然后页面2返回页面1时代参数。

实现

在页面2返回按钮,或监听返回事件时,执行方法。

 1 reBack: function() {
 2     let pages = getCurrentPages();
 3     if (pages.length >= 2) {
 4         let curPage = pages[pages.length - 1]; // 当前页面
 5         let prePage = pages[pages.length - 2]; // 上一页面
 6         // #ifdef H5
 7         prePage.$vm.param1 = 1;
 8         prePage.$vm.param2 = 2;
 9         // #endif
10         // #ifdef MP-WEIXIN || MP-QQ
11         prePage.setData({
12             param1: 1,
13             param2: 2
14         })
15         // #endif
16         uni.navigateBack();
17     }
18 }

在页面1的生命周期 onShow 监听或获取当前页面的参数。

onShow: function() {
    let pages = getCurrentPages();
    let curPage = pages[pages.length - 1];
    // #ifdef MP-WEIXIN || MP-QQ
    console.log("param1", curPage.data.param1);
    console.log("param2", curPage.data.param2);
    // #endif
    // #ifdef H5
    console.log("param1", curPage.$vm.param1);
    console.log("param2", curPage.$vm.param2);
    // #endif
},

这里,当从页面2返回页面1时,输出值为

param1 1param2 2

注:H5 和微信、QQ等小程序设置和获取页面参数的方法不同。

uni-app 之返回上一个页面并传递参数(以微信小程序为例)

上一篇:以太坊代币开发(ERC20标准)


下一篇:[学习]Apache 虚拟域名配置