微信小程序路由跳转的两种方式是什么
发表于:2025-01-21 作者:千家信息网编辑
千家信息网最后更新 2025年01月21日,本篇内容介绍了"微信小程序路由跳转的两种方式是什么"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!路由
千家信息网最后更新 2025年01月21日微信小程序路由跳转的两种方式是什么
本篇内容介绍了"微信小程序路由跳转的两种方式是什么"的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
路由跳转的两种形式
标签形式
跳转到新页面
通过open-type来选择和上面一样的跳转方式
js形式
# wxml文件# js文件tiao1:function(){ wx.reLaunch({ url: '/pages/test/test', }) },
快速总结
# wxml文件# 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
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 需要跳转的 tabBar 页面的路径(需在 app.json 的tabBar字段定义的页面),路径后不能带参数。 | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
{ "tabBar": { "list": [ { "pagePath": "index", "text": "首页" }, { "pagePath": "other", "text": "其他" } ] }}wx.switchTab({ url: '/index'})
1.2 wx.reLaunch(Object object)
基础库 1.1.0 开始支持,低版本需做兼容处理。
关闭所有页面,打开到应用内的某个页面
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2' | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
wx.reLaunch({ url: 'test?id=1'})// test Page({ onLoad (option) { console.log(option.query) } })
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'})
1.4 wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
url | string | 是 | 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用? 分隔,参数键与参数值用= 相连,不同参数用& 分隔;如 'path?key=value&key2=value2' | |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
示例代码
wx.navigateTo({ url: 'test?id=1'})// test.jsPage({ 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
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
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})
"微信小程序路由跳转的两种方式是什么"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!
页面
参数
函数
接口
路径
成功
应用
代码
示例
程序
路由
属性
类型
文件
方式
不同
之间
形式
按钮
方法
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
服务器名称就是ip吗
连云港应用软件开发收费价目表
ui是软件开发吗
智能手环软件开发
数据文件和数据库设计
emc服务器硬盘
机载导航数据库的类型
浪潮服务器查看参数配置
数据库 文字可以吗
乐橙接入海康服务器
上海新北大数据库
北京奥瑞文网络技术有限公司
数据库维护工程师证书
网络安全法法施行时间
如何降低软件开发中的缺陷密度
华为账号显示连接不上服务器
没有服务器可以备案吗
嘉兴数据库应急照明
如何用易语言收集数据库
嘉会医疗软件开发
网络安全法的小报内容
广州应用软件开发如何收费
60g数据库恢复要多久
网吧重启服务器会关机吗
网络安全相关宪法
邵阳计算机网络技术培训机构
运营商的网络安全压力
湖南蓝煋网络技术有限公司
服务器CPU做图搞设计
太原erp软件开发