一、四种跳转方式

API路由详解

除了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 方法则不会

二、在前端跳转方法 见官方文档

navigator 官方API


10 微信小程序路由跳转的更多相关文章

  1. 微信小程序路由跳转

    微信小程序路由跳转 1.wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面, 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 参数 O ...

  2. 微信小程序 路由跳转 异步请求 存储数据,微信登录接口

    1小程序路由跳转 wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 tabBar l ...

  3. 微信小程序路由跳转(navigateTo,redirectTo ,switchTab ,reLaunch )

    navigateTo, redirectTo 只能打开非 tabBar 页面. switchTab 只能打开 tabBar 页面. reLaunch 可以打开任意页面. 通过redirect重定向的页 ...

  4. 微信小程序-页面跳转与参数传递

    QQ讨论群:785071190 微信小程序页面跳转方式有很多种,可以像HTML中a标签一样添加标签进行跳转,也可以通过js中方法进行跳转. navigator标签跳转 <view class=& ...

  5. 用python一步一步教你玩微信小程序【跳一跳】

    12月28日,微信上线了小游戏「跳一跳」,瞬间成了全民游戏,如何牢牢占据排行榜的第一位呢?用Python帮助你,Python真的无所不能. 作为技术出身的我们,是不是想用技术改变排名呢? 注意:本文适 ...

  6. 微信小程序页面跳转方法总结

    微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.// 注 ...

  7. 微信小程序如何跳转到另一个小程序

    微信小程序如何跳转到另一个小程序,要注意:在app.json文件里也要配置 navigateToMiniProgramAppIdList,如下图: "navigateToMiniProgra ...

  8. 利用python实现微信小程序游戏跳一跳详细教程

    利用python实现微信小程序游戏跳一跳详细教程 1 先安装python 然后再安装pip <a href="http://newmiracle.cn/wp-content/uploa ...

  9. 一个C#程序员学习微信小程序路由的笔记

    路由大家应该都知道,在微信小程序也是有的,毕竟它是单页面应用程序.在WeChat中有五种跳转方式,分别是wx.switchTab.wx.reLaunch.wx.redirectTo.wx.naviga ...

随机推荐

  1. Python 0(安装及初步使用+学习资源推荐)

    不足之处,还请见谅,请指出不足.本人发布过的文章,会不断更改,力求减少错误信息. Python安装请借鉴网址https://www.runoob.com/python/python-install.h ...

  2. python3(二十二) oop

    """ 面向对象编程 """ __author__ = 'shaozhiqi' # 面向对象的程序设计把计算机程序视为一组对象的集合,而每个 ...

  3. kafka的基本体系结构

    使用场景 大数据:数据量和速率激增,数据类型越来越复杂 应用开发:消息引擎,应用解耦,分布式存储,流处理 Kafka的体系结构 topic : 主题(消息的逻辑分类) 客户端: 细分为生产者(朝主题发 ...

  4. go 中的WaitGroup

    wait_group sync.WaitGroup 类型是并发安全的,也是开箱就能用的. 该类型有三个指针方法,即:Add,Done和Wait. sync.WaitGroup是一个结构体类型.其中一个 ...

  5. Win8.1/Win10在某些程序输入中文变成问号的解决方法

    之前我是使用Win8.1,在某些软件上输入中文,却显示问号,换输入法也没用,当时也没用太在意,后来升级到Win10还是一样.同样的软件在其它Win8.1/Win10电脑却可以正常显示中文. 解决方法如 ...

  6. 计算机视觉中的对象检测,Python用几段代码就能实现

    目前计算机视觉(CV)与自然语言处理(NLP)及语音识别并列为人工智能三大热点方向,而计算机视觉中的对象检测(objectdetection)应用非常广泛,比如自动驾驶.视频监控.工业质检.医疗诊断等 ...

  7. 猜数字和飞机大战(Python零基础入门)

    前言 最近有很多零基础初学者问我,有没有适合零基础学习案例,毕竟零基础入门的知识点是非常的枯燥乏味的,如果没有实现效果展示出来,感觉学习起来特别的累,今天就给大家介绍两个零基础入门的基础案例:猜数字游 ...

  8. 编写高质量Python程序(四)库

    本系列文章为<编写高质量代码--改善Python程序的91个建议>的精华汇总. 按需选择 sort() 或者 sorted() Python 中常用的排序函数有 sort() 和 sort ...

  9. Cobalt Strike系列教程第六章:安装扩展

    Cobalt Strike系列教程分享如约而至,新关注的小伙伴可以先回顾一下前面的内容: Cobalt Strike系列教程第一章:简介与安装 Cobalt Strike系列教程第二章:Beacon详 ...

  10. mybatis 批量删除

    mapper.xml: <update id="delete" parameterType="int"> delete from user_logi ...