Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序-页面跳转wxAPI

微信小程序-页面跳转wxAPI

作者头像
程序员NEO
发布于 2023-05-22 00:30:58
发布于 2023-05-22 00:30:58
73400
代码可运行
举报
运行总次数:0
代码可运行

wx.navigateTo(Object object)

更改首页代码,添加一个按钮,绑定一个事件的点击:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--index.wxml-->
<text>首页</text>
<button bindtap="toLog">跳转到日志页面</button>

在监听的方法当中使用 wx.navigateTo(Object object) 进行页面的跳转与传参:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// index.js
Page({
  toLog() {
    wx.navigateTo({
      url: '/pages/logs/logs?name=BNTang&age=18',
    })
  }
});

wx.navigateBack(Object object)

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

更改日志页面代码,添加一个按钮,绑定一个事件的点击:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--logs.wxml-->
<text>日志页面</text>
<button bindtap="myNavigatorBack">返回上一个页面</button>

在监听的方法当中使用 wx.navigateBack(Object object) 进行页面的返回(页面栈出栈):

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// logs.js
Page({
  myNavigatorBack() {
    wx.navigateBack({})
  }
})

在 navigateBack 当中有一个属性我们需要进行了解一下就是 delta:

返回的页面数,如果 delta 大于现有页面数,则返回到首页。如果我们现在的跳转关系如下:

首页 -> 日志 -> 测试页面, 这个时候我们想要在测试页面直接返回到首页就需要利用 dalta 来指定返回的页面数即可,也就是需要出栈的页面,如下图,如果我们设置为 2,Test 与 日志都进行出栈,那么我们看到的就是首页了。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-05-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序-页面跳转数据传递
在之前的文章当中我们都实现了一个功能就是可以从上一个页面传递数据给下一个页面,那么我们能不能从下一个页面传递数据给上一个页面呢,答案是可以的。
程序员NEO
2023/05/22
3860
小程序 | 15-页面跳转
实现界面跳转有两种方式:通过 navigator 组件 和 通过 wx 的 api 跳转
CnPeng
2021/05/17
8880
小程序 | 15-页面跳转
微信小程序-页面跳转navigator组件
在官方文档当中有提到一个叫做页面栈的这么一个东西,就是一个水杯,进入一个页面就是入到页面栈,退出就是从页面栈当中移除,就会显示下一个页面了。
程序员NEO
2023/05/22
6400
微信小程序-页面跳转navigator组件
微信小程序不能跳转页面(微信小程序页面跳转动画)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/126066.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/01
2.8K0
微信小程序不能跳转页面(微信小程序页面跳转动画)
微信小程序页面路由
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
菲宇
2019/10/22
1.3K0
小程序页面跳转方法总结
在开发小程序的时候,会碰到页面间进行跳转的需求,小程序间页面跳转的方法有很多,大体分为两类,一个是指令方式,一个是用过js控制。
挥刀北上
2020/11/10
7.8K0
小程序页面跳转方法总结
微信小程序-页面跳转说明
说明:保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
碧海长天
2021/10/21
1.4K0
微信小程序路由跳转
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
小小咸鱼YwY
2020/06/19
1.3K0
小程序API之路由详解
小程序API之路由详解 路由 wx.switchTab wx.switchTab(Object object)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 参数 属性 类型 默认值 必填 说明 url string 是 success function 否 fail function 否 complete function 否 示例代码 { "tabBar": { "list": [{ "pagePath": "index",
前端老鸟
2019/07/31
1.4K0
零基础微信小程序开发——页面导航之编程式导航(保姆级教程+超详细)
调用 wx.switchTab(Object object) 方法,可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下
小白的大数据之旅
2024/12/28
1670
零基础微信小程序开发——页面导航之编程式导航(保姆级教程+超详细)
微信小程序页面跳转方法和携带参数详解「建议收藏」
(3)wx.switchTab 方法跳转只适用于调转到设置了tabbar的页面
Java架构师必看
2022/02/03
4.3K0
【愚公系列】2022年03月 微信小程序-导航(跳转)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
愚公搬代码
2022/12/01
1K0
【愚公系列】2022年03月 微信小程序-导航(跳转)
开发 | 天天用小程序页面跳转接口,但你真的了解它们吗?
今天,知晓程序(微信号 zxcx0101)就来为你详细解析,小程序中有关页面跳转的 4 个接口,帮助你更有效地利用小程序的 5 层页面层级限制。
知晓君
2018/07/27
7650
小程序组件/页面通信
通过在 A 组件在使用 navigateTo Api 跳转时,通过events属性注册事件,然后在 success 成功响应里 向 目标组件触发事件,最后在跳转的目标组件B 中 通过 eventChannel.on 来监听对应的事件即可。
程序员海军
2023/11/13
7810
小程序页面事件与wxs脚本
在使用 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中:
timerring
2023/06/10
5160
小程序页面事件与wxs脚本
如何「掏空」小程序的五层页面限制? | 技术宝典
知晓程序注: 很多开发者在面对小程序的五层页面限制时,大概都会想起下面这首歌。 知晓程序(微信号 zxcx0101)现在就告诉你们,怎样狠狠把这五层页面榨干。 微信小程序中的页面导航 API 有三个,
知晓君
2018/06/28
5400
微信小程序-页面跳转
微信小程序-页面跳转
Java架构师必看
2021/06/08
1.4K0
微信小程序-页面跳转
微信小程序的页面跳转非常简单,既可以调用微信自己写好的API跳转,又可以使用wxml页面组件跳转。实现页面跳转现在又三种方式,分别是保留当前页面,跳转到某个页面;关闭当前页面,跳转到某个页面;跳转到tabBar页面。下面分别介绍一下与之对应的API:
全栈程序员站长
2022/08/10
1.2K0
如何跳出小程序五级页面的限制
前言:做小程序开发,就要在微信的规则内玩耍。最近做的小程序经常会有个报错:RangeError: Maximum call stack size exceeded。这意思是说小程序页面超过5级跳转了,
连胜
2018/03/07
2K0
如何跳出小程序五级页面的限制
【愚公系列】《微信小程序与云开发从入门到实践》007-路由与模块化
在当今的移动应用开发中,微信小程序以其轻量化和便捷的特点,受到了越来越多开发者的青睐。而在构建复杂的小程序时,路由管理和模块化设计显得尤为重要。良好的路由设计可以帮助用户实现流畅的页面导航,而模块化则有助于提升代码的可读性和可维护性,促进团队协作。
愚公搬代码
2025/01/10
1420
相关推荐
微信小程序-页面跳转数据传递
更多 >
加入讨论
的问答专区 >
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
    本文部分代码块支持一键运行,欢迎体验
    本文部分代码块支持一键运行,欢迎体验