当前位置:首页 > 日记 > 正文

微信小程序返回多级页面的实现方法

微信小程序返回多级页面的实现方法

微信小程序返回多级页面的实现方法

微信小程序开发中,返回上一页是很普遍的操作,最常见的是点击手机的返回键和点击自定义的按钮返回上一页这两种情况。点击手机的返回键我们不需要做处理,如果是自定义按钮实现返回效果,就要调用微信提供的API:

wx.navigateBack(OBJECT)

也可以通过 wx.navigateBack 方法实现返回多级页面,只要设置 delta 的值就可以:

//在C页面内 navigateBack,将返回A页面,delta = 1 时与 wx.navigateBack() 效果一致wx.navigateBack({ delta: 2})

但是有些时候,我们需要实现点击手机的返回键,也返回上两页或者多页,这样子就不能直接用上面的方法来处理了。我用过下面的两种方法来实现:

方法一:在页面C的 onUnload 方法里面调用 wx.navigateBack() ,这样可以实现返回到页面A,不过会有个问题,如果把页面C分享到微信聊天会话里面,然后关闭小程序,再从聊天会话打开页面C,还会调用 wx.navigateBack() 方法,并且报这个异常:

WAService.js:9 navigateBack with an unexist webviewId 0

方法二:另一种方法是在页面B的 onShow 方法中调用 wx.navigateBack() 实现返回 ,这样就可以避免方法一中出现的问题。实现的思路如下:

① 在页面C的 onUnload 方法里面判断是否可以返回前n页,通过 getCurrentPages() 方法可以获取当前的页面栈,根据页面栈的长度判断可以返回的层数,并且可以给所有页面的 data 设置参数,这里以返回上两页为例:

 //这里是页面C的 onUnload 方法  onUnload: function() {    var that = this    //判断页面栈里面的页面数是否大于2    if(getCurrentPages().length > 2) {      //获取页面栈      let pages = getCurrentPages()      //给上一个页面设置状态      let curPage = pages[pages.length - 2];      let data = curPage.data;      curPage.setData({'isBack': true});    }  },

② 在页面B的 onShow 方法里面根据 isBack 的值,判断是否调用 wx.navigateBack() :

  //这里是页面B的 onShow 方法  onShow: function() {    var that = this    //如果 isBack 为 true,就返回上一页    if(that.data.isBack) {      wx.navigateBack()    }  },

方法一和方法二都不是直接从页面C到页面A,都是要先经过页面B,所以会出现页面B闪一下的情况,大家如果有更好的方法可以告诉我。

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

在Windows 2003中配置ASP.Net环境

在Windows 2003中配置ASP.Net环境

环境配置,配置,电脑软件,环境,Windows,大家知道,Microsoft为了更好地预防恶意用户和攻击者的攻击,在默认情况下,没有将 IIS6.0 安装到 Windows Server 2003 家族的成员上。而且,当我们最初安装 IIS6.0 时,该服务在高度安全和"锁定"模式下安装…

WPS表格如何筛选大于某个数

WPS表格如何筛选大于某个数

筛选,方法,表格,电脑软件,WPS,  Excel是最常用的数据整理、分析、统计的一个软件,而数据统计中有时候会需要把大于某值的数字才显示出来,所以今天小编整理了关于excel中如何吧大于某值显示出来的教程供大家学习、借鉴。WPS表格大于某个数的…

如何将PPT幻灯片大小更改为标准或

如何将PPT幻灯片大小更改为标准或

幻灯片,宽屏,如何将,大小,标准,在早期版本的 PowerPoint 中,幻灯片的形状较方 (4:3)。 世界上的许多电视和视频都已采用宽屏和高清格式,PowerPoint 也是如此。现在,默认的幻灯片大小是宽屏 (16:9)。 您可以按照以下方法更改幻灯片大小:标准 (4:…

CDR绘制漂亮的卡通福袋教程

CDR绘制漂亮的卡通福袋教程

教程,绘制,卡通,漂亮,福袋,效果图:主要过程:1、首先用椭圆工具绘制一个椭圆转曲调成一个鱼缸的形状,填充颜色,如图2、椭圆工具绘制一个椭圆填充颜色,再复制一个等比例缩小,填充颜色,如图3、用文字工具打上“福”字,选择有点艺术字的字体,…

Word中2010版进行给文档页面添加边

Word中2010版进行给文档页面添加边

文档,边框,操作技巧,底纹,页面,  使用Word 2010的时候,怎样给给文档页面添加边框和底纹呢?今天,小编就教大家在Word中2010版进行给文档页面添加边框和底纹的操作技巧。Word中2010版进行给文档页面添加边框和底纹的操作步骤打开word,点击&ldq…

AI如何绘制渐变质感的立体字母C?

AI如何绘制渐变质感的立体字母C?

绘制,渐变,质感,字母,电脑软件,版权申明:本文原创作者“格律设计”,感谢“格律设计”的原创经验分享!使用AI如何绘制渐变质感的立体字母C?教程主要用到了AI的椭圆工具、路径查找器、旋转工具、形状生成工具、直接选择工具…

前端构建工具之gulp的语法教程

前端构建工具之gulp的语法教程

语法,教程,构建工具,电脑软件,gulp,前言上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法。语法说来其实很简单,主要有以下4种:gulp四种语法现在我们把src下面的index.html文件copy到发布文件夹dist下:复制单个文件webstorm下运行点击…

BootStrap 导航条实例代码

BootStrap 导航条实例代码

实例代码,导航条,电脑软件,BootStrap,一、默认的导航条制作默认的导航条,可分以下几步:1.在ul里加上(ul class="nav navbar-nav")样式;2.在ul外加一层div或nav(ps:HTML5新属性),并且添加样式(div class="navbar nabar-default");<nav class="n…

php array_map使用自定义的函数处

php array_map使用自定义的函数处

函数,自定义,组中,电脑软件,php,array_map 将回调函数作用到给定数组的单元上。说明array array_map ( callable $callback , array $arr1 [, array $... ] )array_map() 函数将用户自定义函数作用到数组中的每个值上,并返回用户自定义函数…

详解PHP函数 strip_tags 处理字符

详解PHP函数 strip_tags 处理字符

缺陷,函数,字符串,详解,电脑软件,详解PHP函数 strip_tags 处理字符串缺陷bugPHP 函数 strip_tags() 是一个常用函数,该函数可以剥去字符串中的 HTML、XML 以及 PHP 的标签。极大方便了对字符串的操作,但是 strip_tags() 函数存在缺陷bug,由于 …

JavaScript之map reduce_动力节点J

JavaScript之map reduce_动力节点J

学院,节点,动力,电脑软件,map,如果你读过Google的那篇大名鼎鼎的论文“MapReduce: Simplified Data Processing on Large Clusters”,你就能大概明白map/reduce的概念。map举例说明,比如我们有一个函数f(x)=x2,要把这个函数作用在一个数组[1, …

PHP中类的自动加载的方法

PHP中类的自动加载的方法

方法,自动加载,电脑软件,PHP,类的自动加载是指,在外面的页面中,并不需要去“引入”类文件,但是程序会在需要的时候动态加载需要的类文件。方法1:使用__autoload魔术函数当程序需要某个类时,就会去调用该函数,该函数我们需要自己去定义并在其中写…