跨端兼容

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

十年的河北網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整河北建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“河北網(wǎng)站設(shè)計(jì)”,“河北網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

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

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

條件編譯

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

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

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

條件編譯寫法	說明
#ifdef  APP-PLUS 需條件編譯的代碼 #endif	僅出現(xiàn)在 App 平臺(tái)下的代碼
#ifndef  H5 需條件編譯的代碼 #endif	除了 H5 平臺(tái)，其它平臺(tái)均存在的代碼
#ifdef  H5 ||  MP-WEIXIN 需條件編譯的代碼 #endif	在 H5 平臺(tái)或微信小程序平臺(tái)存在的代碼（這里只有||，不可能出現(xiàn)&&，因?yàn)闆]有交集）

%PLATFORM% 可取值如下：

值	平臺(tái)
APP-PLUS	App
APP-PLUS-NVUE	App nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付寶小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字節(jié)跳動(dòng)小程序
MP-QQ	QQ小程序
MP	微信小程序/支付寶小程序/百度小程序/字節(jié)跳動(dòng)小程序/QQ小程序

支持的文件

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

注意： 條件編譯是利用注釋實(shí)現(xiàn)的，在不同語法里注釋寫法不一樣，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í)編譯，使用 || 來分隔平臺(tái)名稱。

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

組件的條件編譯

平臺(tái)特有的組件

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

樣式的條件編譯

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

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

正確寫法

錯(cuò)誤寫法

pages.json 的條件編譯

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

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

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

static 目錄的條件編譯

在不同平臺(tái)，引用的靜態(tài)資源可能也存在差異，通過 static 的的條件編譯可以解決此問題，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     
    

整體目錄條件編譯

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

HBuilderX 支持

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

代碼塊支持

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

語法高亮

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

正確注釋和快速選中

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

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

注意

• Android 和 iOS 平臺(tái)不支持通過條件編譯來區(qū)分，如果需要區(qū)分 Android、iOS 平臺(tái)，請(qǐng)通過調(diào)用 uni.getSystemInfo 來獲取平臺(tái)信息。支持ifios、ifAndroid代碼塊，可方便編寫判斷。
• 有些跨端工具可以提供js的條件編譯或多態(tài)，但這對(duì)于實(shí)際開發(fā)遠(yuǎn)遠(yuǎn)不夠。uni-app不止是處理js，任何代碼都可以多端條件編譯，才能真正解決實(shí)際項(xiàng)目的跨端問題。另外所謂多態(tài)在實(shí)際開發(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ù)。

分享題目：創(chuàng)新互聯(lián)UNI-APP教程：uni-app條件編譯
網(wǎng)頁網(wǎng)址：http://uogjgqi.cn/article/cdhscoe.html