0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

小程序框架页面栈设计案例解析

电子工程师 来源:博客园 作者: 姜友瑶 2020-11-04 13:55 次阅读

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

页面栈

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

如图所示小程序的页面栈最大能存放5个页面,当页面栈中的页面等于5时,在使用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中获取。
编辑:hfy

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • API
    API
    +关注

    关注

    2

    文章

    1472

    浏览量

    61749
  • 路由
    +关注

    关注

    0

    文章

    275

    浏览量

    41735
  • 小程序
    +关注

    关注

    1

    文章

    234

    浏览量

    12079
收藏 人收藏

    评论

    相关推荐

    简述大前端技术的渲染原理

    应用开发:Android、iOS、鸿蒙(HarmonyOS)等; •Web前端框架:Vue、React、Angular等; •小程序开发:微信小程序、京东小程序、支付宝小
    的头像 发表于 11-07 10:11 93次阅读

    Linux网络协议的实现

    网络协议是操作系统核心的一个重要组成部分,负责管理网络通信中的数据包处理。在 Linux 操作系统中,网络协议(Network Stack)负责实现 TCP/IP 协议簇,处理应用程序发起的网络
    的头像 发表于 09-10 09:51 237次阅读
    Linux网络协议<b class='flag-5'>栈</b>的实现

    labview CAN DBC加载解析程序

    labview CAN DBC加载解析程序
    发表于 08-18 11:42

    Linux内核中的页面分配机制

    Linux内核中是如何分配出页面的,如果我们站在CPU的角度去看这个问题,CPU能分配出来的页面是以物理页面为单位的。也就是我们计算机中常讲的分页机制。本文就看下Linux内核是如何管理,释放和分配这些物理
    的头像 发表于 08-07 15:51 214次阅读
    Linux内核中的<b class='flag-5'>页面</b>分配机制

    鸿蒙开发:【页面及任务链】

    单个UIAbility组件可以实现多个页面,并在多个页面之间跳转,这种UIAbility组件内部的页面跳转关系称为“页面”,由ArkUI
    的头像 发表于 06-14 10:10 328次阅读
    鸿蒙开发:【<b class='flag-5'>页面</b><b class='flag-5'>栈</b>及任务链】

    鸿蒙Ability Kit(程序框架服务)【应用启动框架AppStartup】

    `AppStartup`提供了一种更加简单高效的初始化组件的方式,支持异步初始化组件加速应用的启动时间。使用启动框架应用开发者只需要分别为待初始化的组件实现`AppStartup`提供
    的头像 发表于 06-10 18:38 652次阅读

    鸿蒙Ability Kit(程序框架服务)【UIExtensionAbility】

    [UIExtensionAbility]是UI类型的ExtensionAbility组件,需要与[UIExtensionComponent]一起配合使用,开发者可以在UIAbility的页面中通过
    的头像 发表于 06-05 09:19 1256次阅读
    鸿蒙Ability Kit(<b class='flag-5'>程序</b><b class='flag-5'>框架</b>服务)【UIExtensionAbility】

    鸿蒙Ability Kit(程序框架服务)【Ability内页面间的跳转】

    基于Stage模型下的Ability开发,实现Ability内页面间的跳转和数据传递。
    的头像 发表于 06-03 20:43 257次阅读
    鸿蒙Ability Kit(<b class='flag-5'>程序</b><b class='flag-5'>框架</b>服务)【Ability内<b class='flag-5'>页面</b>间的跳转】

    鸿蒙Ability Kit(程序框架服务)【UIAbility内和UIAbility间页面的跳转】

    基于Stage模型下的UIAbility开发,实现UIAbility内和UIAbility间页面的跳转。
    的头像 发表于 06-03 14:13 616次阅读
    鸿蒙Ability Kit(<b class='flag-5'>程序</b><b class='flag-5'>框架</b>服务)【UIAbility内和UIAbility间<b class='flag-5'>页面</b>的跳转】

    通信网络协议之UDP协议技术解析

    在通常的网络协议中,TCP/IP协议是一个常见的示例,其中UDP和TCP都是传输层协议。传输层负责提供端到端的数据传输服务,它在网络层(如IP协议)之上,为应用层(如HTTP、DNS、FTP)提供可靠的数据传输。
    发表于 02-01 11:00 855次阅读
    通信网络协议<b class='flag-5'>栈</b>之UDP协议技术<b class='flag-5'>解析</b>

    堆和的区别和使用注意事项

    堆和是在计算机科学中广泛使用的两种数据结构,它们具有不同的用途和特点。堆和的区别涉及到内存分配、访问方式、数据存储等方面。在使用堆和时,还需要注意一些细节,以确保程序的正确性和效
    的头像 发表于 01-18 17:24 2014次阅读

    鸿蒙开发-应用程序框架UIAbility的使用

    和router.RouterMode.Standard多实例模式。在单实例模式下:如果目标页面的url在页面中已经存在同url页面,离
    发表于 01-17 16:36

    javaweb的三大框架有哪些

    : Spring是目前最受欢迎和广泛使用的Java应用程序开发框架之一。它提供了一种轻量级的方式来构建企业级应用程序。Spring框架主要包括以下模块: Spring核心模块:提供了I
    的头像 发表于 12-03 11:47 1972次阅读

    【从0开始创建AWTK应用程序】创建应用程序并在模拟器运行

    AWTK是基于C语言开发的跨平台GUI框架。本系列文章介绍如何从0开始创建AWTK应用程序,包括搭建开发调试环境、使用AWTK创建Hello工程并在模拟器上运行、将AWTK应用程序移植到其它平台
    的头像 发表于 12-01 08:24 455次阅读
    【从0开始创建AWTK应用<b class='flag-5'>程序</b>】创建应用<b class='flag-5'>程序</b>并在模拟器运行

    鸿蒙原生应用开发-关于页面接口router返回问题与解决思路

    router.back():返回上一页面或指定页面。 router.clear():清空页面中的所有历史页面,仅保留当前
    发表于 11-15 10:11