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


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 Eval 函数使用
Mar 23 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP如何实现跨域
2016/05/30 PHP
js 实现复制到粘贴板的功能代码
2010/05/13 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
如何快速上手Vuex
2017/02/14 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python3中exp()函数用法分析
2019/02/19 Python
python自动识别文本编码格式代码
2019/12/26 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
小学运动会报道稿
2015/07/22 职场文书
公司酒会致辞
2015/07/30 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
2019年教师入党申请书
2019/06/27 职场文书
编写python程序的90条建议
2021/04/14 Python
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python