React 前端导航

跨端开发框架 Rax 中的路由跳转

跨端开发框架 Rax 中的路由跳转

Rax 是阿里内部应用最广泛的跨端开发引用框架,最近我也在学习使用 Rax 开发小程序,说实话这个东西相比 taro 和 uniapp 更难用,网上可查的资料也很少,所以你懂的。

这里记录一下 Rax 中如何做路由跳转,以小程序为例。

经常写 web 的同学可能对 Link 很熟悉,页面跳转经常会用得到,Rax 也提供了 link 标签来跳转路由,但是官方文档中写到不推荐使用 link, 建议 Web 场景使用 a 标签,小程序场景使用 navigator 标签

Rax 文档中对 Link 的描述如下:

Link 是基础的链接组件,同 a 标签。它带有默认样式 textDecoration: 'none'。 在浏览器中,同我们熟悉的 a 标签,使用 Link 标签并不能新开一个 webview ,它只是在当前的 webview 中做页面的跳转。

navigator 标签是各小程序平台原生提供的跳转方式,使用方法大致相同,具体使用方法参考各平台。

微信小程序:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

支付宝小程序:https://opendocs.alipay.com/mini/component/navigator

小程序在其生命周期会为所有浏览的页面保留一个页面栈,记录了你的浏览历史,以下 API 可能会改变你的页面栈,也就是改变你的浏览历史,对你的前进退操作会有影响。

navigate.go

路由前进与后退,前进只支持web,后退的话当前页出栈。

navigate.back

路由后退,当前页出栈

navigate.switchTab

切换 tab 页面,全部页面出栈,只保留最新的 tab 页,此方法会保留底部tabbar,使用其他方法跳转 tab 页不会保留底部的 tabbar.

navigate.repalce

当前页面出栈,打开新页面并入栈

navigate.push

打开新页面并入栈

navigate.relanch

全部页面出栈,打开新页面并入栈

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:farmerlzj@163.com。 本站原创内容未经允许不得转载,或转载时需注明出处: 内容转载自: React前端网:https://qianduan.shop/blogs/detail/49

#mobile#小程序#Rax#路由跳转#Link#navigate

相关推荐

在浏览器及 Rax 中实现吸顶效果,position sticky 属性的应用及监听页面滚动(React)实现吸顶效果

最近遇到了移动端小程序需要实现吸顶效果的需求,就是 tab 页抬头滑动到页面顶部时需要固定到页面的顶部不再滚动。这里介绍两种实现方式,当然这两种方式在浏览器同样适用,以下思路仅供参考,实际效果以实际操作为准

Rax 移动端开发钉钉小程序 IOS 输入卡住,光标消失问题记录

使用 Rax 框架开发企业内部钉钉小程序应用,实现表单输入时再正常不过的需求,这里我用到的是 fusion mobile 组件库及一些基础组件来构建我们的应用,在实现获取用户输入使用的是Input组件实现(文档地址:https://rax.js.org/docs/components/meet-input),这个Input组件支持单行和多行输入,可以应对大部分的应用场景。在安卓端是没有问题的,但是到了移动端会出现输入光标消失,输入文本获取不到,看上去像是卡住了一下,这肯定是不能接受的,这里记录探索解决 IOS 输入卡住问题的过程