uni-app 條件編譯

跨端兼容

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

但每個平臺有自己的一些特性，因此會存在一些無法跨平臺的情況。

• 大量寫 if else，會造成代碼執(zhí)行性能低下和管理混亂。
• 編譯到不同的工程后二次修改，會讓后續(xù)升級變的很麻煩。

在 C 語言中，通過 #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的代碼。 uni-app 參考這個思路，為 uni-app 提供了條件編譯手段，在一個工程里優(yōu)雅的完成了平臺個性化實現(xiàn)。

條件編譯

條件編譯是用特殊的注釋作為標記，在編譯時根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。

寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。

• #ifdef：if defined 僅在某平臺存在
• #ifndef：if not defined 除了某平臺均存在
• %PLATFORM%：平臺名稱

%PLATFORM% 可取值如下：

支持的文件

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

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

API 的條件編譯

// #ifdef  %PLATFORM%
平臺特有的API實現(xiàn)
// #endif

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

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

除了支持單個平臺的條件編譯外，還支持多平臺同時編譯，使用 || 來分隔平臺名稱。

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

組件的條件編譯

<!--  #ifdef  %PLATFORM% -->
平臺特有的組件
<!--  #endif -->

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

樣式的條件編譯

/*  #ifdef  %PLATFORM%  */
平臺特有樣式
/*  #endif  */

注意： 樣式的條件編譯，無論是 css 還是 sass/scss/less/stylus 等預編譯語言中，必須使用 /*注釋*/ 的寫法。

正確寫法

錯誤寫法

pages.json 的條件編譯

下面的頁面，只有運行至 App 時才會編譯進去。

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

json的條件編譯，如不同平臺的key名稱相同，cli項目下開發(fā)者自己安裝的校驗器會報錯，需自行關閉這些校驗器對json相同key的校驗規(guī)則。如果使用HBuilderX的校驗器，無需在意此問題，HBuilderX的語法校驗器為此優(yōu)化過。

static 目錄的條件編譯

在不同平臺，引用的靜態(tài)資源可能也存在差異，通過 static 的的條件編譯可以解決此問題，static 目錄下新建不同平臺的專有目錄（目錄名稱同 %PLATFORM% 值域,但字母均為小寫），專有目錄下的靜態(tài)資源只有在特定平臺才會編譯進去。

如以下目錄結構，a.png 只有在微信小程序平臺才會編譯進去，b.png 在所有平臺都會被編譯。

    
┌─static                
│  ├─mp-weixin
│  │  └─a.png     
│  └─b.png
├─main.js        
├─App.vue      
├─manifest.json 
└─pages.json     
    

整體目錄條件編譯

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

HBuilderX 支持

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

代碼塊支持

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

語法高亮

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

正確注釋和快速選中

在 HBuilderX 中，ctrl+alt+/ 即可生成正確注釋（js：// 注釋、css：/* 注釋 */、vue/nvue模板： <!-- 注釋 -->）。

點擊 ifdef 或 endif 可快速選中條件編譯部分；點擊左側的折疊圖標，可折疊條件編譯部分代碼。

注意

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