目錄
條件編譯
跨端兼容
uni-app 已將常用的組件、JS API 封裝到框架中，開發者按照 uni-app 規範開發即可保證多平臺兼容，大部分業務均可直接滿足。
但每個平臺有自己的一些特性，因此會存在一些無法跨平臺的情況。
- 大量寫 if else，會造成代碼執行性能低下和管理混亂。
- 編譯到不同的工程後二次修改，會讓後續升級變的很麻煩。
在 C 語言中，通過 #ifdef、#ifndef 的方式，爲 windows、mac 等不同 os 編譯不同的代碼。 uni-app 參考這個思路，爲 uni-app 提供了條件編譯手段，在一個工程裏優雅的完成了平臺個性化實現。
條件編譯
條件編譯是用特殊的註釋作爲標記，在編譯時根據這些特殊的註釋，將註釋裏面的代碼編譯到不同平臺。
寫法：以 #ifdef 或 #ifndef 加 %PLATFORM% 開頭，以 #endif 結尾。
- #ifdef：if defined 僅在某平臺存在
- #ifndef：if not defined 除了某平臺均存在
- %PLATFORM%：平臺名稱
%PLATFORM%可取值如下：
支持的文件
- .vue
- .js
- .css
- pages.json
- 各預編譯語言文件，如：.scss、.less、.stylus、.ts、.pug
注意： 條件編譯是利用註釋實現的，在不同語法裏註釋寫法不一樣，js使用 // 註釋、css 使用 /* 註釋 */、vue/nvue 模板裏使用 <!-- 註釋 -->；
API的條件編譯
// #ifdef %PLATFORM%
平臺特有的API實現
// #endif
示例，如下代碼僅在 5+App 下出現:
示例，如下代碼不會在 H5 平臺上出現：
除了支持單個平臺的條件編譯外，還支持多平臺同時編譯，使用 || 來分隔平臺名稱。
示例，如下代碼會在 5+App 和 H5 平臺上出現：
組件的條件編譯
<!-- #ifdef %PLATFORM% -->
平臺特有的組件
<!-- #endif -->
示例，如下廣告組件僅會在微信小程序中出現：
樣式的條件編譯
/* #ifdef %PLATFORM% */
平臺特有樣式
/* #endif */
注意： 樣式的條件編譯，無論是 css 還是 sass/scss/less/stylus 等預編譯語言中，必須使用 /*註釋*/ 的寫法。
正確寫法
錯誤寫法
pages.json的條件編譯
下面的頁面，只有運行至 5+App 時纔會編譯進去。
不同平臺下的特有功能，以及小程序平臺的分包，都可以通過 pages.json 的條件編譯來更好地實現。這樣，就不會在其它平臺產生多餘的資源，進而減小包體積。
json的條件編譯，如不同平臺的key名稱相同，cli項目下開發者自己安裝的校驗器會報錯，需自行關閉這些校驗器對json相同key的校驗規則。如果使用HBuilderX的校驗器，無需在意此問題，HBuilderX的語法校驗器爲此優化過。
static目錄的條件編譯
在不同平臺，引用的靜態資源可能也存在差異，通過 static 的的條件編譯可以解決此問題，static 目錄下新建不同平臺的專有目錄（目錄名稱同 %PLATFORM% 值域,但字母均爲小寫），專有目錄下的靜態資源只有在特定平臺纔會編譯進去。
如以下目錄結構，a.png 只有在微信小程序平臺纔會編譯進去，b.png 在所有平臺都會被編譯。
┌─static
│ ├─mp-weixin
│ │ └─a.png
│ └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json
整體目錄條件編譯
如果想把各平臺的頁面文件更徹底的分開，也可以在uni-app項目根目錄創建platforms目錄，然後在下面進一步創建APP-PLUS、MP-WEIXIN等子目錄，存放不同平臺的文件。
HBuilderX 支持
HBuilderX 爲 uni-app 的條件編譯提供了豐富的支持:
代碼塊支持
在 HBuilderX 中開發 uni-app 時，通過輸入 ifdef 可快速生成條件編譯的代碼片段
語法高亮
在 HBuilderX 中對條件編譯的代碼註釋部分提供了語法高亮，可分辨出寫法是否正確，使得代碼更加清晰（獨立js文件需在編輯器右下角切換javascript es6+編輯器，獨立css文件暫不支持高亮，但不高亮不影響使用）
正確註釋和快速選中
在 HBuilderX 中，ctrl+alt+/ 即可生成正確註釋（js：// 註釋、css：/* 註釋 */、vue/nvue模板： <!-- 註釋 -->）。
點擊 ifdef 或 endif 可快速選中條件編譯部分；點擊左側的摺疊圖標，可摺疊條件編譯部分代碼。
高效開發技巧
使用代碼塊直接創建組件模板
爲提升開發效率，HBuilderX將 uni-app 常用代碼封裝成了以 u 開頭的代碼塊，如在 template 標籤內輸入 ulist 回車，會自動生成如下代碼：
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">
{{item.value}}
</view>
</view>
</view>
代碼塊分爲Tag代碼塊、JS代碼塊，如在 script 標籤內輸入 uShowToast 回車，會自動生成如下代碼：
uni.showToast({
title: '',
mask: false
duration: 1500
});
uni-app已支持代碼塊見下方列表。
Tag代碼塊
- uButton
- uCheckbox
- uGrid：宮格，需引用uni ui
- uList：列表，需引用uni ui
- uListMedia
- uRadio
- uSwiper
- ......
幾乎各種組件不管是內置組件還是uni ui的組件，均已封裝爲代碼塊，在HBuilderX的vue代碼template區域中敲u，代碼助手會提示所有可見列表。也可在HBuilderX菜單工具-代碼塊設置-vue代碼塊的左側列表查閱所有。
除組件外，其他常用代碼塊包括：
- viewfor：生成一段帶有v-for循環結構的視圖代碼塊
- vbase：生成一段基本的vue代碼結構
JS代碼塊
uni api代碼塊
- uRequest
- uGetLocation
- uShowToast
- uShowLoading
- uHideLoading
- uShowModal
- uShowActionSheet
- uNavigateTo
- uNavigateBack
- uRedirectTo
- uStartPullDownRefresh
- uStopPullDownRefresh
- uLogin
- uShare
- uPay
- ......
幾乎各種常用js api，均已封裝爲代碼塊，在HBuilderX的js代碼中敲u，代碼助手會提示所有可見列表。也可在HBuilderX菜單工具-代碼塊設置-js代碼塊的左側列表查閱所有
vue.js代碼塊
- vImport：導入文件
- ed：export default
- vData：輸出 data(){return{}}
- vMethod：輸出 methods:{}
- vComponents：輸出 components: {}
其他常用js代碼塊
- iff：簡單if
- forr：for循環結構體
- fori：for循環結構體幷包含i
- funn：函數
- funa：匿名函數
- rt：return true
- clog：輸出："console.log()"
- clogvar：增強的日誌輸出，可同時把變量的名字打印出來
- varcw：輸出："var currentWebview = this.$mp.page.$getAppWebview()"
- ifios：iOS的平臺判斷
- ifAndroid：Android的平臺判斷
預置代碼塊不滿足需求的話，可以自定義代碼塊，教程參考https://ask.dcloud.net.cn/article/35924