uniapp使用條件編譯#ifdef（跨平臺設備兼容）

Posted on by

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

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

大量寫 if else，會造成代碼執行性能低下和管理混亂。

編譯到不同的工程後二次修改，會讓後續升級變的很麻煩。

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

條件編譯

官方文檔：https://uniapp.dcloud.io/platform條件編譯是用特殊的註釋作為標記，在編譯時根據這些特殊的註釋，將註釋裡面的代碼編譯到不同平臺。

常用寫法：

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

css樣式

/*  #ifdef  APP-PLUS  */
width: 60upx;
height: 60upx;
/*  #endif  */

html標簽

/*  #ifdef  APP-PLUS  */
<button type="default"></button>
/*  #endif  */

js函數

change() {
	// #ifdef APP-PLUS
	statusbarHeight = plus.navigator.getStatusbarHeight()
	// #endif
}

擴展

#ifdef：if defined 僅在某平臺存在；
#ifndef：if not defined 除瞭某平臺均存在；
%PLATFORM%：平臺名稱寫法如下：

在這裡插入圖片描述

支持：

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

註意:： 條件編譯是利用註釋實現的，在不同語法裡註釋寫法不一樣，js使用 // 註釋、css 使用 /* 註釋 */、vue/nvue 模板裡使用 ；

以上就是uniapp使用條件編譯#ifdef（跨平臺設備兼容）的詳細內容，更多關於uniapp使用條件編譯#ifdef（跨平臺設備兼容）的資料請關註WalkonNet其它相關文章！

推薦閱讀：