小程序的页面跳转

小程序中的页面跳转

小程序的导航分为 声明式的导航 编程式的导航

声明式导航

非tabbar页面

<navigator url="/pages/info/info">详情页面</navigator>
<navigator open-type="navigateBack">后退1</navigator>
<navigator open-type="navigateBack" delta="2">后退2</navigator> 

url="/路径" 路径一定是需要在app.js配置的路径
后退导航 ( open-type=“navigateBack” 默认回退一步 回退多步时用 delta=“回退的步数”)

tabbar页面 （ open-type=“switchTab”）

<navigator url="/pages/logs/logs" open-type="switchTab">分类页面</navigator>

编程式导航

wxml:
<view bindtap="backHandle">编程式导航的后退</view>
<view bindtap="skipMine">跳转我的页面</view>
js:
// 编程式导航后退
  backHandle(){
    wx.navigateBack({
      delta: 1
    })
  },
    // 跳转到我的页面 /tabbar页面
  skipMine(){
  
  //注意：
    // wx.navigateTo不能跳转到tabbar页面
    // wx.navigateTo({
    //   url: '/pages/mine/mine',
    // })
    
    wx.switchTab({
      url: '/pages/mine/mine',
      success:function(){
          console.log('tabbar页面跳转成功')
      }
    })
  },

页面跳转传参

小程序中传参和vue不一样 ；不使用params传参，只使用query传参

声明式导航传参     路径后加上 ? name=jkp 多个参数使用 & 链接

编程式导航
 wx.navigateTo({
   url: '/路径?name=jkp&id=1'
 })
  接收参数 接收参数的页面 onLoad:function(options)  options.name 

<navigator url="/pages/info/info?name=jkp&id=1">详情</navigator>

常用的页面导航

wx.navigateTo（）

wx.navigateTo({
  url: '要跳转的页面链接' //注意链接不能带扩展名 该方法不会关闭当前页面 
  //只是会把当前页面隐藏 但是不能跳转tabbar页面
})

wx.redirectTo()

wx.redirectTo()({
  url: '要跳转的页面链接' 注意链接不能带扩展名 该方法会关闭当前页面 打开一个新页面 但是不能跳转tabbar页面
})

wx.reLaunch（）

wx.relaunch({
  url: '要跳转的页面链接' //注意链接不能带扩展名 该方法会关闭所有页面 
  //打开一个新页面 可以跳转tabbar页面
})

wx.switchTab（）

wx.switchTab({
  url: '要跳转的页面链接' //注意链接不能带扩展名 该方法会关闭当前页面 
  //可以跳转tabbar页面
})
})