微信小程序——页面栈

刚开始用小程序的时候没怎么在意页面的跳转,也没仔细看文档中说的页面栈的内容。只要能跳转就行,wx.navigateTo,wx.redirectTo 这些方法一顿乱用。最后在做一个十层页面(以前页面栈是最多5个)的时候跳懵了。各种重复跳页,怎么改都不好使,于是安心下来仔细看看API,发现这个路由还是有学问的。因此分享一下,希望对做小程序的网友也有一定的帮助。

页面栈

首先我们要理解在小程序中页面的路由是小程序框架本身控制的我们不要去手动管理, 小程序框架通过一个页面栈的设计来管理所有的界面,为了便于理解你可以看一下示意图。

小程序的页面栈最大能存放十个个页面,当页面栈中的页面等于10时,在使用navigateTo这种方式是不能再跳页的。下面我们分析一下页面栈的变化过程,从分析中,我们需要明白的一个重要问题就是,当客户按返回按钮的时候究竟会跳转到那个界面,这是我们分析页面栈变化的的意义。首先我们在页面中调用两次navigateTO,页面栈情况如下

这时显示的界面是pageC ,如果客户在此时返回则会一切正常,回退的第一个界面是pageB,然后是pageA。但是如果在pageC 界面调用  wx.redirectTo({url:‘pageD‘}) 则情况就会不一样了,我们先看一下跳转到pageD后页面栈的情况如何。

根据栈的情况,我们可以分析出。如果使用 wx.redirectTo跳转到pageD页面,然后在回退的时候是不能再次回退到pageC的,而会直接回退到pageB。

通过上面对页面栈的分析,我们可以看到栈的变化是会影响客户回退页面的顺序的,所以根据自己的需要合理的使用不同的跳转方法是非常重要的。如果使用不当就会导致跳转混乱让人摸不清头脑

下面分析一种调转重复页面的情况。如果我们的pageB页面是一个数据列表页面,比如商品列表,pageC是一个商品的编辑界面,一般我们会通过pageB然后进如pageC对商品进行修改,修改后返回pageB。这是很常见的一个场景,但是如果使用不当机会出现如下情况

如图所示栈中出现了两个相同的pageB界面,这个时候如果用户按退出键就会出现一个页面出现2次的情况,而且有一个界面的数据也是旧的数据。因此为了避免这个问题,我们应该在 PageC 页面避免将 PageB重复压入栈中,所以在pageC页面 使用wx.navigateBack({delta:1}); 进行页面回退而数据刷新的问题则在页面的onShow函数中进行即可。

路由方法与页面栈变化对应关系

特别注意 :

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。

原文链接:https://blog.csdn.net/jackjyy/article/details/82392312

原文地址:https://www.cnblogs.com/bushui/p/11638369.html

时间: 2024-08-02 17:49:33

微信小程序——页面栈的相关文章

微信小程序页面跳转方法总结

微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo wx.navigateTo({ url: 'page/home/home?user_id=111' }) // 关闭当前页面,返回上一页面或多级页面.可通过 getCurrentPages() 获取当

微信小程序页面跳转

wx.navigateTo(OBJECT) 不销毁当前页面,仅将其隐藏,使用wx.navigateBack可以返回到原页面. wx.redirectTo(OBJECT) 销毁当前页面,跳转到应用内的其他页面. 微信小程序页面不跳转: 我们有时候会发现,其他的地方都好好的能跳转,可是为啥突然就无效那呢? 原因: 检查你要跳转的位置是否在app.js中注册过. 检查你要跳转的地址是否有误.经常都是因为少写或者多写使得跳转无效. 检查你要跳转的位置是否位于TabBar中,如果是的话,要使用wx.swi

微信小程序页面

[转]微信小程序页面-页面跳转失败WAService.js:3 navigateTo:fail url not in app.json 微信小程序新建页面的要素一是新建的文件名称和其子文件的名称最好一致,不然容易出问题,在小程序页面跳转中如果出现WAService.js:3 navigateTo:fail url not in app.json错误 要在app.json(公共文件中)建立页面跳转page.如下图 不管是跳转到哪个页面,必须在json里的pages数组里面填写路径,不然跳转失败 跳

微信小程序页面传值详解

我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: // 源页面A相关代码   wx.navigateTo({   url: "/pages/mypage/mypage?a=1&b=2"   })     // 目标页面B相关代码   Page({   onLoad: function (options) {   var a = opti

微信小程序页面跳转、逻辑层模块化

一.页面的跳转 微信小程序的页面跳转函数方法有两个,另外还有两种模块跳转方式. 函数跳转: 1.wx.navigateTo(OBJECT): wx.navigateTo({ url: 'test?id=1' })//保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. //问号后面的参数为传递至指定页面onload方法内的参数.id为自定义参数名,在跳转页面获取参数值时,也是通过这个设置的参数来获取的. 2.wx.redirectTo(OBJECT): wx

微信小程序页面事件-下拉刷新,上拉加载更多

1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小程序启动下拉刷新: 两种方式: 1.需要在app.json 的window选项中或页面配置中开启enablePullDownRefresh, 但是,一般情况

(uniapp和)微信小程序页面跳转首页报错:navigateTo:fail can not navigateTo a tabbar page

如果在这种情况下无法实现跳转并出现can not navigate to tabBar page错误, 很有可能是由于在底部tabbar里面定义乐同样连接地址的bar,如果在底部footer页面定义了相同地址的bar,则此页面无法跳转, 解决方法: 使用uniapp或微信小程序的 uni.switchTab({         url: '路径'}); wx.switchTab({         url: '路径'}); 原文地址:https://www.cnblogs.com/fanqiuz

让微信小程序页面之间的通信不在变得困难

一个开始 小程序开发者总会碰到各种页面之间的通信问题,实现方式也五花八门,比如... 场景还原 首先这是一个电商小程序. 有这样一个需求: 首页某个地方要展示购物车商品数量. 当我在其他页面加购了商品,首页数量刷新. 实现方式 方式一:onShow直接请求接口 Page({ onShow() { // ...一些逻辑 // 后端请求新的购物车数量 this.requestCartNum(); } }) 不足: 每次onShow都要请求接口,浪费资源. 方式二:globalData存储购物车数量,

微信小程序页面之间的跳转

wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. OBJECT 参数说明: 参数 类型 必填 说明 url String 是 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数.参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔:如 'path?key=value&key2=value2' success Function 否 接口调用成功的回调函数 fail Funct