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

所属分类: 网络编程 / JavaScript 阅读数: 239
收藏 0 赞 0 分享

这段时间开发了一个微信小程序,虽然小程序的导航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 页面

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

更多精彩内容其他人还在看

AngularJs IE Compatibility 兼容老版本IE

本文主要介绍AngularJs IE Compatibility 兼容老版本IE的问题及解决办法,有兴趣的小伙伴可以参考下
收藏 0 赞 0 分享

AngularJs Modules详解及示例代码

本文主要介绍AngularJs Modules的相关知识,这里整理了详细的资料及简单示例代码,有兴趣的朋友可以参考下
收藏 0 赞 0 分享

AngularJs Scope详解及示例代码

本文主要介绍AngularJs Scope的知识,这里整理了详细资料及示例代码,有兴趣的小伙伴可以参考下
收藏 0 赞 0 分享

node.js中module.exports与exports用法上的区别

Node.js 引入了模块(Module)概念,一个模块可以通过module.exports 或 exports 将函数、变量等导出,以使其它 JavaScript 脚本通过require() 函数引入并使用。那么node.js中module.exports与exports有什么
收藏 0 赞 0 分享

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

这篇文章主要介绍了基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)

最近做了一个项目,其中有需求要求实现发送短信验证码后倒计时功能,其中有个难点:要求关闭页面也进行倒计时。好吧,下面小编把jquery 发送验证码倒计时的实现代码分享给大家,大家可以参考下
收藏 0 赞 0 分享

js绘制购物车抛物线动画

这篇文章主要为大家详细介绍了js绘制购物车抛物线动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

vue.js入门教程之绑定class和style样式

小编之前介绍了通过vue.js计算属性,不知道大家都学会了吗。那这篇文章中我们将一起学习vue.js实现绑定class和style样式,有需要的朋友们可以参考借鉴。
收藏 0 赞 0 分享

纯JS实现可拖拽表单的简单实例

下面小编就为大家带来一篇纯JS实现可拖拽表单的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js实现StringBuffer的简单实例

下面小编就为大家带来一篇js实现StringBuffer的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多