這段時間開發了一個微信小程式,雖然小程式的導航API 官方文檔寫得很詳細,但是在具體開發過程中還是會遇到很多不明白,或者一時轉不過彎的地方。 1、頁面切換傳參,參數讀取 1.1 wx.navigateTo(Object) 功能:保留當前頁面,跳轉到應用內的某個頁面,但是不能跳到 tabbar 頁面。 ...
這段時間開發了一個微信小程式,雖然小程式的導航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)
功能:跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面,與wx.redirectTo(object)方法功能互補。
1.5 wx.reLaunch(object)
功能:關閉所有頁面,打開到應用內的某個頁面【這種情況最好用絕對定位,因為是關閉所有頁面,已經不需要知道當前所處頁面了,直接重定向到某個具體頁面。這種一般都是重定向到登錄或者初始頁面】
wx.reLaunch({ //token失效,界面重定向到登錄頁,絕對路勁 url: "/pages/login/login", });
2、相對路徑和絕對路徑
2.1、絕對路徑;
以 “/” 開頭代表根目錄,表示從根目錄下來的直接路勁,不以當前頁面所處位置改變而改變。適用於重定向到具體頁面,因此比較適用於 wx.redirectTo(object) 和 wx.reLaunch(object)
/pages/login/login
2.2、相對路徑
以 “../” 開頭,從當前頁面一級一級往上級目錄倒退,然後再從共同目錄一級級向下找到具體頁面。這種一般 wx.navigateTo(object) 用的多,因為它要保存當前頁面,便於返回
../../module/customer/main/main
或者:
以 “./” 開頭,直接在當前目錄
./registered 或者 registered
app.json文件內配置的路徑都是以pages目錄為根目錄的相對路勁。
因此在進行頁面跳轉的時候,都需要寫成相對路勁的格式,不然就會報錯:路勁頁面不存在。如果不想這麼一級級往上倒退,尤其是 wx.redirectTo(object) 和 wx.reLaunch(object),那就直接寫成絕對路勁格式。在 "pages" 前面加上 "/",如上面 wx.reLaunch(object) 示例。