1. 跨端兼容
uni-app 已將常用的組件、JS API 封裝到框架中考传，開(kāi)發(fā)者按照 uni-app 規(guī)范開(kāi)發(fā)即可保證多平臺(tái)兼容，大部分業(yè)務(wù)均可直接滿足。
但每個(gè)平臺(tái)有自己的一些特性臭脓，因此會(huì)存在一些無(wú)法跨平臺(tái)的情況。
- 大量寫 if else腹忽，會(huì)造成代碼執(zhí)行性能低下和管理混亂来累。
- 編譯到不同的工程后二次修改，會(huì)讓后續(xù)升級(jí)變的很麻煩窘奏。
在 C 語(yǔ)言中嘹锁，通過(guò) #ifdef、#ifndef 的方式着裹，為 windows领猾、mac 等不同 os 編譯不同的代碼。uni-app參考這個(gè)思路，為uni-app提供了條件編譯手段摔竿，在一個(gè)工程里優(yōu)雅的完成了平臺(tái)個(gè)性化實(shí)現(xiàn)面粮。
2. 條件編譯
(1)條件編譯：是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋继低，將注釋里面的代碼編譯到不同平臺(tái)熬苍。
注意：Android 和 iOS 平臺(tái)不支持通過(guò)條件編譯來(lái)區(qū)分，如果需要區(qū)分 Android袁翁、iOS 平臺(tái)柴底，請(qǐng)通過(guò)調(diào)用 uni.getSystemInfo 來(lái)獲取平臺(tái)信息。
(2)寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開(kāi)頭梦裂，以 #endif 結(jié)尾似枕。
#ifdef：if defined 僅在某平臺(tái)存在
#ifndef：if not defined 除了某平臺(tái)均存在
%PLATFORM%：平臺(tái)名稱
(3)支持的文件
- .vue
- .js
- .css
- pages.json
- 各預(yù)編譯語(yǔ)言文件，如：.scss年柠、.less凿歼、.stylus、.ts冗恨、.pug
注意： 條件編譯是利用注釋實(shí)現(xiàn)的答憔，在不同語(yǔ)法里注釋寫法不一樣，js使用 // 注釋掀抹、css 使用 /* 注釋 */虐拓、vue/nvue 模板里使用 ；
2.1 API 的條件編譯
// #ifdef %PLATFORM%
平臺(tái)特有的API實(shí)現(xiàn)
// #endif
(1)如下代碼僅在 5+App 下出現(xiàn)
(2)如下代碼不會(huì)在 H5 平臺(tái)上出現(xiàn)
(3)如下代碼會(huì)在 5+App 和 H5 平臺(tái)上出現(xiàn)
除了支持單個(gè)平臺(tái)的條件編譯外傲武，還支持多平臺(tái)同時(shí)編譯蓉驹，使用 || 來(lái)分隔平臺(tái)名稱。
2.2 組件的條件編譯
<!-- #ifdef %PLATFORM% -->
平臺(tái)特有的組件
<!-- #endif -->
(1)如下廣告組件僅會(huì)在微信小程序中出現(xiàn)
2.3 樣式的條件編譯
/* #ifdef %PLATFORM% */
平臺(tái)特有樣式
/* #endif */
注意： 樣式的條件編譯揪利，無(wú)論是 css 還是 sass/scss/less/stylus 等預(yù)編譯語(yǔ)言中态兴，必須使用 /注釋/ 的寫法。
(1)正確寫法
(2)錯(cuò)誤寫法
2.4 pages.json的條件編譯
下面的頁(yè)面疟位，只有運(yùn)行至 5+App 時(shí)才會(huì)編譯進(jìn)去瞻润。
備注：不同平臺(tái)下的特有功能，以及小程序平臺(tái)的分包甜刻，都可以通過(guò) pages.json 的條件編譯來(lái)更好地實(shí)現(xiàn)绍撞。這樣，就不會(huì)在其它平臺(tái)產(chǎn)生多余的資源得院，進(jìn)而減小包體積傻铣。
2.5 static目錄的條件編譯
在不同平臺(tái)，引用的靜態(tài)資源可能也存在差異祥绞，通過(guò) static 的的條件編譯可以解決此問(wèn)題矾柜，static 目錄下新建不同平臺(tái)的專有目錄（目錄名稱同 %PLATFORM% 值域,但字母均為小寫）阱驾，專有目錄下的靜態(tài)資源只有在特定平臺(tái)才會(huì)編譯進(jìn)去就谜。
如以下目錄結(jié)構(gòu)怪蔑，a.png 只有在微信小程序平臺(tái)才會(huì)編譯進(jìn)去，b.png 在所有平臺(tái)都會(huì)被編譯丧荐。
┌─static
│ ├─mp-weixin
│ │ └─a.png
│ └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json
2.6 HBuilderX小技巧
HBuilderX 為 uni-app 的條件編譯提供了豐富的支持:
(1)代碼塊支持：通過(guò)輸入 ifdef 可快速生成條件編譯的代碼片段
(2)語(yǔ)法高亮：對(duì)條件編譯的代碼注釋部分提供了語(yǔ)法高亮
(3)正確注釋和快速選中：ctrl+alt+/ 即可生成正確注釋（js：// 注釋缆瓣、css：/* 注釋 */、vue/nvue模板： ）虹统。點(diǎn)擊 ifdef 或 endif 可快速選中條件編譯部分弓坞；點(diǎn)擊左側(cè)的折疊圖標(biāo)，可折疊條件編譯部分代碼车荔。
