uni-app 路由

2020-04-02 14:57 更新

路由

uni-app頁面路由為框架統(tǒng)一管理,開發(fā)者需要在pages.json里配置每個路由頁面的路徑和頁面樣式。類似的小程序在app.json中配置頁面路由相同。所以uni-app的路由用法與Vue Router不同,如仍希望采用Vue Router方式管理路由,可在插件市場搜索Vue-Router。

路由路由

uni-app有兩種頁面路由重定向方式:使用導航器組件擴展,調用API重定向。

頁面棧

框架以棧的形式管理當前所有頁面,當發(fā)生路由切換的時候,頁面棧的表現(xiàn)如下:

路由方式頁面棧表現(xiàn)觸發(fā)時機
初始化新頁面入棧uni-app:的第一個頁面
:新頁面新頁面入棧調用API   uni.navigateTo  ,使用組件   <navigator open-type =“ navigate” />
頁面重啟當前頁面出棧,新頁面入棧調用API   uni.redirectTo  ,使用組件  <navigator open-type =“ redirectTo” />
頁面返回頁面不斷出棧,直到目標返回頁調用API   uni.navigateBack   ,使用組件  <navigator open-type =“ navigateBack” />  ,用戶按左上角返回按鈕,安卓用戶點擊物理后退鍵
標簽切換頁面全部出棧,只留下新的標簽頁面調用API   uni.switchTab   ,使用組件  <navigator open-type =“ switchTab” />   ,用戶切換Tab
重加載頁面全部出棧,只留下新的頁面調用API   uni.reLaunch   ,使用組件   <navigator open-type =“ reLaunch” />

運行環(huán)境判斷

開發(fā)環(huán)境和生產環(huán)境

uni-app可通過process.env.NODE_ENV判斷當前環(huán)境是開發(fā)環(huán)境還是生產環(huán)境。一般用于連接測試服務器或生產服務器的動態(tài)切換。

  • 在HBuilderX中,點擊“運行”編譯出來的代碼是開發(fā)環(huán)境,點擊“發(fā)行”編譯出來的代碼是生產環(huán)境
  • cli模式下,是通行的編譯環(huán)境處理方式。
if(process.env.NODE_ENV === 'development'){
    console.log('開發(fā)環(huán)境')
}else{
    console.log('生產環(huán)境')
}

如果你需要自定義更多環(huán)境,某種測試環(huán)境:

  • 假設只需要對單一平臺配置,可以的package.json中配置,在HBuilderX的運行和發(fā)行菜單里會多一個出來。https://uniapp.dcloud.io/collocation/package
  • 如果是針對所有平臺配置,可以在VUE-config.js中配置。https://uniapp.dcloud.io/collocation/vue-config

快捷代碼塊

HBuilderX中敲入代碼塊uEnvDev,uEnvProd可以快速生成對應development,production的運行環(huán)境判定代碼。

// uEnvDev
if (process.env.NODE_ENV === 'development') {
    // TODO
}
// uEnvProd
if (process.env.NODE_ENV === 'production') {
    // TODO
}

判斷平臺

平臺判斷有2種場景,一種是在編譯期判斷,一種是在運行期判斷。

  • 編譯期判斷編譯期判斷,即條件編譯,不同平臺在編譯出包后已經(jīng)是不同的代碼。詳見:條件編譯
// #ifdef H5
    alert("只有h5平臺才有alert方法")
// #endif

如上代碼只會編譯到H5的發(fā)行包里,其他平臺的包不會包含如上代碼。

  • 運行期診斷運行期判斷是指代碼已經(jīng)打入包中,仍然需要在運行期判斷平臺,此時可使用uni.getSystemInfoSync().platform判斷客戶端環(huán)境是Android,iOS還是小程序開發(fā)工具(在百度小程序開發(fā)工具,微信小程序開發(fā)工具,支付寶小程序開發(fā)工具中使用uni.getSystemInfoSync().platform返回值重置devtools)。
switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('運行Android上')
       break;
    case 'ios':
       console.log('運行iOS上')
       break;
    default:
       console.log('運行在開發(fā)者工具上')
       break;
}

如有必要,也可以在條件編譯里自己定義的一個變量,賦值。在后續(xù)運行代碼中動態(tài)判斷環(huán)境。



以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號