微信小程序（组件跳转、规范、层级准备）

最新推荐文章于 2024-05-07 19:01:46 发布
最新推荐文章于 2024-05-07 19:01:46 发布
阅读量447 收藏
点赞数
分类专栏： 组件跳转 规范 层级准备 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zuomengjia/article/details/103452366
版权
本文详细介绍了微信小程序中的页面跳转规范，包括wx.navigateTo、wx.navigateBack、wx.redirectTo、wx.switchTab、wx.reLaunch等API的使用。重点讲解了navigator组件的属性如open-type、url、target等，并提供了示例。同时，强调了路由跳转的正确实践，如页面深度限制和不同场景下选择合适的跳转方法。还提到了页面层级的概念和准备过程，以及使用navigator组件时的注意事项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

  • （1）路由API跳转小结
  • （2）hover样式
  • （3）navigator导航组件跳转
  • （4）路由跳转规范
  • （5）页面层级准备

前言

  • 首先简单回顾下路由API跳转:
  • wx.navigateTo
  • wx.navigateBack
  • wx.redirectTo
  • wx.switchTab
  • wx.reLaunch
    DOM的API：document.createElemen
  • 除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。

hover样式

  • 对比其他小程序列表项会发现，目前为止，点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元素添加触屏点击样式，可以给元素添加hover-class属性。
    在这里插入图片描述
  • 注意：虽然css的hover伪类也可以实现类似效果，但不太理想，效果粘附性太大，不建议使用。

  • navigator组件跳转

  • 使用组件 跳转案例：
  • 例如在公司信息页面跳到公司地址页
最低0.47元/天 解锁文章
微信小程序webview内嵌h5页面
技术前端，忠于热爱 @回忆哆啦没有A梦
11-03 9563
微信官方文档https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 正式上线前准备（前期开发调试可以忽略） 首先登录小程序管理后台，把 web-view 直连的 h5 页面地添加到配置域名白名单中 比如我想要小程序直连地址为https://me.youkuaiyun.com/weixin_39550080的页面，那就应该把https://me.youkuaiyun.com添加到 webview 业务域名白名单中 (注意不是 requ.
微信小程序-设置显示层级
weixin_42301205的博客
08-30 1万+
index.wxml z-index的值越大，view显示在越上面，反之z-index的值越小，view显示在越下面 <view class="div-relative"> <view class="div-a">我背景为红色</view> <view class="div-b">我背景为黄色</view> <vi...
微信小程序和webview通信踩坑（表单篇）
SwingDance的博客
11-07 1989
总的来说思路清晰实现不难，注意一些细节以及一些小坑，实现起来还是比较容易的。
微信小程序 页面跳转传参详解
09-01
在微信小程序中，页面间的跳转和参数传递是常见的需求，尤其在开发具有多层级结构的应用时。本文将深入解析微信小程序中如何实现页面跳转并传递参数。 首先，我们来看一下示例代码中的结构。在`<view>`组件中，有两...
微信小程序实现点击文字页面跳转功能【附源码下载】
11-27
微信小程序官方文档对于 `navigator` 组件有详细的说明，包括其他可用属性和用法，如传参、自定义跳转行为等。开发者可以通过查阅官方文档（https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html）...
微信小程序（组件跳转、规范、层级准备）&&微信小程序（路由及组件跳页传参）
weixin_45492145的博客
11-29 498
首先简单回顾下路由API跳转: wx.navigateTo wx.navigateBack wx.redirectTo wx.switchTab wx.reLaunch 除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。 hover样式 对比其他小程序列表项会发现，目前为止，点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元...
微信小程序 （组件跳转、规范、层级准备）
weixin_45343878的博客
08-27 1508
路由API跳转小结 hover样式 navigator导航组件跳转 路由跳转规范 页面层级准备 路由API跳转小结 wx.navigateTo wx.navigateBack wx.redirectTo wx.switchTab wx.reLaunch DOM的API：document.createElement 除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进...
微信小程序之（web-view）踩坑记录
萧萧的博客
08-30 3854
公司新作项目需要在之前的小程序里面加一个模块，上面要求用小程序嵌套h5的方式去搞，在使用web-view的时候，嵌入页面貌似没有任何问题，传递数据到h5也貌似没有问题，看着很完美，可是在使用的时候坑一个接一个的。 坑一：头部返回按钮的不显示 坑二：页面不会保留 坑三：Android上传页面回退首页。。。 小小一个功能坑实在是太多了，上微信公众平台看了下大家遇到过类似的问题，但是官方比你高没...
小程序创建组件
weixin_53052268的博客
07-22 357
从表面看，组件和页面都是由.js.json.wxml.wxss这四个文件组成。1.3全局应用（在app.json文件中配置）根据组件的使用频率和范围，选择合适的方式。1.4全局引用vs局部应用。1.5组件和页面的区别。
微信小程序之传递指定的值给函数（“document“取值）
菜二娘的博客
08-03 6101
这几天在普及微信小程序相关知识的时候，发现做H5开发的小伙伴们，在练习做微信小程序的过程中，总是会问我一个相同的问题，"document取值怎么没有效果哈?" 其实这应该是很多小伙伴都有的疑问。 对于这个问题如何快速的去解决呢？其实很简单，H5中使用到document基本上是在js中给对应的标签设置值或者获取对应的值。 1.如何给动态设置值 只需要在js中data下面定义一个变量a,然后在需
[微信] 开发微信小程序代码实战
小石头的幸福—2014
09-26 3161
开发微信小程序流程 接入微信小程序 > 代码开发 > 提交审核和发布 接入 接入是指在微信平台注册和相关身份信息认证 1:微信公众平台(https://mp.weixin.qq.com/) 注册小程序,获取唯一标识AppId ,和相关身份信息认证 2:微信商户平台(https://pay.weixin.qq.com/) 注册,获取商户信息,支付场景用到 开发准备
18、查看事件
you can you up up up的博客
10-18 483
创建好事件后，用户可以通过以下 3 种方式来查看事件的状态信息： 查看 mysql.event 查看 information_schema.events 切换到相应的数据库后执行 SHOW EVENTS; 以上方式的运行结果基本一致，这里就不一一演示了。下面查看 information_schema.events 表中的事件状态信息。SQL 语句和运行结果如下： mysql> SELECT * FROM information_schema.events limit 1\G ***********
[微信小程序]手指触摸动画效果(完整代码附效果图)
热门推荐
a_靖的博客
12-01 2万+
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文： 本文共有两个示例,先上图 示例一: 示例二: 示例一代码(微信小程序): // pages/test/test.js Page({ containerTap: function (res) { var that = this var x = res.to...
解决小程序问题之U.createEvent
johnrf的博客
07-14 826
解决小程序中（MiniProgramError U.createEvent is not a function TypeError: U.createEvent is function）方案 相信最近又不少小伙伴都遇到这种问题，百度答案千奇百怪，这里提出一些常见的解决方案，而我遇到这个比较多的情况是在写页面跳转时，其他情况看下面讲解 解决方案如下解决小程序中（MiniProgramError U.createEvent is not a function TypeError: U.createEvent
微信小程序--逻辑层与界面层
最新发布
feifei99_8820的博客
05-07 1064
今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。有些晦涩的点，或许它只活在面试当中，实际工作当中你压根不会用到它，但是你要知道它是什么东西。最后在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。还有。
CSS层级嵌套关系详解
neuxiang的专栏
09-19 2182
如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出。 它可能不像其它那么重要，大部分案例你不需要担心冲突，但大型而且复杂的CSS文件，或有很多CSS文件组成的，可能产生冲突。 选择器一样的情况下后面的会覆盖前面的属性。比如： 以下是代码片段： p { color: red; } p { color: blue; }
微信小程序Map组件详解与页面跳转
"本文主要介绍了微信小程序中Map组件的使用，包括如何设置地图中心点、缩放层级，以及展示不同样式的标记、线和圆。此外，还提到了地图控件的使用和事件绑定，帮助开发者理解在微信小程序中如何实现地图功能。文章...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值