常见问题您现在的位置是:首页 > 专栏文集 > 微信小程序开发 > 常见问题

微信小程序返回上一页并携带参数,带参数返回上一页的三种方法总结(图文)

<a href='mailto:'>微wx笑</a>的头像微wx笑2019-10-12 16:56:29常见问题人已围观关键字:微信小程序

简介表单页面通常会需要这样的功能,跳转到下一个页面去选择或设置一个选择的值,这就需要在返回的时候把设置的值带回来。

微信小程序返回上一页并携带参数,带参数返回上一页的三种方法总结Kbo编程技术_踩坑日志_进阶指南 - 无知人生

表单页面通常会需要这样的功能,跳转到下一个页面去选择或设置一个选择的值,这就需要在返回的时候把设置的值带回来。Kbo编程技术_踩坑日志_进阶指南 - 无知人生


Kbo编程技术_踩坑日志_进阶指南 - 无知人生

一、全局变量

app.js 中声明的 globalData,整个程序可见Kbo编程技术_踩坑日志_进阶指南 - 无知人生

//app.js
App({
  
  globalData: {
    userInfo: null,
    openId: "",
    appId: "wx2b13bdbb7"
  },

  /**
   * 根据页面URL、页面栈返回之前打开的页面
   */
  navigation: function (pageUrl) {
    var cps = getCurrentPages();
    console.log(cps);
    var delta = 0;
    for (var i = cps.length - 1; i >= 0; i--) {
      if ("/" + cps[i].route == pageUrl) {
        if (delta == 0) {
          return;
        }
        wx.navigateBack({ delta: delta });
        return;
      }
      delta++;
    }
    wx.navigateTo({
      url: pageUrl
    });
  }
})

二、本地存储

获取数据Kbo编程技术_踩坑日志_进阶指南 - 无知人生

var openid = wx.getStorageSync("openid");
var phone = wx.getStorageSync("phone");

保存数据Kbo编程技术_踩坑日志_进阶指南 - 无知人生

wx.setStorageSync("openid", res.data.openid);
wx.setStorageSync("phone", res.data.phone);

三、页面栈

这是比较方便比较推荐的一种方式Kbo编程技术_踩坑日志_进阶指南 - 无知人生

实际应用代码
Kbo编程技术_踩坑日志_进阶指南 - 无知人生

  submit: function (e) {
    // 返回上一页携带参数
    let pages = getCurrentPages(); //获取页面栈
    let prevPage = pages[pages.length - 2]; //获取上一页引用
    let prevData = prevPage.data.assetList; //获取上一页中的数据
    
    // 。。。具体数据如何处理看你自己了。
    
    // 设置上一页中的数据,也就是把本页的数据传递给上一页
    prevPage.setData({
      assetList: prevData,
    })
    // 返回上一页
    setTimeout(() => {
      wx.navigateBack({
        delta: 1 //想要返回的层级
      })
    }, 500)
  },

prevPage.data.assetList 就是上一页 js 文件中定义的数据:Kbo编程技术_踩坑日志_进阶指南 - 无知人生

Page({

  /**
   * 页面的初始数据
   */
  data: {
    assetList: [
      { id: 1, assetName: '图书', num: 16, unit: '本', worth: 1.00, sltNum:0 },
      { id: 2, assetName: '电脑', num: 10, unit: '台', worth: 1.00, sltNum: 0 },
      { id: 3, assetName: '手机', num: 15, unit: '个', worth: 1.00, sltNum: 0 },
      { id: 4, assetName: '笔', num: 19, unit: '个', worth: 1.00, sltNum: 0 },
      { id: 5, assetName: '本', num: 6, unit: '本', worth: 1.00, sltNum: 0 },
      ],
  },
}

image.pngKbo编程技术_踩坑日志_进阶指南 - 无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()