小程序开发：如何轻松返回上一页？

哈喽大家好！近在捣鼓微信小程序开发，真是又爱又恨啊！尤其是那个返回上一页的功能，一开始把我整得晕头转向的，后来摸索着搞明白了，现在来跟大家分享一下我的“血泪史”和一些小技巧，保证看完之后，你也能轻松搞定！

咱们先说说为什么返回上一页这么让人头大。小程序页面跳转，通常用wx.navigateTo，这玩意儿就像搭积木，一层层往上加。你点个按钮，跳到下一个页面，再点，又跳到下下一个…… 这没但你想返回上一页呢？总不能一个一个wx.navigateBack地退回去吧？想想都累！更要命的是，很多时候，你还得带着数据返回上一页！

简单的情况，就是你直接用wx.navigateBack()。这就像坐电梯，直接回到上一层。代码简单到爆，一行就搞定：

javascript

wx.navigateBack({

delta: 1 // 返回上一级页面，如果想返回多级，修改delta的值即可

但！是！这方法有个大大的缺点：它不会刷新上一页！这意味着，如果你在上一页做了修改，返回后这些修改可能不会显示出来！这就像你辛辛苦苦写了一篇文章，保存后返回上一页，发现文章还是老样子，是不是很崩溃？

那怎么办呢？别急，咱们还有其他的办法！

方法一：曲线救国——用setData传递数据

这个方法比较灵活，适合那些需要传递少量数据的场景。原理是：在返回上一页之前，先把数据塞到上一页里。怎么塞呢？利用getCurrentPages()这个API，它可以获取当前页面的实例，就像翻看你的页面“历史记录”。

javascript

// 在当前页面（要返回的页面）

wx.navigateBack({

success: function (res) {

let pages = getCurrentPages();//获取页面栈

let prevPage = pages[pages.length - 2];//拿到上一个页面

prevPage.setData({//给上一个页面设置数据

myData: '从当前页面传递过来的数据'

然后，在上一个页面onShow生命周期里接收数据。onShow就像个门卫，每次页面显示的时候都会执行。

javascript

// 在上一页（要返回到的页面）

Page({

data: {

myData: '' // 初始化数据

onShow: function () {

// 接收数据

console.log(this.data.myData) // 查看传递过来的数据

这种方法的好处是简单直接，但也有缺点：数据量一大，就显得有点笨拙了，而且数据传递过程容易出错。

方法二：本地存储——像个小本本一样记着数据

这个方法有点像用小本本记账，把数据暂时记在本子上，需要的时候再拿出来。微信小程序提供了wx.setStorageSync()和wx.getStorageSync()这两个API，方便你进行本地数据存储和读取。

在当前页面：

javascript

wx.setStorageSync('myData', '需要传递的数据');

wx.navigateBack();

在上一页：

javascript

Page({

onLoad: function() {

let data = wx.getStorageSync('myData');

this.setData({myData: data});

用这个方法要注意一点：wx.setStorageSync存储的是同步数据，页面跳转速度会相对较慢，尤其是在数据量比较大的情况下。

方法三：事件总线——消息传递

这个方法比较高大上，适合复杂的应用场景，但理解起来也比较抽象。简单来说，就是创建一个全局的事件中心，页面之间通过这个中心进行通信。这个方法需要借助一些第三方库，比如emitter。这里就不展开细说了，有兴趣的朋友可以自行搜索学习。

总结一下，这三种方法各有优缺点，选择哪个方法取决于你的实际需求。

方法	优点	缺点	适用场景
setData	简单直接，代码量少	数据量大时效率低，容易出错	少量数据传递，页面跳转后立即需要数据
本地存储	数据持久化，即使页面关闭也能保存数据	同步操作，数据量大时影响页面跳转速度	需要在页面间共享数据，数据量适中
事件总线	高效，解耦，适合复杂场景	代码复杂，需要学习额外的知识	复杂场景，页面之间频繁通信，数据量大

我想问问大家，你们在开发微信小程序的时候，都遇到过哪些关于返回上一页的难题？又有哪些好用的技巧呢？欢迎在评论区分享你们的经验！让我们一起学习，一起进步！