返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序路由跳转两种方式示例解析
  • 627
分享到

微信小程序路由跳转两种方式示例解析

2024-04-02 19:04:59 627人浏览 薄情痞子
摘要

目录官方文档路由跳转的两种形式标签形式js形式快速总结小程序路由跳转1.1 wx.switchTab(Object object)1.2 wx.reLaunch(Object obj

官方文档

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

路由跳转的两种形式

标签形式

 <navigator url="/pages/test/test" open-type="switchTab" >跳转到新页面</navigator>

 通过open-type来选择和上面一样的跳转方式

js形式

# wxml文件
<button bind:tap="tiao">跳转</button>
# js文件
tiao1:function(){
    wx.reLaunch({
      url: '/pages/test/test',
    })
  },  

快速总结

# wxml文件
<button bind:tap="tiao">跳转</button>
# js文件
tiao1:function(){
    wx.reLaunch({
      url: '/pages/test/test',
    })
  },    
// 只能跳转到tabBar页面,不能跳转到非tabBar页面,并且关闭
    //所有非tabBar页面,url不能携带参数
     wx.switchTab({
      url: '/pages/test/test',
     })
  //关闭所有的页面,打开应用内的某个页面,他的url可以携带参数
  //在跳转页面的onload生命周期函数中去接收
     wx.reLaunch({
        url: '/pages/test1/test1?name=123&age=18',
      })
    //关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到
    //tabbar页面,他的路由也是可以携带参数的
    wx.redirectTo({
    	url: '/pages/test1/test1?name='+this.data.name1+'&age=17',
     })
    //保留当前页面,跳转到应用内的某个页面,但是不能跳转到
    //tabbar,可以使用wx.navigateBack返回到原来的页面,
    //他的url也可以带参数,小程序中页面最多栈10层
    wx.navigateTo({
      url: '/pages/test1/test1?name=333',
    })
  //delat表示回退多少层
  wx.navigateBack({
     delta:1
   })

小程序路由跳转

1.1 wx.switchTab(Object object)

这里的tabBar是底下的导航栏指定的页面,

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

参数

Object object

属性类型默认值必填说明
urlstring 需要跳转的 tabBar 页面的路径(需在 app.JSON 的tabBar字段定义的页面),路径后不能带参数。
successfunction 接口调用成功的回调函数
failfunction 接口调用失败的回调函数
completefunction 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

1.2 wx.reLaunch(Object object)

基础库 1.1.0 开始支持,低版本需做兼容处理。

关闭所有页面,打开到应用内的某个页面

参数

Object object

属性类型默认值必填说明
urlstring 需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
successfunction 接口调用成功的回调函数
failfunction 接口调用失败的回调函数
completefunction 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.reLaunch({
  url: 'test?id=1'
})
// test Page({ onLoad (option) { console.log(option.query) } })

1.3 wx.redirectTo(Object object)

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

参数

Object object

属性类型默认值必填说明
urlstring 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
successfunction 接口调用成功的回调函数
failfunction 接口调用失败的回调函数
completefunction 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

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

1.4 wx.navigateTo(Object object)

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。

参数

Object object

属性类型默认值必填说明
urlstring 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
successfunction 接口调用成功的回调函数
failfunction 接口调用失败的回调函数
completefunction 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

wx.navigateTo({
  url: 'test?id=1'
})
// test.js
Page({
  onLoad(option) {
    console.log(option.query)
  }
})

1.5 wx.redirectTo与wx.navigateTo的区别

1.利用wx.navigateTo跳转到下一个页面的时候(这时候会执行onHide方法),下一个页面头部会有返回按钮

2.如果不想有返回按钮,可以用wx.redirectTo进行页面跳转(这时候关闭此页面,会执行onUnload生命周期,这样下一个页面就不会有返回按钮了,因为上一个页面已经被关闭了,没有页面可以返回)

1.6 wx.navigateBack(Object object)

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

参数

Object object

属性类型默认值必填说明
deltanumber 返回的页面数,如果 delta 大于现有页面数,则返回到首页。
successfunction 接口调用成功的回调函数
failfunction 接口调用失败的回调函数
completefunction 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})
// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
  delta: 2
})

以上就是微信小程序路由跳转两种方式示例解析的详细内容,更多关于微信小程序路由跳转方式的资料请关注编程网其它相关文章!

--结束END--

本文标题: 微信小程序路由跳转两种方式示例解析

本文链接: https://lsjlt.com/news/146421.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序路由跳转两种方式示例解析
    目录官方文档路由跳转的两种形式标签形式js形式快速总结小程序路由跳转1.1 wx.switchTab(Object object)1.2 wx.reLaunch(Object obj...
    99+
    2024-04-02
  • 微信小程序路由跳转的两种方式是什么
    本篇内容介绍了“微信小程序路由跳转的两种方式是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!路由跳转的两种形式标签形式 <...
    99+
    2023-06-30
  • Android开发微信小程序路由跳转方式
    目录官方文档路由跳转的两种形式标签形式js形式快速总结小程序路由跳转1.1 wx.switchTab(Object object)1.2 wx.reLaunch(Object obj...
    99+
    2024-04-02
  • Android开发微信小程序路由跳转方式是什么
    这篇文章主要讲解了“Android开发微信小程序路由跳转方式是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android开发微信小程序路由跳转方式是什么”吧!路由跳转的两种形式标签形式...
    99+
    2023-06-30
  • 微信小程序页面跳转方式+跳转小程序
    一. 跳转页面方法 1.跳转到 tabBar 页面 wx.switchTab({ url: '/index'}) 2.跳转到其他页面(非tabBar页) //redirectTo方法(会关闭当前页面...
    99+
    2023-09-28
    小程序 微信小程序
  • 微信小程序页面路由的示例分析
    这篇文章将为大家详细讲解有关微信小程序页面路由的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。页面路由在小程序中所有页面的路由全部由框架进行管理。页面栈框架以栈的形式维护了当前的所有页面。当发生路...
    99+
    2023-06-26
  • Vue路由跳转的4种方式小结
    目录1、 标签路由 router-link2、编程式路由 this.$router.push()3、this.$router.replace()(与this.$router.push...
    99+
    2024-04-02
  • 微信小程序之五种页面跳转方法小结
    目录第一种:<navigator></navigator>标签.第二种:wx.navigateTo.第三种:wx.redirectTo.第四种:wx.swit...
    99+
    2024-04-02
  • 在微信小程序中跳转到另一个小程序(多种实现方式)
    今天在项目中刚好遇到一个到从当前小程序中跳转到另一个小程序,下面分享一下我总结的几个比较简单的跳转方式吧。 方式一: 1.配置要跳转的appid和小程序页面路径 wx.navigateToMiniProgram({ appId: '目...
    99+
    2023-08-16
    小程序 微信小程序
  • 微信小程序按钮点击跳转页面的示例分析
    这篇文章给大家分享的是有关微信小程序按钮点击跳转页面的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序中,按钮也是<button></butto...
    99+
    2024-04-02
  • 微信小程序兼容方式的示例分析
    这篇文章主要介绍微信小程序兼容方式的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!小程序的功能不断的增加,但是旧版本的微信客户端并不支持新功能,所以在使用这些新能力的时候需要做兼容。文档会在组件,API等页面...
    99+
    2023-06-26
  • 微信小程序和H5页面间相互跳转的示例分析
    这篇文章主要为大家展示了“微信小程序和H5页面间相互跳转的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序和H5页面间相互跳转的示例分析”这篇文...
    99+
    2024-04-02
  • 微信公众号跳转小程序方法
    1 公众号需要关联小程序 2 跳转方法:       wx.navigateToMiniProgram(Object object)  打开另一个小程序 wx.navigateToMiniProgram({ appId: '', //...
    99+
    2023-10-23
    小程序 微信 微信小程序
  • 微信小程序的示例分析
    这篇文章主要介绍微信小程序的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!未来的发展趋势未来的发展趋势是一切触手可及。比如去餐馆吃饭,扫一扫二维码就可以看菜单、点菜、付款;到公交站台,扫一扫二维码就知道有哪些...
    99+
    2023-06-26
  • uniapp小程序路由跳转,使用uni.navigateBack方法,实现跳转传参
    由于小程序跳转限制10层,为了尽可能的减少页面栈,在小程序中会用到uni.navigateBack()方法,使用中难免会遇到页面跳转之间传参的问题。uni.navigateBack和uni.navigateTo、uni.redirect...
    99+
    2023-08-17
    微信小程序 小程序
  • 微信小程序阻止小程序返回的两种方法
    目录方法1:方法2:后语:对于page-container原理的个人理解总结本次项目为uniapp开发,原生小程序也可以参考这两个方法。 方法1: wx.enableAlertBef...
    99+
    2023-05-17
    阻止小程序返回怎么设置 微信小程序阻止返回 禁止小程序跳转
  • 微信小程序 h5页面跳转小程序(超详细讲解)
    h5跳转小程序 实战项目从无到完整的h5跳转小程序经验,跳转方式分为云函数跳转和开放性标签跳转。 开放性标签是针对微信里面浏览器使用的,而云函数跳转在外部以及微信里面都可以使用。 建议需要的同学先全部...
    99+
    2023-09-11
    微信小程序 小程序 微信 前端
  • 微信小程序中MD5方法的示例分析
    这篇文章给大家分享的是有关微信小程序中MD5方法的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序 MD5的方法详解生成的文件可以放在  utils文件...
    99+
    2024-04-02
  • 微信小程序图片地扯转base64的示例分析
    这篇文章给大家分享的是有关微信小程序图片地扯转base64的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。使用方法js文件let $this =&nb...
    99+
    2024-04-02
  • H5页面跳转小程序的三种方式
    文章目录 前言一、web-view标签返回小程序1.小程序启动页面只写web-view标签跳转到授权页面。2.编写auth.html3、把auth.html放到服务器就可以测试访问,打开小程序默认进入启动页面中的webview跳转到...
    99+
    2023-08-16
    小程序 微信小程序 前端 微信 html5
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作