首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序API之路由详解

小程序API之路由详解

作者头像
前端老鸟
发布于 2019-07-31 09:13:10
发布于 2019-07-31 09:13:10
1.4K00
代码可运行
举报
文章被收录于专栏:front-end technologyfront-end technology
运行总次数:0
代码可运行

小程序API路由详解

路由

wx.switchTab

  • wx.switchTab(Object object)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
  • 参数

属性

类型

默认值

必填

说明

url

string

success

function

fail

function

complete

function

  • 示例代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.switchTab({
  url: '/index'
})

wx.reLaunch

  • wx.reLaunch(Object object)关闭所有页面,打开到应用内的某个页面
  • 参数

属性

类型

默认值

必填

说明

url

string

需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'

success

function

fail

function

complete

function

  • 示例代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.reLaunch({
  url: 'test?id=1'
})
// test
Page({
  onLoad (option) {
    console.log(option.query)
  }
})

wx.redirectTo

  • wx.redirectTo(Object object)关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
  • 参数

属性

类型

默认值

必填

说明

url

string

success

function

fail

function

complete

function

否 接口调用结束的回调函数(调用成功、失败都会执行)

  • 示例代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.redirectTo({
  url: 'test?id=1'
})

wx.navigateTo

  • wx.navigateTo(Object object)保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
  • 参数 Object object | 属性 | 类型 | 默认值 | 必填 | 说明 | | ------ | ------ | ------ | ------ | ------ | | url | | string| || 是 | 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'| |events| |Object| || 否 |页面间通信接口,用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。| | success| function| || 否 | 接口调用成功的回调函数 | | fail | function| || 否 | 接口调用失败的回调函数 | | complete | function| || 否 | 接口调用结束的回调函数(调用成功、失败都会执行)|
  • 示例代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

wx.navigateBack

  • wx.navigateBack(Object object) 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
  • 参数 Object object | 属性 | 类型 | 默认值 | 必填 | 说明 | | ------ | ------ | ------ | ------ | ------ | |delta| number| | | 是| 返回的页面数,如果 delta 大于现有页面数,则返回到首页。| |success| function| | | 否 | 接口调用成功的回调函数 | |fail | function| | | 否 | 接口调用失败的回调函数 | |complete| function| | | 否 | 接口调用结束的回调函数(调用成功、失败都会执行)|
  • 示例代码
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
  delta: 2
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年07月22日,如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序页面路由
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
菲宇
2019/10/22
1.4K0
微信小程序路由跳转
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
小小咸鱼YwY
2020/06/19
1.3K0
小程序页面跳转方法总结
在开发小程序的时候,会碰到页面间进行跳转的需求,小程序间页面跳转的方法有很多,大体分为两类,一个是指令方式,一个是用过js控制。
挥刀北上
2020/11/10
7.9K0
小程序页面跳转方法总结
【愚公系列】2022年03月 微信小程序-导航(跳转)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
愚公搬代码
2022/12/01
1.1K0
【愚公系列】2022年03月 微信小程序-导航(跳转)
微信小程序-页面跳转说明
说明:保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
碧海长天
2021/10/21
1.4K0
【愚公系列】《微信小程序与云开发从入门到实践》007-路由与模块化
在当今的移动应用开发中,微信小程序以其轻量化和便捷的特点,受到了越来越多开发者的青睐。而在构建复杂的小程序时,路由管理和模块化设计显得尤为重要。良好的路由设计可以帮助用户实现流畅的页面导航,而模块化则有助于提升代码的可读性和可维护性,促进团队协作。
愚公搬代码
2025/01/10
1910
微信小程序开发笔记
1.跳转方式 //只能跳转到tabBar配置页面 wx.switchTab({ url: '/pages/index/index', }); //返回上一级页面(delta:返回的页面数,如果 delta 大于现有页面数,则返回到首页,默认值为1) wx.navigateBack({ delta: 2 }) //关闭当前页面,跳转到应用内的某个页面 wx.redirectTo({ url: '/pages/index/index', }); //保留当前页面,跳转到应用内的某个页面 wx
kif
2023/02/27
2070
wx.navigateTo 跳转页面失败?
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/79694085
泥豆芽儿 MT
2018/09/11
1.4K0
微信小程序开发之五种链接到其它页面的方式详解
  经过一天的熟悉,终于把微信小程序的几种链接方式搞明白了,微信链接共分为五种方式分别是:wx.switchTab只能跳转到tabBar配置页面,wx.navigateBack返回上一级或上N级,wx.redirectTo关闭当前页面,跳转到应用内的某个页面,wx.navigateTo保留当前页面,跳转到应用内的某个页面,wx.reLaunch关闭所有页面,打开到应用内的某个页面。
睿儿网络郝刚
2020/09/08
2.1K0
微信小程序开发之五种链接到其它页面的方式详解
小程序里页面跳转的两种方式
•1,借助navigator组件•2,借助wx.自带方法,在点击的时候做页面跳转 如下图所示的几个wx.方法
编程小石头
2021/01/12
6.9K0
小程序里页面跳转的两种方式
小程序跳转页面的3种方式总结
wx.switchTab()方法用来跳转至tabBar页面,并关闭其他所有非 tabBar 页面,示例代码如下:
红色扛把子
2019/07/30
3.9K0
小程序跳转页面的3种方式总结
【查缺补漏】 15个高频微信小程序面试题
微信小程序面试题 1. 小程序有几个文件? WXML: 微信自己定义的一套组件 WXSS : 用于描述 WXML 的组件样式 js : 逻辑处理 json : 小程序页面配置 2.小程序怎么跟随事件传值 在 页面标签上通过 绑定 data-key = value , 然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值。 <button bindtap="get" data-name="测试"> 拿到传值</button> get(e){
程序员海军
2022/02/15
1.9K0
navigateTo、redirectTo、switchTap与reLaunch的区别
wx.navigateTo:保留当前页,跳转到指定页,非tabBar;使用 wx.navigateBack 可以返回到当前的页面。
星尘库
2023/05/01
9740
navigateTo、redirectTo、switchTap与reLaunch的区别
微信小程序面试
如何实现下拉刷新 app.json或者页面的json中配置enablePullDownRefresh为true 使用onPullDownRefresh 函数,该函数在下拉刷新时执行 调用 wx.stopPullDownRefresh 停止下拉刷新的状态
达达前端
2019/08/01
6870
15个高频微信小程序面试题
kRjT-hhuhism9497041.jpg 微信小程序面试题 1. 小程序有几个文件? WXML: 微信自己定义的一套组件 WXSS : 用于描述 WXML 的组件样式 js : 逻辑处理 json : 小程序页面配置 2.小程序怎么跟随事件传值 在 页面标签上通过 绑定 dataset-key = value , 然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值。 <button bindtap="get" data-name=
程序员海军
2021/01/17
7.1K0
15个高频微信小程序面试题
开发 | 天天用小程序页面跳转接口,但你真的了解它们吗?
今天,知晓程序(微信号 zxcx0101)就来为你详细解析,小程序中有关页面跳转的 4 个接口,帮助你更有效地利用小程序的 5 层页面层级限制。
知晓君
2018/07/27
7960
微信小程序中wx.navigateTo , wx.redirectTo , wx.switchTab , wx.navigateBack , wx.reLaunch 的区别 ?
二、 wx.redirectTo() 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
青梅煮码
2023/02/18
1.2K0
【黄啊码】解决微信小程序showToast不显示
看这代码,好像一点问题都没有,但是hideLoading和showTast调用的是同个框,所以我们走下流程:
黄啊码
2022/01/09
1.1K0
【黄啊码】解决微信小程序showToast不显示
零基础微信小程序开发——页面导航之编程式导航(保姆级教程+超详细)
调用 wx.switchTab(Object object) 方法,可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下
小白的大数据之旅
2024/12/28
2230
零基础微信小程序开发——页面导航之编程式导航(保姆级教程+超详细)
小程序页面管理与跳转
原文链接:https://godbasin.github.io/2018/09/08/wxapp-page-and-navigate/
李成熙heyli
2018/11/14
3K0
小程序页面管理与跳转
推荐阅读
相关推荐
微信小程序页面路由
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档