uni-app
是一個使用 Vue.js 開發所有前端應用的強大框架,特點是我們開發者只需要編寫一套代碼,就可以發布到iOS、Android、Web(響應式)、以及各種小程序(微信/支付寶/百度/頭條/QQ/快手/釘釘/淘寶)、快應用等多個平台。是當下十分流行的開發框架。
那么,我們開始使用uniapp時,是需要先了解一定的基礎知識后才能快速穩定的做后續的代碼編寫工作。
此篇文字僅為 uniapp各個路由方法結合個人理解后的匯總筆記。
快速閱讀:
navigateTo
,redirectTo
只能打開非 tabBar 頁面。switchTab
只能打開 tabBar 頁面。reLaunch
可以打開任意頁面。- 頁面底部的 tabBar 由頁面決定,即只要是定義為 tabBar 的頁面,底部都有 tabBar。
- 調用頁面路由帶的參數可以在目標頁面的
onLoad
中獲取。
這是最常用的頁面路由跳轉方法,特點是:保留當前頁面,跳轉到應用內的某個頁面。 可以使用uni.navigateBack
可以返回到原頁面,此方法無法跳轉到tabbar頁面。常做兄弟頁面或父子頁面的路由跳轉。
常用參數包括:
1)url -> 需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔,參數鍵與參數值用=相連,不同參數用&分隔;如 'path?key=value&key2=value2',path為下一個頁面的路徑,下一個頁面的onLoad函數可得到傳遞的參數;
2) success -> 接口調用成功的回調函數;
3) fail -> 接口調用失敗的回調函數
示例:
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
具體參數查看官方文檔 : https://uniapp.dcloud.io/api/router?id=navigateto
此路由跳轉方法與navigateto用法一致,但是它的特點是在跳轉后會關閉當前的頁面,應用場景一般為做頁面的重定向操作。
常用參數包括:
1)url -> 需要跳轉的應用內非 tabBar 的頁面的路徑,路徑后可以帶參數。參數與路徑之間使用?分隔,參數鍵與參數值用=相連,不同參數用&分隔;如 'path?key=value&key2=value2';
2) success -> 接口調用成功的回調函數;
3) fail -> 接口調用失敗的回調函數
示例:
uni.redirectTo({
url: 'test?id=1'
});
具體參數查看官方文檔 :https://uniapp.dcloud.io/api/router?id=redirectto
此路由跳轉方法可以看作是redirectto的擴展升級,它的特點除了關閉跳轉前頁面外,還會關閉所有打開的頁面,僅保留路由跳轉對象頁面,並且可以跳轉到tabbar頁面。
常用參數包括:
1)url -> 需要跳轉的應用內頁面路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔,參數鍵與參數值用=相連,不同參數用&分隔;如 'path?key=value&key2=value2',如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數
2) success -> 接口調用成功的回調函數;
3) fail -> 接口調用失敗的回調函數
示例:
uni.reLaunch({
url: 'test?id=1'
});
具體參數查看官方文檔 :https://uniapp.dcloud.io/api/router?id=relaunch
此路由跳轉方法特點:跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面。
常用參數包括:
1)url -> 需要跳轉的 tabBar 頁面的路徑(需在 pages.json 的 tabBar 字段定義的頁面),路徑后不能帶參數
2) success -> 接口調用成功的回調函數;
3) fail -> 接口調用失敗的回調函數
示例:
uni.switchTab({
url: '/pages/index/index'
});
具體參數查看官方文檔 :https://uniapp.dcloud.io/api/router?id=switchtab
路由回退,關閉當前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages()
獲取當前的頁面棧,決定需要返回幾層。
常用參數包括:
1)delta -> 返回的頁面數,如果 delta 大於現有頁面數,則返回到首頁。
示例:
uni.navigateTo({
url: 'C?id=1'
});
uni.navigateBack({
delta: 2
});
具體參數查看官方文檔 :https://uniapp.dcloud.io/api/router?id=navigateback
頁面體驗優化方式,預加載頁面,是一種性能優化技術。被預載的頁面,在打開時速度更快。
常用參數包括:
1)url -> 預加載頁面url
2) complete-> 預加載成功完成回調;
3) fail-> 預加載失敗回調
示例:
uni.preloadPage({
url: "/pages/test/test"
});
具體參數查看官方文檔 :https://uniapp.dcloud.io/api/preload-page?id=preloadpage
總結:路由使用存在一定的平台差異性,具體可以查閱官方文檔查看使用過程中的注意事項,只有熟讀開發手冊之后,才能在開發過程中如魚得水,如虎添翼、有如神助的實現穩固開發。
官方文檔:https://uniapp.dcloud.io/api/README