uni-app 條件編譯

跨端兼容

uni-app 已將常用的組件、JS API 封裝到框架中，開(kāi)發(fā)者按照 uni-app 規(guī)范開(kāi)發(fā)即可保證多平臺(tái)兼容，大部分業(yè)務(wù)均可直接滿(mǎn)足。

但每個(gè)平臺(tái)有自己的一些特性，因此會(huì)存在一些無(wú)法跨平臺(tái)的情況。

• 大量寫(xiě) 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)。

條件編譯

條件編譯是用特殊的注釋作為標(biāo)記，在編譯時(shí)根據(jù)這些特殊的注釋?zhuān)瑢⒆⑨尷锩娴拇a編譯到不同平臺(tái)。

寫(xiě)法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開(kāi)頭，以 #endif 結(jié)尾。

• #ifdef：if defined 僅在某平臺(tái)存在
• #ifndef：if not defined 除了某平臺(tái)均存在
• %PLATFORM%：平臺(tái)名稱(chēng)

%PLATFORM% 可取值如下：

支持的文件

• .vue
• .js
• .css
• pages.json
• 各預(yù)編譯語(yǔ)言文件，如：.scss、.less、.stylus、.ts、.pug

注意： 條件編譯是利用注釋實(shí)現(xiàn)的，在不同語(yǔ)法里注釋寫(xiě)法不一樣，js使用 // 注釋、css 使用 /* 注釋 */、vue/nvue 模板里使用 <!-- 注釋 -->；

API 的條件編譯

// #ifdef  %PLATFORM%
平臺(tái)特有的API實(shí)現(xiàn)
// #endif

示例，如下代碼僅在 App 下出現(xiàn):

示例，如下代碼不會(huì)在 H5 平臺(tái)上出現(xiàn)：

除了支持單個(gè)平臺(tái)的條件編譯外，還支持多平臺(tái)同時(shí)編譯，使用 || 來(lái)分隔平臺(tái)名稱(chēng)。

示例，如下代碼會(huì)在 App 和 H5 平臺(tái)上出現(xiàn)：

組件的條件編譯

<!--  #ifdef  %PLATFORM% -->
平臺(tái)特有的組件
<!--  #endif -->

示例，如下廣告組件僅會(huì)在微信小程序中出現(xiàn)：

樣式的條件編譯

/*  #ifdef  %PLATFORM%  */
平臺(tái)特有樣式
/*  #endif  */

注意： 樣式的條件編譯，無(wú)論是 css 還是 sass/scss/less/stylus 等預(yù)編譯語(yǔ)言中，必須使用 /*注釋*/ 的寫(xiě)法。

正確寫(xiě)法

錯(cuò)誤寫(xiě)法

pages.json 的條件編譯

下面的頁(yè)面，只有運(yùn)行至 App 時(shí)才會(huì)編譯進(jìn)去。

不同平臺(tái)下的特有功能，以及小程序平臺(tái)的分包，都可以通過(guò) pages.json 的條件編譯來(lái)更好地實(shí)現(xiàn)。這樣，就不會(huì)在其它平臺(tái)產(chǎn)生多余的資源，進(jìn)而減小包體積。

json的條件編譯，如不同平臺(tái)的key名稱(chēng)相同，cli項(xiàng)目下開(kāi)發(fā)者自己安裝的校驗(yàn)器會(huì)報(bào)錯(cuò)，需自行關(guān)閉這些校驗(yàn)器對(duì)json相同key的校驗(yàn)規(guī)則。如果使用HBuilderX的校驗(yàn)器，無(wú)需在意此問(wèn)題，HBuilderX的語(yǔ)法校驗(yàn)器為此優(yōu)化過(guò)。

static 目錄的條件編譯

在不同平臺(tái)，引用的靜態(tài)資源可能也存在差異，通過(guò) static 的的條件編譯可以解決此問(wèn)題，static 目錄下新建不同平臺(tái)的專(zhuān)有目錄（目錄名稱(chēng)同 %PLATFORM% 值域,但字母均為小寫(xiě)），專(zhuān)有目錄下的靜態(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     
    

整體目錄條件編譯

如果想把各平臺(tái)的頁(yè)面文件更徹底的分開(kāi)，也可以在uni-app項(xiàng)目根目錄創(chuàng)建platforms目錄，然后在下面進(jìn)一步創(chuàng)建APP-PLUS、MP-WEIXIN等子目錄，存放不同平臺(tái)的文件。

HBuilderX 支持

HBuilderX 為 uni-app 的條件編譯提供了豐富的支持:

代碼塊支持

在 HBuilderX 中開(kāi)發(fā) uni-app 時(shí)，通過(guò)輸入 ifdef 可快速生成條件編譯的代碼片段

語(yǔ)法高亮

在 HBuilderX 中對(duì)條件編譯的代碼注釋部分提供了語(yǔ)法高亮，可分辨出寫(xiě)法是否正確，使得代碼更加清晰（獨(dú)立js文件需在編輯器右下角切換javascript es6+編輯器，獨(dú)立css文件暫不支持高亮，但不高亮不影響使用）

正確注釋和快速選中

在 HBuilderX 中，ctrl+alt+/ 即可生成正確注釋?zhuān)╦s：// 注釋、css：/* 注釋 */、vue/nvue模板： <!-- 注釋 -->）。

點(diǎn)擊 ifdef 或 endif 可快速選中條件編譯部分；點(diǎn)擊左側(cè)的折疊圖標(biāo)，可折疊條件編譯部分代碼。

注意

• Android 和 iOS 平臺(tái)不支持通過(guò)條件編譯來(lái)區(qū)分，如果需要區(qū)分 Android、iOS 平臺(tái)，請(qǐng)通過(guò)調(diào)用 uni.getSystemInfo 來(lái)獲取平臺(tái)信息。支持ifios、ifAndroid代碼塊，可方便編寫(xiě)判斷。
• 有些跨端工具可以提供js的條件編譯或多態(tài)，但這對(duì)于實(shí)際開(kāi)發(fā)遠(yuǎn)遠(yuǎn)不夠。uni-app不止是處理js，任何代碼都可以多端條件編譯，才能真正解決實(shí)際項(xiàng)目的跨端問(wèn)題。另外所謂多態(tài)在實(shí)際開(kāi)發(fā)中會(huì)造成大量冗余代碼，很不利于復(fù)用和維護(hù)。舉例，微信小程序主題色是綠色，而百度支付寶小程序是藍(lán)色，你的應(yīng)用想分平臺(tái)適配顏色，只有條件編譯是代碼量最低、最容易維護(hù)的。
• 有些公司的產(chǎn)品運(yùn)營(yíng)總是給不同平臺(tái)提不同需求，但這不是拒絕uni-app的理由。關(guān)鍵在于項(xiàng)目里，復(fù)用的代碼多還是個(gè)性的代碼多，正常都是復(fù)用的代碼多，所以仍然應(yīng)該多端。而個(gè)性的代碼放到不同平臺(tái)的目錄下，差異化維護(hù)。