uni-app 经验分享,从入门到离职(四)——页面栈以及页面跳转的 API(开发经验总结)

news2024/12/23 18:24:13

文章目录

  • 📋前言
    • ⏬关于专栏
  • 🎯什么是页面栈
    • 🧩页面跳转方法
      • 📌 uni.navigateTo(OBJECT)
      • 📌 uni.redirectTo(OBJECT)
      • 📌 uni.reLaunch(OBJECT)
      • 📌 uni.switchTab(OBJECT)
      • 📌 uni.navigateBack(OBJECT)
    • 🧩页面栈限制
    • 🧩 应用场景
  • 📝最后


在这里插入图片描述

📋前言

这篇文章是本专栏 uni-app 的项目实战篇,主要内容的是页面栈以及页面跳转的 API,页面栈是 uni-app 中一个重要的概念,它用于管理应用程序中的页面层级关系。接下来讲一下如何利用页面栈来实现页面之间的切换和导航,以及如何使用 uni-app 提供的 API 来进行页面跳转等等知识点。

⏬关于专栏

本专栏主要是分享和介绍从零到一学习和使用的 uni-app 的笔记和个人经验。通过个人的学习经验和工作经验来给大家分享关于 uni-app 开发的技巧,以及快速入门的诀窍等等。

专栏主页:uni-app_黛琳ghz的博客-CSDN博客


🎯什么是页面栈

在 uni-app 中,页面栈是一个栈结构,用于管理应用程序中的页面层级关系。页面栈的概念类似于浏览器的浏览历史记录,每当打开一个新页面时,该页面就会被推入页面栈中,而当关闭一个页面时,该页面就会从页面栈中弹出。uni-app 的页面栈具有以下特点和作用:

  • 页面管理:页面栈可以帮助应用程序方便地管理页面的打开、关闭和切换操作,确保页面之间的层级关系清晰。
  • 返回操作:通过页面栈,用户可以进行返回操作,返回到前一个页面或者指定的页面,提供了良好的用户导航体验。
  • 页面状态保存:页面栈中的页面通常会保持其状态,包括数据、滚动位置等,使得用户可以无缝地返回到之前的页面状态。
  • 页面跳转:通过页面栈,开发者可以使用uni-app提供的API来实现页面之间的跳转、重定向和关闭等操作,灵活控制页面的导航流程。

总之,页面栈在 uni-app 中扮演着重要的角色,帮助开发者有效地管理页面之间的关系和用户导航行为,提升应用程序的用户体验。

框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:

路由方式页面栈表现触发时机
初始化新页面入栈uni-app 打开的第一个页面
打开新页面新页面入栈调用 API uni.navigateTo、使用组件 <navigator open-type="navigate"/>
页面重定向当前页面出栈,新页面入栈调用 API uni.redirectTo、使用组件 <navigator open-type="redirectTo"/>
页面返回页面不断出栈,直到目标返回页调用 API uni.navigateBack、使用组件 <navigator open-type="navigateBack>、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换页面全部出栈,只留下新的 Tab 页面调用 API uni.switchTab、使用组件 <navigator open-type="switchTab"/>、用户切换 Tab
重加载页面全部出栈,只留下新的页面调用 API uni.reLaunch、使用组件 <navigator open-type="reLaunch"/>

🧩页面跳转方法

通过上面表格,我们可以大致了解关于-页面跳转、路由发生切换时,页面栈的变化的几种方式。接下来我们一起来看看这五种跳转方法

📌 uni.navigateTo(OBJECT)

uni.navigateTo 用于普通页面跳转,新页面将会被加入到页面栈中,并保留当前页面,当新页面打开后,上一个页面仍然存在于栈中,使用 uni.navigateBack 可以返回到原页面。

在实际开发中,也是经常用到的页面跳转方法,无论是正常页面跳转或者传参跳转,下面是一个简单的例子,其中包括跳转和传参。

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

下面是跳转至目标页面后接受参数的代码。

// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

通过上面两段代码,我们可以对 url 参数进行总结,需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’,path 为下一个页面的路径,下一个页面的 onLoad 函数可得到传递的参数。

补充①:url 有长度限制,太长的字符串会传递失败,可改用窗体通信、全局变量,另外参数中出现空格等特殊字符时需要对参数进行编码,如下为使用 encodeURIComponet 对参数进行编码的示例。

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// 在test.vue页面接受参数
onLoad: function (option) {
	const item = JSON.parse(decodeURIComponent(option.item));
}

补充②:除了使用 encodeURIComponet 对参数进行编码,我们可以发现还用到了 JSON.parse 和 JSON.stringify。在实际开发中,会需要传递获取的 xxx 结果数据到结果页,比如说购买商品下单成功后的订单信息数据,我们可以在跳转订单详情页的时候传递这个参数,这样就不用在进入订单详情页时请求一次了。但是这个数据一半都很长而且是 json 数据或对象,因此我们需要在传递参数和接收参数这两个步骤做处理。接下来我们可以看下这个实际例子。

如下图的 item 值,是跳转到目标页面要传递的值,同时也是 v-for 渲染后的 item 值,应用场景是订单列表跳转到订单详情,我们可以看到这个 item 值是一个对象,如果直接传递的话,会超出 url 的长度,导致报错。
在这里插入图片描述
因此需要先用 JSON.stringify() 把对象转换为 JSON 字符串然后进行传值,然后再通过 JSON.parse() 把该 JSON 字符串转再换为对象在接收这个值。 如下图的操作(代码为开发环境代码)。
在这里插入图片描述
错误情况:如果不先用 JSON.stringify() 转换,直接传值会出现如下情况,这样会导致跳转到目标页面无法获取到需要的参数格式。
在这里插入图片描述
我们可以看到在目标页面输出的结果是无法获取到对象里面的值的,因为当页面跳转时,传参的值如果变成了 “[object Object]” ,通常表示传递的参数是一个对象。在 JavaScript 中,当将对象作为字符串进行输出或显示时,会默认转换为 “[object Object]” 。这是因为对象是复杂的数据结构,无法直接以字符串形式展示其完整内容。
在这里插入图片描述
除此之外,uni.navigateTo 还可以传递 events 参数,该参数是页面间通信接口,用于监听被打开页面发送到当前页面的数据。我们可以看下面这段代码。

// 在起始页面跳转到test.vue页面,并监听test.vue发送过来的事件数据
uni.navigateTo({
  url: '/pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

// 在test.vue页面,向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

注意:

  • 页面跳转路径有层级限制,不能无限制跳转新页面。(下面进一步介绍)
  • 跳转到 tabBar 页面只能使用 switchTab 跳转。(如果用其他方法跳转的话会出现报错,如下图)

在这里插入图片描述

  • 路由 API 的目标页面必须是在 pages.json 里注册的 vue 页面。

📌 uni.redirectTo(OBJECT)

不同于 uni.navigateTo,uni.redirectTo 用于页面重定向,关闭当前页面,跳转到应用内的某个页面,新页面将替代原页面,不会加入页面栈。相同的是 uni.redirectTo 也是可以传值的,url 的规则也跟 uni.navigateTo 的一致(见补充①上下文)。

uni.redirectTo({
  url: '/pages/example?id=1'
});

📌 uni.reLaunch(OBJECT)

uni.reLaunch 用于关闭所有页面,打开到应用内的某个页面。url 传值和规则跟 uni.redirectTo 差不多一样,参考上面的介绍即可。

uni.reLaunch({
  url: '/pages/example?id=1'
});

补充:H5 端调用 uni.reLaunch 之后之前页面栈会销毁,但是无法清空浏览器之前的历史记录,此时 navigateBack 不能返回,如果存在历史记录的话点击浏览器的返回按钮或者调用 history.back() 仍然可以导航到浏览器的其他历史记录。

📌 uni.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。不同于上面的几种跳转方法,uni.switchTab 跳转的 url 写的是需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数。我们可以看下面这段代码。

pages.json 页。

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

other.vue 页。

uni.switchTab({
	url: '/pages/index/index'
});

📌 uni.navigateBack(OBJECT)

uni.navigateBack 作用是关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

当使用 uni.navigateTo 或 uni.redirectTo 进行页面跳转时,可以通过 uni.navigateBack 方法返回上一个页面。uni.navigateBack 的作用是关闭当前页面,返回上一个页面。在页面栈中,当前页面从栈中弹出,上一个页面重新成为当前页面。

uni.navigateBack 方法可以传递一个整数参数,表示返回的页面数,例如传递 1 表示返回上一个页面,传递 2 表示返回上两个页面,以此类推。如果传递的参数超过了页面栈的长度,则返回到首页。我们可以看下面这个例子。

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面 A => B
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面 	B => C
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack,将返回A页面
uni.navigateBack({
	delta: 2
});

🧩页面栈限制

上面在介绍 uni.navigateTo 的时候,我们说到页面跳转路径有层级限制,不能无限制跳转新页面。其实在实际开发的过程中,如果跳转设计不当的话,页面跳转的次数太多,超出页面栈的限制,就会出现如下的报错。比如说在商城小程序项目中商品中心一般会有推荐商品,或者猜你喜欢等部分,这样从一个单品页 -> 推荐商品 -> 单品页多次跳转,如果跳转超过10个页面,我们会发现跳转不下去了。
在这里插入图片描述
uni.navigateTo 最大支持跳转10个页面,如果超过这个数量就会出现报错,因此我们要灵活使用 uni.navigateTo、uni.redirectTo 和 uni.reLaunch 这三个方法,跳转后不需要保留的页面,应该及时移出页面栈。如果只用了 uni.navigateTo 这个方法做跳转,我们也可以做窗口提示或封装优化,我们可以看如下代码(非原创)。

export const navigateToLimit = (options) => {
  const pages = getCurrentPages()
  console.log('navigateToLimit pageNum: ', pages.length)
  if (pages.length > 9) {
    uni.redirectTo(options)
  } else {
    uni.navigateTo(options)
  }
}

这个方法的原理是通过 getCurrentPages() 方法获取当前页面栈的长度来进行判断。如果当前页面栈的长度大于 9,则使用 uni.redirectTo 方法进行跳转,否则使用 uni.navigateTo 方法进行跳转。

🧩 应用场景

为了避免出现页面栈限制导致无法继续跳转,我们设计和编写跳转的逻辑时要灵活使用 uni.navigateTo、uni.redirectTo 和 uni.reLaunch 这三个方法,接下来我们简单看一下这三个方法的应用场景。

uni.navigateTo

  • 应用场景:适用于普通的页面跳转,打开新页面,可以返回上级页面。比如从商品列表页跳转到商品详情页,用户可以通过返回按钮返回到商品列表页。
  • 实际开发应用场景:适用于需要进行普通页面跳转并保留页面历史记录的场景,比如商品列表与商品详情页、订单列表与订单详情页等。

uni.redirectTo

  • 应用场景:适用于替换当前页面,不保留原页面的跳转。比如在表单提交后,跳转到提交结果页面,不需要返回到之前的表单页面。
  • 实际开发应用场景:适用于执行一些关键操作后需要替换当前页面的场景,比如表单提交、支付完成等。

uni.reLaunch

  • 应用场景:适用于关闭所有页面,打开到应用内的某个页面。比如从登录页跳转到首页,关闭登录页和其他可能存在的页面。
  • 实际开发应用场景:适用于需要重新初始化应用状态或者从底层开始构建页面栈的场景,比如登录成功后跳转到首页。

注意事项总结

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。(因此 switchTab 的应用场景无非是由非 tabBar 页面跳转 tabBar 页面,以及 tabBar 页面互相跳转)
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 不能在首页 onReady 之前进行页面跳转。
  • H5 端页面刷新之后页面栈会消失,此时 navigateBack 不能返回,如果一定要返回可以使用 history.back() 导航到浏览器的其他历史记录。

📝最后

到此就是本篇文章的全部内容了,这篇文章记录的主要内容的是页面栈和页面跳转的 API,页面栈是 uni-app 中一个重要的概念,它用于管理应用程序中的页面层级关系。我们通过学习如何利用页面栈来实现页面之间的切换和导航,以及如何使用 uni-app 提供的API来进行页面跳转。

通过深入理解页面栈的概念,在后续的学习和开发中我们可以灵活地控制页面的打开、关闭和返回操作,实现更流畅的用户体验,除此之外,我们还学习了解了一些高级的页面跳转技巧,如传递参数、接收参数以及监听页面生命周期事件等。这篇文章是博主 uni-app 专栏的基础篇的第四篇文章,后续会不断的更新更多关于 uni-app 的干货、实战经验、学习经验,期待你的关注和留言。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1461957.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WPF 启动项目 Grid、StackPanel 布局

WPF 启动项目 <!--x:Class"WPF_Study.App" 对应类&#xff1a;WPF_Study.App--> <!--xmlns:local"clr-namespace:WPF_Study" 命名空间&#xff1a;WPF_Study--> <Application x:Class"WPF_Study.App"xmlns"http://schema…

船运物流管理系统|基于springboot船运物流管理系统设计与实现(源码+数据库+文档)

船运物流管理系统目录 目录 基于springboot船运物流管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员登录 2、货运单管理 3、公告管理 4、公告类型管理 5、新闻管理 6、新闻类型管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 …

WebServer -- 定时器处理非活动连接(上)

目录 &#x1f34d;函数指针 &#x1f33c;基础知识 &#x1f419;整体概述 &#x1f382;基础API sigaction 结构体 sigaction() sigfillset() SIGALRM, SIGTERM 信号 alarm() socketpair() send() &#x1f4d5;信号通知流程 统一事件源 信号处理机制 &#x…

政安晨:【示例演绎机器学习】(一)—— 剖析神经网络:学习核心的Keras API

打开这篇文章&#xff0c;相信您已经了解了TensorFlow的一些基础知识&#xff0c;可以用它从头开始实现一个简单模型。 如果您对这些概念还不是太清晰&#xff0c;可以浏览一下我这个栏目中的相关文章&#xff1a; 政安晨的机器学习笔记http://t.csdnimg.cn/DHcyL 尤其是其中…

Android进阶(二十九) 走近 IntentFilter

文章目录 一、什么是IntentFilter &#xff1f;二、IntentFilter 如何过滤隐式意图&#xff1f;2.1 动作测试2.2 类别测试2.3 数据测试 一、什么是IntentFilter &#xff1f; 如果一个 Intent 请求在一片数据上执行一个动作&#xff0c; Android 如何知道哪个应用程序&#xf…

ArcgisForJS如何访问Arcgis Server?

文章目录 0.引言1.准备ArcGIS相关工具2.创建含有ArcSDE地理数据库的MXD文件3.注册ArcSDE地理数据库4.发布数据到Arcgis Server5.ArcgisForJS访问ArcGIS Server数据 0.引言 ArcGIS API for JavaScript 是一个用于在Web和移动应用程序中创建交互式地图和地理空间分析应用的库。它…

OceanBase数据迁移-从MySQL导入数据到OceanBase

把MySQL中的数据导入到OceanBase&#xff0c;分两个步骤&#xff1a; 1.准备一份MySQL测试数据集2.使用mydumper工具导出数据3.使用myloader工具导入到OceanBase4.验证测试数据集在OceanBase下的执行情况 1.准备一份MySQL测试数据集 1.1.从github下载mysql测试数据集&#x…

【hoare基础版】快速排序算法(1)

目录 交换排序 QuickSort快速排序 Hoare整体思路 图解分析 ​ Hoare版本代码 总代码 时间复杂度 交换排序 基本思想&#xff1a;所谓交换&#xff0c;就是根据序列中两个记录键值的比较结果来对换这两个记录在序列中的位置&#xff0c;交换排序的特点是&#xff1a;将键…

安装unget包 sqlsugar时报错,完整的报错解决

前置 .net6的开发环境 问题 ? 打开unget官网&#xff0c;搜索报错的依赖Oracle.ManagedDataAccess.Core unget官网 通过unget搜索Oracle.ManagedDataAccess.Core查看该依赖的依赖 发现应该是需要的依赖Oracle.ManagedDataAccess.Core(>3.21.100)不支持.net6的环境 解…

代码随想录算法训练营第一天

● 今日学习的文章链接和视频链接 ● 自己看到题目的第一想法 1. 704二分法&#xff1a; 方法一&#xff1a; 整个数组是 左闭右闭区间 [ ] left指针指向数组开始下标&#xff0c; right 指针指向数组最后下表nums.size()-1, mid为 (leftright) /2循环条件 left<rightnu…

Django使用Celery异步

安装包 pip install celerypip install eventlet 1.在项目文件的根目录下创建目录结果 2. 在main.py文件中 # !/usr/bin/env python # -*-coding:utf-8 -*-""" # Author &#xff1a;skyTree # version &#xff1a;python 3.11 # Description&#…

浅谈maven的生命周期

正文: 在Maven中,生命周期定义了项目构建过程的不同阶段以及在每个阶段中执行的插件目标。Maven的生命周期是由一系列阶段组成的,每个阶段都有一个唯一的标识符。 Clean生命周期:用于清理项目的构建目录。它包含以下阶段: pre-clean:执行在清理操作之前的任何操作。clea…

Eclipse的Java Project的入口main函数

在使用Eclipse创建java project项目的时候&#xff0c;一个项目里面通常只有一个main&#xff0c;那么一个项目里面是否可以有多个main函数呢&#xff1f;其实可以的&#xff0c;但是运行java application的时候要选择执行哪个main函数。 下面举个例子&#xff1a; 1、创建一个…

二进制方式安装MySQL并备份数据库

一、openEuler二进制方式安装MySQL 8.0.28版本 1.1 获取软件包 [rootopenEuler3 ~]# wget -c https://mirrors.aliyun.com/mysql/MySQL-8.0/mysql-8.0.28-linux-glibc2.12-x86_64.tar.xz 1.2 解压软件包 [rootopenEuler3 ~]# dnf install -y tar xz [rootopenEuler3 ~]# t…

MKdocs添加顶部公告栏

效果如图&#xff1a; docs/overrides下新建main.html &#xff0c;针对main.html文件 树状结构如下: $ tree -a . ├── .github │ ├── .DS_Store │ └── workflows │ └── PublishMySite.yml ├── docs │ └── index.md │ └──overrides │…

Arthas—【学习篇】

1. Arthas官网 arthas 2. 下载 从 Maven 仓库下载 最新版本&#xff0c;点击下载&#xff1a;​编辑在新窗口打开 点击这个 mavrn-central 即可显示下面的图片 ​​ #从 Github Releases 页下载 Releases alibaba/arthas GitHub 3. 解压 将压缩包复制到一个位置&…

el-table同时固定左列和右列时,出现错误情况

最近遇到一个问题,就是需求是要求表格同时固定序号列和操作列,我们用的是饿了么组件库的el-table,如下图,出现了错误情况: 解决方法就是使用doLayout方法: 如果使用了keep-alive,可以在activated里执行doLayout方法: activated() {this.$nextTick(() => {this.$ref…

Linux篇:开发工具yum/vim/gcc/g++/Makefile/gdb

一. yum&#xff1a;软件包管理器 什么是软件包&#xff1f; 在Linux 下安装软件 , 一个通常的办法是下载到程序的源代码 , 并进行编译 , 得到可执行程序 . 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好 , 做成软件包 (可以理解成windows 上的安装程序) 放在…

Bert基础(三)--位置编码

背景 还是以I am good&#xff08;我很好&#xff09;为例。 在RNN模型中&#xff0c;句子是逐字送入学习网络的。换言之&#xff0c;首先把I作为输入&#xff0c;接下来是am&#xff0c;以此类推。通过逐字地接受输入&#xff0c;学习网络就能完全理解整个句子。然而&#x…

Meta 发布 MMCSG (多模态智能眼镜对话数据集)

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…