繼續在框架簡介中學習:
配置基本了解后,在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 使用注意事項:
1、生命周期,完全支持vue實例的聲明周期,且uni-app 自定義了應用周期及頁面生命周期
2、模版語法完全支持
3、data必須是一個函數
4.全局變量,有幾種方式可以定義全局變量,推薦的是第三中,也就是在APP.VUE 入口中添加globalData,使用uni-app 提供的api進行訪問 https://ask.dcloud.net.cn/article/35021。
另外對於某些特性需求,比如用戶登錄可以使用vuex 來處理。
5、css 與 style綁定,這里對於vue中可綁定對象語法只支持H5,且自定義組件不支持class 與 style 綁定 = = ~~
6、關於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全局注冊,沒什么說的。