10 微信小程序路由跳转
一、四种跳转方式
除了tabBar这种底部跳转的方法,我们还有路由跳转,以下四种方式: 1. wx.switchTab() :跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 url: tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数 2.wx.reLaunch() :关闭所有页面,打开到应用内的任意页面,可带参 url: 'path?key=value&key2=value2' 3.wx.redirectTo() :关闭当前页面,跳转到应用内非 tabBar 页面路径,可带参(会执行onUnload生命周期方法) url : 'path?key=value&key2=value2' 4.wx.navigateTo():保留当前页面,跳转到应用内非 tabBar 页面路径(会执行onHide生命周期方法,生成顶部返回按钮,并且页面堆栈+1) url: 'path?key=value&key2=value2'
路由参数:
四种跳转使用:
1.1wx.switchTab(Object object)
示例代码:
1) 先做两个tabBar页面
"tabBar": {
"backgroundColor":"#123",
"color": "#FFFFFF",
"list": [{
"pagePath": "pages/test/test",
"text": "text",
"iconPath": "images/icon1.png",
"selectedIconPath": "images/icon1-active.png"
},
{
"pagePath": "pages/test2/test2",
"text": "text2",
"iconPath": "images/icon2.png",
"selectedIconPath": "images/icon2-active.png"
}]
},
主文件 app.js
2) test.js 往index页面跳转 /表示根目录
wx.switchTab({
url: '/index'
})
1.2wx.reLaunch(Object object)
wx.redirectTo(Object object) / wx.navigateTo(Object object) 和这个代码一样,注意跳转页面的不同就好了
示例代码
test1.js
wx.reLaunch({
url: 'test2?id=1'
})
test2.js 页面加载会触发
Page({
onLoad(option) {
console.log(option.query)
}
})
1.5wx.redirectTo与wx.navigateTo的区别
1.利用wx.navigateTo跳转到下一个页面的时候(这时候会执行onHide方法),下一个页面会有顶部返回按钮
2.如果不想有返回按钮,可以用wx.redirectTo进行页面跳转(会执行onUnload生命周期,关闭当前页面跳转,没有页面可以返回)
3.调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈(保留页面去跳转,页面计数会增加,返回页面时用),而 redirectTo 方法则不会(和2相似)
1.6 wx.navigateBack(Object object)
使用 wx.navigateBack(),关闭当前页面,返回上一页面或多级页面,最多十层。
可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
参数:
使用:
示例代码:
// 此处是A页面js,跳到B
wx.navigateTo({
url: 'B?id=1'
})
// 此处是B页面js,跳到C
wx.navigateTo({
url: 'C?id=1'
})
// 在C页面js内 navigateBack,将返回2级到A页面
wx.navigateBack({
delta: 2
})
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会
二、在前端跳转方法 见官方文档
10 微信小程序路由跳转的更多相关文章
- 微信小程序路由跳转
微信小程序路由跳转 1.wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面, 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 参数 O ...
- 微信小程序 路由跳转 异步请求 存储数据,微信登录接口
1小程序路由跳转 wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 tabBar l ...
- 微信小程序路由跳转(navigateTo,redirectTo ,switchTab ,reLaunch )
navigateTo, redirectTo 只能打开非 tabBar 页面. switchTab 只能打开 tabBar 页面. reLaunch 可以打开任意页面. 通过redirect重定向的页 ...
- 微信小程序-页面跳转与参数传递
QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...
- 用python一步一步教你玩微信小程序【跳一跳】
12月28日,微信上线了小游戏「跳一跳」,瞬间成了全民游戏,如何牢牢占据排行榜的第一位呢?用Python帮助你,Python真的无所不能. 作为技术出身的我们,是不是想用技术改变排名呢? 注意:本文适 ...
- 微信小程序页面跳转方法总结
微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...
- 微信小程序如何跳转到另一个小程序
微信小程序如何跳转到另一个小程序,要注意:在app.json文件里也要配置 navigateToMiniProgramAppIdList,如下图: "navigateToMiniProgra ...
- 利用python实现微信小程序游戏跳一跳详细教程
利用python实现微信小程序游戏跳一跳详细教程 1 先安装python 然后再安装pip <a href="http://newmiracle.cn/wp-content/uploa ...
- 一个C#程序员学习微信小程序路由的笔记
路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...
随机推荐
- Python 0(安装及初步使用+学习资源推荐)
不足之处,还请见谅,请指出不足.本人发布过的文章,会不断更改,力求减少错误信息. Python安装请借鉴网址https://www.runoob.com/python/python-install.h ...
- python3(二十二) oop
""" 面向对象编程 """ __author__ = 'shaozhiqi' # 面向对象的程序设计把计算机程序视为一组对象的集合,而每个 ...
- kafka的基本体系结构
使用场景 大数据:数据量和速率激增,数据类型越来越复杂 应用开发:消息引擎,应用解耦,分布式存储,流处理 Kafka的体系结构 topic : 主题(消息的逻辑分类) 客户端: 细分为生产者(朝主题发 ...
- go 中的WaitGroup
wait_group sync.WaitGroup 类型是并发安全的,也是开箱就能用的. 该类型有三个指针方法,即:Add,Done和Wait. sync.WaitGroup是一个结构体类型.其中一个 ...
- Win8.1/Win10在某些程序输入中文变成问号的解决方法
之前我是使用Win8.1,在某些软件上输入中文,却显示问号,换输入法也没用,当时也没用太在意,后来升级到Win10还是一样.同样的软件在其它Win8.1/Win10电脑却可以正常显示中文. 解决方法如 ...
- 计算机视觉中的对象检测,Python用几段代码就能实现
目前计算机视觉(CV)与自然语言处理(NLP)及语音识别并列为人工智能三大热点方向,而计算机视觉中的对象检测(objectdetection)应用非常广泛,比如自动驾驶.视频监控.工业质检.医疗诊断等 ...
- 猜数字和飞机大战(Python零基础入门)
前言 最近有很多零基础初学者问我,有没有适合零基础学习案例,毕竟零基础入门的知识点是非常的枯燥乏味的,如果没有实现效果展示出来,感觉学习起来特别的累,今天就给大家介绍两个零基础入门的基础案例:猜数字游 ...
- 编写高质量Python程序(四)库
本系列文章为<编写高质量代码--改善Python程序的91个建议>的精华汇总. 按需选择 sort() 或者 sorted() Python 中常用的排序函数有 sort() 和 sort ...
- Cobalt Strike系列教程第六章:安装扩展
Cobalt Strike系列教程分享如约而至,新关注的小伙伴可以先回顾一下前面的内容: Cobalt Strike系列教程第一章:简介与安装 Cobalt Strike系列教程第二章:Beacon详 ...
- mybatis 批量删除
mapper.xml: <update id="delete" parameterType="int"> delete from user_logi ...