1. 程式人生 > >微信小程序開發--路由切換,頁面重定向

微信小程序開發--路由切換,頁面重定向

code gate 詳細 rec 遇到 request tabbar 絕對路徑 api

這段時間開發了一個微信小程序,雖然小程序的導航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

微信小程序開發--路由切換,頁面重定向