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

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

目录

  • （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元/天 解锁文章
·Mr.zuo
关注
专栏目录
微信小程序 （组件跳转、规范、层级准备）
weixin_45343878的博客
08-27 1436
路由API跳转小结 hover样式 navigator导航组件跳转 路由跳转规范 页面层级准备 路由API跳转小结 wx.navigateTo wx.navigateBack wx.redirectTo wx.switchTab wx.reLaunch DOM的API：document.createElement 除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进...
微信小程序webview内嵌h5页面
技术前端，忠于热爱 @回忆哆啦没有A梦
11-03 9307
微信官方文档https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 正式上线前准备（前期开发调试可以忽略） 首先登录小程序管理后台，把 web-view 直连的 h5 页面地添加到配置域名白名单中 比如我想要小程序直连地址为https://me.csdn.net/weixin_39550080的页面，那就应该把https://me.csdn.net添加到 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 1687
总的来说思路清晰实现不难，注意一些细节以及一些小坑，实现起来还是比较容易的。
微信小程序 页面跳转传参详解
09-01
在微信小程序中，页面间的跳转和参数传递是常见的需求，尤其在开发具有多层级结构的应用时。本文将深入解析微信小程序中如何实现页面跳转并传递参数。 首先，我们来看一下示例代码中的结构。在`<view>`组件中，有两...
微信小程序实现点击文字页面跳转功能【附源码下载】
11-27
微信小程序官方文档对于 `navigator` 组件有详细的说明，包括其他可用属性和用法，如传参、自定义跳转行为等。开发者可以通过查阅官方文档（https://mp.weixin.qq.com/debug/wxadoc/dev/component/navigator.html）...
微信小程序（组件跳转、规范、层级准备）&&微信小程序（路由及组件跳页传参）
weixin_45492145的博客
11-29 466
首先简单回顾下路由API跳转: wx.navigateTo wx.navigateBack wx.redirectTo wx.switchTab wx.reLaunch 除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。 hover样式 对比其他小程序列表项会发现，目前为止，点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元...
微信小程序之（web-view）踩坑记录
萧萧的博客
08-30 3790
公司新作项目需要在之前的小程序里面加一个模块，上面要求用小程序嵌套h5的方式去搞，在使用web-view的时候，嵌入页面貌似没有任何问题，传递数据到h5也貌似没有问题，看着很完美，可是在使用的时候坑一个接一个的。 坑一：头部返回按钮的不显示 坑二：页面不会保留 坑三：Android上传页面回退首页。。。 小小一个功能坑实在是太多了，上微信公众平台看了下大家遇到过类似的问题，但是官方比你高没...
微信小程序之传递指定的值给函数（“document“取值）
菜二娘的博客
08-03 5993
这几天在普及微信小程序相关知识的时候，发现做H5开发的小伙伴们，在练习做微信小程序的过程中，总是会问我一个相同的问题，"document取值怎么没有效果哈?" 其实这应该是很多小伙伴都有的疑问。 对于这个问题如何快速的去解决呢？其实很简单，H5中使用到document基本上是在js中给对应的标签设置值或者获取对应的值。 1.如何给动态设置值 只需要在js中data下面定义一个变量a,然后在需
18、查看事件
you can you up up up的博客
10-18 448
创建好事件后，用户可以通过以下 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...
[微信] 开发微信小程序代码实战
小石头的幸福—2014
09-26 3006
开发微信小程序流程 接入微信小程序 > 代码开发 > 提交审核和发布 接入 接入是指在微信平台注册和相关身份信息认证 1:微信公众平台(https://mp.weixin.qq.com/) 注册小程序,获取唯一标识AppId ,和相关身份信息认证 2:微信商户平台(https://pay.weixin.qq.com/) 注册,获取商户信息,支付场景用到 开发准备
解决小程序问题之U.createEvent
johnrf的博客
07-14 772
解决小程序中（MiniProgramError U.createEvent is not a function TypeError: U.createEvent is function）方案 相信最近又不少小伙伴都遇到这种问题，百度答案千奇百怪，这里提出一些常见的解决方案，而我遇到这个比较多的情况是在写页面跳转时，其他情况看下面讲解 解决方案如下解决小程序中（MiniProgramError U.createEvent is not a function TypeError: U.createEvent
document.createElement()和document.createDocumentFragment()的比较
weixin_34273479的博客
04-01 544
我在上一篇文章js中DOM操作复习总结中提到了：document.createElement()和document.createDocumentFragment()，虽说我们平时可以把两者混着用，但是还是得明白两者之间的区别： 一.在DOM操作中document.createElement()每次创建的都是一个DOM节点，所以每次都要执行把节点添加到do...
document.createElement()的用法
aeon521730041的博客
09-01 2906
分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。 document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore()...
微信小程序开发教程之获取节点下的小节点
shuyuan0513的博客
01-16 3940
Hi小程序小编了解到，微信小程序成为当下热门话题，下面从多个方面来谈谈微信小程序开发教程之获取节点下的小节点。     微信小程序开发教程已经是当下最热门的话题，下面将从多方面来谈谈获取节点下的小节点相关的内容。 上一节我们讲到通过get的方式来获取不同的节点，那么节点之下是什么呢，其实还是节点，那么我们如何获取节点下的小节点呢? 属性名 描述 hasChildNodes() 返回一个...
微信小程序Map组件详解与页面跳转
"本文主要介绍了微信小程序中Map组件的使用，包括如何设置地图中心点、缩放层级，以及展示不同样式的标记、线和圆。此外，还提到了地图控件的使用和事件绑定，帮助开发者理解在微信小程序中如何实现地图功能。文章...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值