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


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 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
three.js中文文档学习之创建场景
Nov 20 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 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查看当前Session的ID实例
2015/03/16 PHP
基于jQuery的表格操作插件
2010/04/22 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
2015/05/13 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
Vue实现百度下拉提示搜索功能
2017/06/21 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
vue实现购物车的监听
2020/04/20 Javascript
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
年终自我鉴定
2013/10/09 职场文书
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
大学校庆策划书
2014/01/31 职场文书
学期评语大全
2014/04/30 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
企业法人代表任命书
2014/06/06 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
学校个人对照检查材料
2014/08/26 职场文书
食品卫生管理制度
2015/08/06 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
离婚协议书格式范本
2016/03/18 职场文书
商业计划书格式、范文
2019/03/21 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers