uniapp页面参数传递

uniapp页面参数传递,第1张

链接传递 或者事件传递

1、要传递参数页面

2、接收的页面

事件传递多个参数,传递数组用事件来传递,因为要先转成字符串

1、在页面中定义要传递

点击传递数据

添加一个事件

2、接收的页面

这里一定onLoad ,只能用onLoad才能接收到参数

小程序自带的<返回箭头,只有在a到b,通过navigateTo时才显示。

reLaunch redirectTo都只会出现房子图标。

注意:uni中的onBackPress支持app和h5,不支持小程序。

a页面

伪实现通过b页面返回时触发onshow,展示空白页。最终跳转到c。

ps:返回时,页面其实一直都在,(自行去微信开发工具appdata中看pages数量)且数据状态都是改变后正好利用。

Vue 项目往往需要使用 vue-router 插件,刚开始入门 Uni-app + Vue3 项目的同学,会不会想着路由使用 vue-router V4 版本不就可以了吗?

不怕大家笑话,我就是这样想的,毕竟我是第一次使用 Uni-app ,由于孕期记性贼差,所以我决定写成笔记,加深记忆。

uni-app 页面路由为框架统一管理的,我们需要在 pagejson 文件里配置每个页面路由以及页面样式,有些类似小程序中的 appjson 文件,所以 uni-app 的路由用法和写法与 vue-router 不同。

项目初始化完成,对应的 pagejson 文件为:

uni-app 通过 pages 节点配置应用都有哪些页面,接收一个数组,每个元素都是一个对象,属性有:

uni-app 页面路由跳转有两种方式:使用 navigator 组件跳转、调用API 跳转。

1、navigator组件跳转

类似于 a 标签,但是只能跳转到本地页面,目标页面必须在 pagejson 中注册。

navigator 属性有:

open-type 有效值

2、uni-app API 跳转

使用 API 页面跳转方式有:

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

方式1:onLoad 接收

方式2:setup语法糖接收

onLoad 函数是监听页面加载,接收的参数是页面传递的数据,是一个 object 类型。

看到这,相信很快就能上手 uni-app + vue3 项目路由喽,也可以参考官网教程:>

官方详情介绍

uni-app的页面跳转只能跳转本地页面,且目标页面必须在pagesjson中注册。跳转方式与小程序/vue的极为相似,只是方法和标签有所不同,分为 和 两种。

类似Vue的 <router-link> 标签

类似Vue routerpush({ path: 'xxx' }) 方法,uni-app提供了6钟不同的跳转方式,以 unixxx 方式调用。

官网详情

保留 当前页面,跳转到应用内的某个页面,可使用 uninavigateBack 返回到原页面

object参数说明(其他跳转方式的参数与之大同小异):

接收数据(其他跳转方式的接收参数方法与之相同):

关闭 当前页面,跳转到应用内的某个页面 ,可理解为重定向页面

关闭所有 页面,跳转到应用内的某个页面

注意: 如果调用了 unipreloadPage(OBJECT) 不会关闭,仅触发生命周期 onHide

跳转到tabBar页面,并 关闭所有非tabBar 页面

注意: 如果调用了 unipreloadPage(OBJECT) 不会关闭,仅触发生命周期 onHide

返回上一页面/多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层

预加载页面,是一种性能优化技术。被预载的页面,在打开时速度更快。

平台差异说明:

H5 平台:

预加载 /pages/test/test 对应的js文件,不执行页面预渲染逻辑

App-nvue 平台:

预加载nvue页面 /pages/test/test

注意事项

eg

HBuilderX 2712+的hello uni-app,在navigator示例和uni ui的日历示例中增加了页面预载示例。

1A页面传递参数给B页面

2B页面接收A页面传递过来的参数

1A页面传递参数给B页面

2其他任何页面希望接收A页面传递

3监听的页面最好在onUnload里面取消监听,否则可能会出现执行多次的情况

1此方式其实是类似第二种,首先在mainjs里面定义好eventBus对象

2发送事件

3监听事件

uniapp页面通信

以上就是关于uniapp页面参数传递全部的内容,包括:uniapp页面参数传递、uni 小程序返回指定页面(伪)、三、Uni-app + vue3 页面如何跳转及传参等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9803887.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存