uni-app (3) : 繼續

繼續在框架簡介中學習：

 

配置基本瞭解後，在uni-app 中還有不少實用的功能，下面接着文檔學習。

 

條件編譯：判斷不一樣平臺和項目類型判斷

一種是編譯器判斷：也就是說系統在打包過程當中會根據代碼中編譯的條件和最終打包的平臺進行不一樣的編譯，編譯後的代碼只包涵目標平臺

// #ifdef H5
    alert("只有h5平臺纔有alert方法")
// #endif

另外一種是運行時編譯：在runtime的時候進行判斷具體的平臺

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('運行Android上')
       break;
    case 'ios':
       console.log('運行iOS上')
       break;
    default:
       console.log('運行在開發者工具上')
       break;
}

 

關於環境判斷：在實際開放過程當中通常爲dev環境，在生產環境下通常爲pro模式，不少語言都支持或者說不少框架也都有相關的配置和判斷，好比spring

node中一樣有這個功能，能夠獲取和設置當前運行環境變量，uni-app 依賴與node，而且進行了預設值

 

關於頁面佈局：

單位：單位這個東西很煩，在html狀況下咱們通常使用rem做爲尺寸單位，另外還有vh與vw，uni-app 提供了一個尺寸單位rpx，這個單位是預設值的值，會對不一樣尺寸的機型進行匹配，計算方式以下

 

 

也就是說，若是你的設計稿是750寬的，那麼恭喜你，把量圖的px換成rpx就好了，不明白看上面那個公式，由於比例的相同的，其實與rem計算都差很少，關於rem 以前有作記錄，感興趣的去看看。

 

內置的變量，uni-app 內置了3個變量用來針對狀態欄與導航欄高度，須要注意的是，若是應有會發布到h5 上須要使用 window-bottom 變量

 

使用本地路徑的背景圖片：

 

 關於字體圖標，若是使用網絡字體圖標，需使用https 協議，能夠到ali上下載，很方便，使用方法以前也有記錄，有興趣能夠去看看

 

關於ES6的語法大部分都是支持，uni-app 在編譯期會把es6 轉換爲es5，須要注意的是若是使用微信小程序的自定義組件須要在其工具中進行轉換。

可是若是在調試期間直接經過ide 拉起微信工具會自動配置工程打開轉換器。

 

 

 

關於NPM的支持，若是沒有特殊要求，建議不要去依賴npm 上的一些資源，除非你肯定其並非依賴瀏覽器的，由於uni-app 中沒有這些對象。

 

VUE 使用注意事項：

一、生命週期，徹底支持vue實例的聲明週期，且uni-app 自定義了應用週期及頁面生命週期

二、模版語法徹底支持

三、data必須是一個函數

4.全局變量，有幾種方式能夠定義全局變量，推薦的是第三中，也就是在APP.VUE 入口中添加globalData，使用uni-app 提供的api進行訪問  https://ask.dcloud.net.cn/article/35021。

另外對於某些特性需求，好比用戶登陸可使用vuex 來處理。

 

 

 五、css 與 style綁定，這裏對於vue中可綁定對象語法只支持H5，且自定義組件不支持class 與 style 綁定 = = ~~

 

六、關於key 在列表中雖然沒有強制，可是最好仍是加上，緣由看vue 官網列表渲染和slot

還有index 也不支持在非h5.

 

7.on指令基本沒差，可是關於修飾符非H5 有不少不支持，另外關於stopImmediately，貌似在這裏不行了，因此在綁定同一個元素的時候，避免綁定多個事件。

 

8.表單綁定，uni-app 提供了內置的表單組件擴展。

 

支持 Vue官方文檔：表單控件綁定。

建議開發過程當中直接使用 uni-app：表單組件。用法示例：

H5 的select 標籤用 picker 組件進行代替/表單元素 radio 用 radio-group 組件進行代替

 

 9.v-html  別想~

 

10.組件（擴展組件）uni-app 提供了擴展組件，另外也能夠自定義組件，自定義組件默認放在component包中，經過npm 安裝的的組件默認是在node_module中且直接經過引用便可。

 非h5 也有不少vue組件是不支持的：

 

 

 全局組件：vue全局註冊，沒什麼說的。