微信小程序开发之路由切换页面重定向问题


Posted in Javascript onSeptember 18, 2018

这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方。

1、页面切换传参,参数读取 

1.1  wx.navigateTo(Object)

功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到当前页面。

wx.navigateTo({  //当前页面对应的JS文件内 控制模板
 url: 'test?id=1'  //需要切换到的页面路劲,此处为相对路劲,id为传递的参数
})
//test.js   //test页面对应的JS文件,名字必须相同
Page({ 
 onLoad: function(option){  //通过路由传递过来的参数,只能在onLoad方法内收到,option就是路由参数的一个组合对象
 console.log(option.id)
 }
})

1.2   wx.navigateBack(object)

功能:关闭当前页面,与 wx.navigateTo({ })功能相对。返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

 

1.3  wx.redirectTo(object)

功能:关闭当前页面,跳转到应用内的某个页面【这里的跳转最好写绝对路劲,当然如果只是从当前页面往一个具体页面跳转(次数不多),相对路劲也可以。但如果是 wx.request(object) 请求返回状态进行页面跳转,那就最好写绝对路劲】,但是不允许跳转到 tabbar 页面。

1.4  wx.switchTab(Object object)

功能:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,与wx.redirectTo(object)方法功能互补。

 

1.5  wx.reLaunch(Object object)

功能:关闭所有页面,打开到应用内的某个页面【这种情况最好用绝对定位,因为是关闭所有页面,已经不需要知道当前所处页面了,直接重定向到某个具体页面。这种一般都是重定向到登录或者初始页面】

wx.reLaunch({  //token失效,界面重定向到登录页,绝对路劲
 url: "/pages/login/login",
});

2、相对路径和绝对路径

2.1、绝对路径;

以 “/” 开头代表根目录,

/pages/login/login

2.2、相对路径

以 “../” 开头,从当前页面一级一级往上级目录倒退

../../module/customer/main/main

或者:

以 “./” 开头,直接在当前目录

./registered

补充:下面看下微信小程序的路由跳转方法

路由跳转的方法

1.打开新页面

   1.wx.navigateTo   或使用组件     <navigator open-type="navigateTo"/>

      保留当前页面,跳转到应用内的某个页面,使用   wx.navigateBack  可以返回到原页面。

       属性用法:

          url:         类型是String     跳转非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
          success:     类型Function     接口调用成功的回调函数
          fail:        类型Function     接口调用失败的回调函数
          complete:    类型Function     接口调用结束的回调函数(调用成功、失败都会执行)

例 :

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

     目前页面路径最多只能十层。

2.页面重定向

   1.wx.redirectTo    或使用组件     <navigator open-type="redirectTo"/>

       属性用法:

          url:         类型是String     跳转非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
          success:     类型Function     接口调用成功的回调函数
          fail:        类型Function     接口调用失败的回调函数
          complete:    类型Function     接口调用结束的回调函数(调用成功、失败都会执行)

例 :

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

3.页面返回

   1. wx.navigateBack    或使用组件    <navigator open-type="navigateBack">

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

       属性用法:

          url:         类型是String     跳转非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
          success:     类型Function     接口调用成功的回调函数
          fail:        类型Function     接口调用失败的回调函数
          complete:    类型Function     接口调用结束的回调函数(调用成功、失败都会执行)

例 :

// 此处是A页面
 wx.navigateTo({
   url: 'B?id=1'
  })
  // 此处是B页面
 wx.navigateTo({
   url: 'C?id=1'
 })
 // 在C页面内 navigateBack,将返回A页面
 wx.navigateBack({
   delta: 2
 })
 })

4.Tab 切换

   1.wx.switchTab 或使用组件     <navigator open-type="switchTab "/>

       属性用法:

          url:         类型是String     需要跳转的 tabBar 页面的路径(需在 app.json 的 [tabBar]字段定义的页面),路径后不能带参数
          success:     类型Function     接口调用成功的回调函数
          fail:        类型Function     接口调用失败的回调函数
          complete:    类型Function     接口调用结束的回调函数(调用成功、失败都会执行)
例 :

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

5.Tab 切换

   1.wx.reLaunch   或使用组件    <navigator open-type="reLaunch"/>

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

       属性用法:

          url:        需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',如果跳转的页面路径是 tabBar 页面则不能带参数
          success:     类型Function     接口调用成功的回调函数
          fail:        类型Function     接口调用失败的回调函数
          complete:    类型Function     接口调用结束的回调函数(调用成功、失败都会执行)

  例 :

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

tip: wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

总结

以上所述是小编给大家介绍的微信小程序开发之路由切换页面重定向问题 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
在小程序中使用canvas的方法示例
Sep 17 #Javascript
webpack4打包vue前端多页面项目
Sep 17 #Javascript
node中的密码安全(加密)
Sep 17 #Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 #Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 #Javascript
vue的过滤器filter实例详解
Sep 17 #Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 #Javascript
You might like
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python学生信息管理系统修改版
2018/03/13 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
keras中epoch,batch,loss,val_loss用法说明
2020/07/02 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
餐饮加盟计划书
2014/01/10 职场文书
2014年城管工作总结
2014/11/20 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
大学生受助感言
2015/08/01 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL