微信小程序-页面栈

最新推荐文章于 2024-06-18 06:09:50 发布
最新推荐文章于 2024-06-18 06:09:50 发布
阅读量2.3k 收藏
点赞数
分类专栏： 微信小程序 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/belvine/article/details/80491919
版权

在小程序中以栈的形式维护了当前的所有页面

image.png


当发生路由切换的时候，页面栈的表现如下：

  • 初始化：新页面入栈

  • 打开新页面：新页面入栈(调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>)

  • 页面重定向：当前页面出栈，新页面入栈(调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>)

  • 页面返回：页面不断出栈，直到目标返回页，新页面入栈(调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮)

  • Tab 切换：页面全部出栈，只留下新的 Tab 页面(调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab)

  • 重加载：页面全部出栈，只留下新的页面(调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>)











微信小程序视频教程

​

码农博士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序页面栈的管理
辣子鸡的博客
08-22 1万+
小程序的每个页面都是一个page对象，拿到page对象就可以操作他的方法以及属性，page是放到页面栈里面的并且最多有5个，了解小程序页面栈的管理机制有助于我们进行页面跳转参数的传递，以及在目的页面改变原页面的属性达到传参的效果： 路由方式                                   页面栈 初始化 新页面入栈 打开新页面（
微信小程序中子页面向父页面传值实例详解
12-01
微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面，下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面。这个时候点选子页面的某个好友时，需要把好友的名字传递回编辑款项父页面。 ...
微信小程序的小坑坑 - 获取页面栈
技术前端，忠于热爱 @0.活在风浪里
11-29 990
先说需求 只有onLoad才有options, 那么onShow拿不到options咋取值? 解决 使用getCurrentPages() 获取页面栈 思路:获取页面栈,得到里面最大的索引,就是当前页面.用其打印options,就可以拿到,别的页面传过来的值 代码如下参考: onShow(options){ // 1 获取页面栈-数组,长度最大是10页面 let pages = getCurrentPages(); // 2 数组中 索引最大的页面就是当前页面 (length - 1 .
微信小程序:getCurrentPages()的使用
c1o2c3o4的博客
05-08 522
getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。不要在 App.onLaunch 的时候调用 getCurrentPages()，此时page 还没有生成。以上就是我在微信小程序开发中经常会遇到的getCurrentPages()使用场景。例如：进入小程序非默认首页时，需要提供返回首页的按钮或者执行其它事件。不要尝试修改页面栈，会导致路由以及页面状态错误。1、getCurrentPages()的使用。1、利用页面栈的长度。
微信小程序开发【八】-- 页面栈和模块化
老六说编程的博客
04-16 547
小程序中所有页面的路由全部由框架进行管理，而框架以栈的形式维护了当前的所有页面。小程序中所有 js 文件作用域皆为独立的，每一个 js 文件即为一个模块。
微信小程序开发之页面栈
a31017799的博客
03-24 7194
由于微信小程序做了页面栈的技术： 导致小程序开发过程中，如果使用wx.navigateTo()方法跳转页面 会将跳转之前的页面压倒页面栈之中。so，使用navigateBack（）方法会将栈首页面出栈，直到目标页面出栈。值得注意的是页面栈的容量是五个。就是说如果超过五个页面，入栈时会发生溢出。新的页面将不会被加入栈中。 这样我们要实现页面跳转只能使用重定向方法，也就是redirectT
微信小程序的概要
weixin_33751566的博客
01-21 1127
微信小程序的概要 学习小程序要了解一下什么事小程序，小程序开发前需要做哪些准备，微信小程序开发工具的使用，小程序中的目录结构解析，视图和渲染，事件。 小程序的配置详解，小程序的生命周期与app对象的使用，页面的配置，页面的生命周期和参数传递，用户的登录，UI开发。 UI开发中的布局基础，样式基础，组件的使用，视图容器的使用，基础内容组件，表单组件，操作反馈小工具，导航，多媒体的使用。 地图和LB...
戏曲文化微信小程序代码 - 小程序 - java - uniapp -springboot - 微信小程序 - 代码
01-11
1、技术栈：微信小程序，springboot，uniapp，vue，ajax，maven，mysql，MyBatisPlus 2、系统的实现 用户信息 图片素材 视频素材 摘 要 I 目 录 III 第1章 绪论 1 1.1选题动因 1 1.2背景与意义 1 第2章 相关技术...
毕设之“健康早知道”微信小程序--(源码+部署说明+SpringBoot+微信小程序+vue).zip
04-12
“健康早知道”微信小程序是一款基于SpringBoot后端、微信小程序前端和Vue技术的健康信息管理应用。它旨在为用户提供便捷的健康数据记录、分析和建议功能，帮助用户更好地关注和管理自己的健康状况。以下是该小程序...
微信小程序-云商城（带php后端）
10-29
使用LeanCloud后端云帮我省去了90%以上的后端接口，没有比小程序端用JS直接操作数据库更方便的了，所以直到小程序写完，再来写后台也完全来得及。后台只为了发布商品以及订单发货状态而已。当然Bmob也是一个不错的...
微信小程序源码精选250套
10-30
微信小程序源码精选250套 本资源提供了250套微信小程序的源码，涵盖了多种类别，包括音乐、交通、天气、游戏、答题、博客、商城、教育、旅游等等。这些源码可以供开发者学习和参考，提高开发效率。 知识点1：微信...
微信小程序开发技术栈
Growing up Or Growing old
04-13 9342
浅谈uniapp小程序开发中常用的组件以及项目基本构造
【愚公系列】2022年02月 微信小程序-页面栈和页面路由
热门推荐
时光隧道
07-13 56万+
// 刷新上一个页面 __refreshBeforePage(){ let beforePage = getCurrentPages().shift() //上一个页面实例对象，getCurrentPages()获取到当前页面栈 if (beforePage == undefined || beforePage == null) return //只刷新上一个页面是pagea/my/my的页面 if (beforePage.route == 'pages/my/my')
小程序页面栈的使用
codezha的博客
01-22 358
开发小程序时，我们通常会遇到这样几种情况： 当前页面返回上一个页面，执行上一个页面的指定方法 当期页面执行某些操作（如删除），返回上一个页面且执行指定方法 仅使用生命周期已经不能满足要求，需要通过使用页面栈来实现以上两种场景的功能，核心代码如下： //当前页面执行上一个页面固定方法代码 var pages = getCurrentPages(); var prevPage = pages[...
微信小程序开发技术
weixin_45821809的博客
10-05 3612
技术方案 一般来说，实图层渲染界面的技术栈有这么一些： 客户端原生或编译到原生的：Flutter / iOS / Android 用纯 Web 的：React / Vue / Angular, PWA / MPA, SPA 以及用原生与 Web 二者结合，用桥接的方式通信的混合技术 优缺点：原生的技术需要和微信客户端一起编译发布版本，显然不适合快读迭代；纯web最灵活，但是也会有性能问题，和安全问题。 小程序视图层 WXML(WeiXin Markup Language) 支持数据绑定 支持逻辑算术、运算
微信小程序的时光穿梭机：页面栈与历史回退按钮的“秘密花园”【含代码示例】
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-18 1000
通过获取页面栈，实现复杂的页面跳转逻辑。// 自定义跳转逻辑，比如返回到指定页面${// 自定义跳转逻辑，比如返回到指定页面 wx . redirectTo({} else {// 已经是首页，直接退出小程序 wx . exitMiniProgram();} }// 自定义跳转逻辑，比如返回到指定页面 wx . redirectTo({} else {// 已经是首页，直接退出小程序 wx . exitMiniProgram();} }
微信小程序基础功能及技术栈实现介绍
gudada010的博客
05-29 1566
微信小程序基础功能及技术栈实现介绍
小程序之页面路由（页面栈）
qq_39441438的博客
12-29 1113
页面栈是以栈的形式维护页面与页面之间的关系，遵循栈的原则，先进后出，在微信小程序中有getCurrentPages()函数获取页面栈。 在开发的时候吗，可以通过getCurrentPages()函数获取页面栈 let pages = getCurrentPages() let currPage = pages[pages.length - 1]; //当前页面 let prevPage = pages[pages.length - 2]; //上一个页面 也可以通过这个函数判断是否有上一个页面栈，
小程序当前页面栈以及跳转
weixin_53954018的博客
09-03 738
/触发上一个页面中的方法。//获取上一个页面实例对象。页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。调用页面路由带的参数可以在目标页面的。只能打开 tabBar 页面。1.调用页面栈刷新接口。
微信小程序使用页面栈返回上一页并触发 上一页的点击事件
06-01
在微信小程序中，使用页面栈返回上一页并触发上一页的点击事件，可以通过`wx.navigateBack()`方法实现返回上一页，并在上一页的`onShow()`生命周期函数中触发点击事件。 具体实现步骤如下： 1. 在需要返回上一页的页面中，通过`wx.navigateBack()`方法返回上一页，并通过`wx.setStorageSync()`方法将一个变量设置为`true`，表示需要触发点击事件。 ``` wx.navigateBack({ delta: 1, success: function () { wx.setStorageSync('needClick', true); } }); ``` 2. 在上一页的`onShow()`生命周期函数中，判断变量是否为`true`，如果是，则触发点击事件，并将变量重新设置为`false`。 ``` onShow: function () { let needClick = wx.getStorageSync('needClick'); if (needClick) { wx.removeStorageSync('needClick'); this.onClick(); } }, onClick: function () { console.log('上一页被点击了'); } ``` 这样，在返回上一页时，会触发上一页的`onShow()`生命周期函数，并通过判断变量的值，判断是否需要触发点击事件。如果需要触发点击事件，则执行`onClick()`方法，实现返回上一页并触发上一页的点击事件的效果。 需要注意的是，在触发点击事件后，需要将变量重新设置为`false`，以防止重复触发点击事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值