微信小程序（组件跳转、规范、层级准备）&&微信小程序（路由及组件跳页传参）

最新推荐文章于 2022-10-13 14:32:34 发布
最新推荐文章于 2022-10-13 14:32:34 发布
阅读量475 收藏
点赞数 3
分类专栏： web 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45492145/article/details/103304533
版权
本文详细介绍了微信小程序中的路由API，包括navigateTo、navigateBack、redirectTo、switchTab和reLaunch的使用。同时讲解了navigator组件的跳转方式和属性。还探讨了hover样式的实现，推荐使用navigator组件的hover-class属性。此外，文章提到了小程序的页面层级限制，建议根据操作的可逆性选择合适的跳转方法，并提供了页面跳转的规范。最后，介绍了页面层级的准备过程和事件传参的正确方式。
摘要由CSDN通过智能技术生成

首先简单回顾下路由API跳转:
wx.navigateTo
wx.navigateBack
wx.redirectTo
wx.switchTab
wx.reLaunch

除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。

hover样式

对比其他小程序列表项会发现，目前为止，点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元素添加触屏点击样式，可以给元素添加hover-class属性。

在这里插入图片描述

注意：虽然css的hover伪类也可以实现类似效果，但不太理想，效果粘附性太大，不建议使用。

navigator组件跳转

使用组件 跳转案例：
例如在公司信息页面跳到公司地址页
在这里插入图片描述
wxml 页面组件navigator 跳转时，可以通过设置open-type属性指明页面跳转方式，此外还有很多其他属性

navigator 导航组件属性列表

在这里插入图片描述

最低0.47元/天 解锁文章
SunBoy_阿豪a
关注
专栏目录
微信小程序常用路由跳转方法
qq_31122143的博客
04-26 9578
微信小程序传参
微信小程序 导航跳转/路由跳转 及 传参
Shimeng_1989的博客
04-06 1639
声明式导航：<navigator>标签 url：必须 "/" 开头（ 跳转的路径） open-type：必须为 navigator (跳转的方式)。跳转到非tabBar页面可以不写此属性 后退 / 返回上一级： open-type="navigateBack" delta："1"，返回上N级（返回的层级为通过navigator标签跳转的层级）。不写默认返回上一级 // 要进行跳转的页面 <navigator url="/pages/myfood/myfood">..
微信小程序（组件跳转、规范、层级准备）&&（路由及组件跳页传参）
lwaner的博客
11-29 610
首先简单回顾下路由API跳转: wx.navigateTo wx.navigateBack wx.redirectTo wx.switchTab wx.reLaunch 除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。 hover样式 对比其他小程序列表项会发现，目前为止，点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元...
微信小程序之页面跳转路由
huangzhin的博客
07-25 7943
一、简介： 微信小程序一共有五个页面跳转路由： 1、wx.switchTab(Object object)----跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 2、wx.reLaunch(Object object)----关闭所有页面，打开到应用内的某个页面 3、wx.redirectTo(Object object)----关闭当前页面，跳转到应用内的某个页面。但是不允许跳...
微信小程序路由跳转
weixin_46957313的博客
06-23 444
一，函数跳转 （相当于js的location.href方法） 1.先说常用的吧wx.navigateTo,它是实现跳转的一种方法，它是保留当前页面，跳转到应用内的某个页面 wx.navigateTo({ url: “…/logs/logs”, }) 2.再说一下实现跳转的另外的几种方式如下： redirecTo，onunload、switchTab、navigateBack（返回） 它们的区别： 1.redirecTo（不可带参，不能返回）、 2、onunload（关闭所有页面，打开到应用内的某个页面） .
微信小程序实现点击文字页面跳转功能【附源码下载】
11-27
微信小程序官方文档对于 `navigator` 组件有详细的说明，包括其他可用属性和用法，如传参、自定义跳转行为等。开发者可以通过查阅官方文档（https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html）...
微信小程序 （组件跳转、规范、层级准备）
weixin_45343878的博客
08-27 1450
路由API跳转小结 hover样式 navigator导航组件跳转 路由跳转规范 页面层级准备 路由API跳转小结 wx.navigateTo wx.navigateBack wx.redirectTo wx.switchTab wx.reLaunch DOM的API：document.createElement 除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进...
微信小程序（组件跳转、规范、层级准备）
weixin_45626166的博客
11-29 574
hover样式 对比其他小程序列表项会发现，目前为止，点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元素添加触屏点击样式，可以给元素添加hover-class属性。 <view class="list-area"> <block wx:for="{{myselfList}}" wx:key="tap"> <view class=...
微信小程序路由跳转详情
Tx的博客
03-11 1675
1.路由跳转 微信小程序的路由跳转 是通过两个栈堆实现的,这就导致了栈堆里最多储存十个页面,如果超过十个,会直接报错,所以要在必要的时候清空栈堆。 wx.navigateTo:最常用的跳转,跳转到另一个页面，并把当前页面存在栈堆里,缺点是会有十个限制,优点是回退的时候非常顺滑,页面直接联系紧密或者非常繁杂的页面跳转的时候推荐使用。 wx.switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面,清空栈堆的方法之一,但局限性比较大。 wx.reLaunch：关闭所有的页面,打开到
微信小程序路由跳转问题
M_SSY的博客
09-11 1933
学习小程序一周的时间总结一下遇到的点击跳转问题： 1.wx.navigateTo  父子之间的跳转（跳转到第二个页面会显示回退的按钮） wx.navigateTo({ url: '../posts/posts' }); 2.wx.redirectTo 两个页面之间的平行跳转（属于页面关闭，卸载，跳转到第二个页面不会显示回退按钮） wx.redirectTo({ url: '../...
微信小程序路由-页面跳转
糖果云专栏
02-24 387
navigator url open-type navigator 跳转到 redirect 重定向 switchTab 跳转到某个tab navigateBack 回退 reLaunch 重加载 API跳转 navigate wx.navigateTo(object) 跳转到 redirect wx.redirectTo(object) 重定向 s...
微信小程序编程式路由跳转
风的轻扬
12-01 941
页面栈表现方式 路由方式 页面栈表现 初始化 新页面入栈 打开新页面 新页面入栈 页面重定向 当前页面出栈，新页面入栈 页面返回 页面不断出栈，直到目标返回页，新页面入栈 Tab 切换 页面全部出栈，只留下新的 Tab 页面 重加载 页面全部出栈，只留下新的页面 路由方式   路由方式 触发时机 路由前页面 ...
微信小程序路由跳转详解
weixin_41796860的博客
09-02 696
方法一 关闭当前页面，跳转到非tabBar的某个页面 gotoHome(){ wx.redirectTo({ url: '/zszy/pages/basics/home/home' }) } 方法二 <navigator url="/zszy/pages/my/repasswd/repasswd?type=1" open-type="redirect"> <view class="wjmm">忘记密码</view> <
微信小程序路由(组件之间跳转)传参和传数据
rgpbrave的博客
04-17 1251
先了解下及种路由跳转 wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。（销毁跳转） 不能跳转到 tabbar的页面 wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。 不能跳转到 tabbar的页面 wx.switchTab(Object object) 跳转到 tab...
微信小程序路由跳转的方式总结
sxc__的博客
10-13 2086
2. wx.redirectTo 关闭当前页面，跳转到应用内的某个页面,不会将当前页缓存在内存中,重定向到其它页面,当前页面移出页面栈,重定向的页面入栈。3.wx.switchTab 跳转到 tabBar 页面，同时关闭其他非 tabBar 页面，会删除内存中缓存的页面,4.wx.navigateBack 返回上一页面,传入参数-1返回上一页,-2返回上上页,返几个就移出几个页面栈。5.wx.reLanch 关闭所有页面，打开到应用内的某个页面,重新加载,全部出栈,只留跳转后的页面。
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
汪子熙的专家技术分享
04-25 3647
笔者由于工作需要，曾经参加过一个微信小程序同 SAP 系统集成的项目，因此从零开始学习了微信小程序的开发知识。这里通过系列文章把自己所学分享出来，希望对相关学习者有所帮助。 本教程前面三篇文章： 微信小程序开发系列 (一) ：开发环境搭建和微信小程序的视图设计与开发 微信小程序开发系列 (二) ：微信小程序的单步调试和控制器实现步骤概述 微信小程序开发系列 (三) ：微信小程序如何响应用户点击事件和微信平台 API 的使用方法介绍 通过本系列前面三篇文章的介绍，大家对微信小程序的视图和控制器，微信调试器
微信小程序组件练习教程及源代码(1122版)
资源摘要信息:"微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。微信小程序主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值