Android开发之WECHAT微信小程序路由跳转的两种形式


Posted in Java/Android onApril 12, 2022

官方文档

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

属性 类型 默认值 必填 说明
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.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

属性 类型 默认值 必填 说明
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
})

以上就是Android开发微信小程序路由跳转方式的详细内容!

Java/Android 相关文章推荐
java中重写父类方法加不加@Override详解
Jun 21 Java/Android
springboot拦截器无法注入redisTemplate的解决方法
Jun 27 Java/Android
Java实现二维数组和稀疏数组之间的转换
Jun 27 Java/Android
Jackson 反序列化时实现大小写不敏感设置
Jun 29 Java/Android
mybatis3中@SelectProvider传递参数方式
Aug 04 Java/Android
MyBatis-Plus 批量插入数据的操作方法
Sep 25 Java/Android
springboot 多数据源配置不生效遇到的坑及解决
Nov 17 Java/Android
聊聊SpringBoot自动装配的魔力
Nov 17 Java/Android
Spring Boot 实现 WebSocket
Apr 30 Java/Android
MyBatis核心源码深度剖析SQL语句执行过程
May 20 Java/Android
Java实现扫雷游戏详细代码讲解
May 25 Java/Android
Android Canvas绘制文字横纵向对齐
Jun 05 Java/Android
JavaWeb Servlet开发注册页面实例
Java中的继承、多态以及封装
JAVA长虹键法之建造者Builder模式实现
Apr 10 #Java/Android
SpringCloud项目如何解决log4j2漏洞
Apr 10 #Java/Android
零基础学java之循环语句的使用
Apr 10 #Java/Android
零基础学java之带参数以及返回值的方法
Apr 10 #Java/Android
零基础学java之带返回值的方法的定义和调用
Apr 10 #Java/Android
You might like
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
layer更改皮肤的实现方法
2019/09/11 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
Python多线程和队列操作实例
2015/06/21 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
Python通过socketserver处理多个链接
2020/03/18 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
python3 kubernetes api的使用示例
2021/01/12 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
巧克力蛋糕店创业计划书
2014/01/14 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
学校运动会霸气口号
2014/06/07 职场文书
扬尘污染防治方案
2014/06/15 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
研究生个人学年总结
2015/02/14 职场文书