微信小程序 --- 頁面跳轉

第一種：wx.navigateTo({}); 跳轉：

注意：這種跳轉回觸發當前頁面的 onHide 方法，將當前頁面隱藏，然后顯示跳轉頁面。所以可以返回，返回的時候觸發 onShow方法進行顯示：

（項目的底部導航使用的就是 wx.navigateTo 方法，將頁面進行隱藏）

<view bindtap="clicktap">
    文章列表
</view>

page.js

//獲取應用實例
const app = getApp()
Page({
  data: {  
  }, 
  clicktap:function(){
      wx.navigateTo({
          url:'../details/details'
      })
  }
})

參數傳遞：

clicktap:function(){
    wx.navigateTo({
        url:'../details/details?id=1'
    })
}

多個參數使用 "&"  ：

wx.navigateTo({
    url:'../details/details?id=2&title=你好'
})

跳轉頁面接受參數：使用 onLoad 方法里面的 option ：

onLoad:function(options){
    console.log(options);
    console.log(options.id);
}

效果：

這個id 還可以渲染到頁面上。

使用標簽進行跳轉：

<navigateTo url="../details/details?id=2">
    <view bindtap="clicktap">
        文章列表
    </view>
</navigateTo>

同樣使用跳轉頁的 onLoad 方法里面 options 來接受。

在標簽里使用 redirectTo：

<navigateTo url="../details/details?id=2" redirect>
    <view bindtap="clicktap">
        文章列表
    </view>
</navigateTo>

 

第二種：wx.redirectTo 跳轉：

注意：這種跳轉，不會觸發當前頁面的 onHide 方法，也就是把當前頁面直接給卸載掉了，然后替換為新頁面。所以不存在返回這種情況。

 

第三種：wx.swithTab跳轉：

在微信的頁面跳轉過程中，如果需要跳轉到tab的頁面，使用 wx.navigateTo 或者 wx.redirectTo 都是無法完成跳轉的，此時就必須使用 wx.switchTab方法來進行跳轉。

文檔說明：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui-navigate.html#wxrelaunchobject

代碼：

wx.switchTab({
  url: '../index/index'
})