美文网首页我爱编程
微信小程序的路由跳转方法

微信小程序的路由跳转方法

作者: 郭的妻 | 来源:发表于2018-06-03 23:54 被阅读1次

    路由跳转的方法

    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 页面

    相关文章

      网友评论

        本文标题:微信小程序的路由跳转方法

        本文链接:https://www.haomeiwen.com/subject/psissftx.html