uni-app頁面路由為框架統(tǒng)一管理,開發(fā)者需要在pages.json里配置每個(gè)路由頁面的路徑和頁面樣式。類似的小程序在app.json中配置頁面路由相同。所以uni-app的路由用法與Vue Router不同,如仍希望采用Vue Router方式管理路由,可在插件市場搜索Vue-Router。
uni-app有兩種頁面路由重定向方式:使用導(dǎo)航器組件擴(kuò)展,調(diào)用API重定向。
框架以棧的形式管理當(dāng)前所有頁面,當(dāng)發(fā)生路由切換的時(shí)候,頁面棧的表現(xiàn)如下:
路由方式 | 頁面棧表現(xiàn) | 觸發(fā)時(shí)機(jī) |
---|---|---|
初始化 | 新頁面入棧 | uni-app:的第一個(gè)頁面 |
:新頁面 | 新頁面入棧 | 調(diào)用API uni.navigateTo ,使用組件 <navigator open-type =“ navigate” /> |
頁面重啟 | 當(dāng)前頁面出棧,新頁面入棧 | 調(diào)用API uni.redirectTo ,使用組件 <navigator open-type =“ redirectTo” /> |
頁面返回 | 頁面不斷出棧,直到目標(biāo)返回頁 | 調(diào)用API uni.navigateBack ,使用組件 <navigator open-type =“ navigateBack” /> ,用戶按左上角返回按鈕,安卓用戶點(diǎn)擊物理后退鍵 |
標(biāo)簽切換 | 頁面全部出棧,只留下新的標(biāo)簽頁面 | 調(diào)用API uni.switchTab ,使用組件 <navigator open-type =“ switchTab” /> ,用戶切換Tab |
重加載 | 頁面全部出棧,只留下新的頁面 | 調(diào)用API uni.reLaunch ,使用組件 <navigator open-type =“ reLaunch” /> |
uni-app可通過process.env.NODE_ENV判斷當(dāng)前環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境。一般用于連接測試服務(wù)器或生產(chǎn)服務(wù)器的動(dòng)態(tài)切換。
if(process.env.NODE_ENV === 'development'){
console.log('開發(fā)環(huán)境')
}else{
console.log('生產(chǎn)環(huán)境')
}
如果你需要自定義更多環(huán)境,某種測試環(huán)境:
快捷代碼塊
HBuilderX中敲入代碼塊uEnvDev,uEnvProd可以快速生成對應(yīng)development,production的運(yùn)行環(huán)境判定代碼。
// uEnvDev
if (process.env.NODE_ENV === 'development') {
// TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
// TODO
}
平臺判斷有2種場景,一種是在編譯期判斷,一種是在運(yùn)行期判斷。
// #ifdef H5
alert("只有h5平臺才有alert方法")
// #endif
如上代碼只會(huì)編譯到H5的發(fā)行包里,其他平臺的包不會(huì)包含如上代碼。
switch(uni.getSystemInfoSync().platform){
case 'android':
console.log('運(yùn)行Android上')
break;
case 'ios':
console.log('運(yùn)行iOS上')
break;
default:
console.log('運(yùn)行在開發(fā)者工具上')
break;
}
如有必要,也可以在條件編譯里自己定義的一個(gè)變量,賦值。在后續(xù)運(yùn)行代碼中動(dòng)態(tài)判斷環(huán)境。
更多建議: