【微信小程序】页面路由跳转函数之间的区别

这篇具有很好参考价值的文章主要介绍了【微信小程序】页面路由跳转函数之间的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序开发系列



前言

在开发微信小程序中基本都会用到页面跳转,微信小程序提供了几个页面跳转函数。它们之间有一些区别,试用用时需要注意,否则会达不到预期效果。下面介绍这几种页面跳转的的区别。


一、介绍

一共提供了五个页面跳转函数,它们都支持 Promise 风格 调用。

1.wx.switchTab(Object object)

描述:
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,该函数是跳转到底部tabBar时使用的。
参数:
Object object

属性 类型 必填 说明
url string 需要跳转的 tabBar 页面的路径 (代码包路径)(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

代码示例:

// app.json
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
wx.switchTab({
  url: '/index'
})

2.wx.reLaunch(Object object)

描述:
关闭所有页面,打开到应用内的某个页。
参数:
Object object

属性 类型 必填 说明
url string 需要跳转的应用内页面路径 (代码包路径),路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

代码示例:

wx.reLaunch({
  url: 'test?id=1'
})

3.wx.redirectTo(Object object)

描述:
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
参数:
Object object

属性 类型 必填 说明
url string 需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

代码示例:

wx.redirectTo({
  url: 'test?id=1'
})

4.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 接口调用结束的回调函数(调用成功、失败都会执行)
routeType string 2.29.2 自定义路由类型,相关文档 自定义路由

object.success
回调函数参数 Object res

属性 类型 说明
eventChannel EventChannel 和被打开页面进行通信

示例代码文章来源地址https://www.toymoban.com/news/detail-663552.html

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' })
  }
})
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)
    })
  }
})

5.wx.navigateBack(Object object)

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

属性 类型 必填 说明
delta number 返回的页面数,如果 delta 大于现有页面数,则返回到首页。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码


// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码

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

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

// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
  delta: 2
})

到了这里,关于【微信小程序】页面路由跳转函数之间的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序路由跳转,API调用,页面传值

    wx.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 wx.reLaunch 关闭所有页面,打开到应用内的某个页面。 wx.redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不能跳转到 tabbar 页面。 wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面

    2024年02月12日
    浏览(44)
  • 微信小程序中路由跳转的方式有哪些?区别?

    微信小程序拥有 web 网页和 Application 共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能 在微信小程序中,每个页面可以看成是一个 pageModel , pageModel 全部以栈的形式进行管理 常见的微信小程序页面跳转方式有如下: wx.navig

    2024年02月01日
    浏览(42)
  • 【面试合集】说说微信小程序中路由跳转的方式有哪些?区别?

    微信小程序拥有 web 网页和 Application 共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能 在微信小程序中,每个页面可以看成是一个 pageModel , pageModel 全部以栈的形式进行管理 常见的微信小程序页面跳转方式有如下: wx.navig

    2024年01月19日
    浏览(49)
  • 微信小程序 跳转页面经常会遇到判断是否登录情况。基于此需求,做了一个路由跳转拦截的jump组件

    组件代码非常简单 在根目录创建components目录 在components目录新建jump目录 在jump目录新建四个文件 index.js index.json index.wxml index.wxss 这个样式文件内容空就行

    2024年02月09日
    浏览(54)
  • 小程序(uniapp)页面的跳转方式有哪些,他们之间的区别是什么?

    1、uni.navigateTo: 保留当前页面,跳转到应用的某个页面,使用 uni.navigateBack 可以返回原页面。这种方式类似于网页的超链接跳转。 2、uni.redirectTo: 关闭当前页面,跳转大应用内的某个页面。这种方式类似于网页的重定向。 3、uni.switchTab: 跳转到tabBar页面,并关闭其他所有非ta

    2024年02月11日
    浏览(43)
  • 微信小程序之间跳转,多个微信小程序相互跳转,小程序里如何跳转另一个小程序

    微信小程序之间跳转,多个微信小程序相互跳转,小程序里如何跳转另一个小程序 view代码 js代码

    2024年02月12日
    浏览(45)
  • APP跳转H5、微信小程序与微信小程序之间互跳

    plus.share.getServices(function(res) { var sweixin = null; for (var i = 0; i res.length; i++) { var t = res[i]; if (t.id == ‘weixin’) { sweixin = t; } } if (sweixin) { sweixin.launchMiniProgram({ id: item.id, //小程序原始id type: item.type, //环境 0-正式版; 1-测试版; 2-体验版 path: path //指定页的路径,如需传参直接字符串

    2024年02月08日
    浏览(53)
  • 微信小程序之间是如何跳转的,并携带参数

    要实现小程序之间的跳转,需要使用小程序的跳转 API。具体步骤如下:         1、在原小程序中,使用  wx.navigateToMiniProgram  API 跳转到目标小程序。         2、在目标小程序中,接收参数并进行处理。在目标小程序中,可以使用wx.getLaunchOptionsSync API获取原始启动参

    2024年02月16日
    浏览(48)
  • 微信小程序:跳转页面

    实际调用需要根据自己业务实际情况决定,虽然各种方式一定程度上能减少内存损耗,但是业务上面流转优化才是最终要满足的,一定要从业务流转去优化去考虑,不要为了性能增加了流转复杂度 1、wx.navigateTo 保留当前页面,跳转到应用内的某个页面。可以通过调用  wx.na

    2024年02月03日
    浏览(66)
  • 微信小程序页面跳转方式+跳转小程序

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 跳转到其他页面(非tabBar页) 返回上一页面或返回多级页面 首先需要在当前小程序app.json中定义:需要跳转的小程序的app-id app.josn文件: 第一种方法:wx.

    2024年02月12日
    浏览(82)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包