uniapp使用條件編譯#ifdef（跨平臺(tái)設(shè)備兼容）

更新時(shí)間：2022年12月24日 15:11:00 作者：約妲己吃火鍋

這篇文章主要介紹了uniapp使用條件編譯#ifdef（跨平臺(tái)設(shè)備兼容）,需要的朋友可以參考下

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

但每個(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)。

條件編譯

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

常用寫(xiě)法：

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

css樣式

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

html標(biāo)簽

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

js函數(shù)

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

擴(kuò)展

#ifdef：if defined 僅在某平臺(tái)存在；
#ifndef：if not defined 除了某平臺(tái)均存在；
%PLATFORM%：平臺(tái)名稱(chēng)寫(xiě)法如下：

在這里插入圖片描述

支持：

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

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

以上就是uniapp使用條件編譯#ifdef（跨平臺(tái)設(shè)備兼容）的詳細(xì)內(nèi)容，更多關(guān)于uniapp使用條件編譯#ifdef（跨平臺(tái)設(shè)備兼容）的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

詳解vue.js移動(dòng)端導(dǎo)航navigationbar的封裝
本篇文章主要介紹了vue.js移動(dòng)端導(dǎo)航navigationbar的封裝，具有一定的參考價(jià)值，有興趣的可以了解一下
2017-07-07
vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途
這篇文章主要介紹了vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-07-07
vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法(使用c3平滑屬性實(shí)現(xiàn))
這篇文章主要介紹了vue中實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頁(yè)面對(duì)應(yīng)位置的方法，這段代碼主要使用c3平滑屬性實(shí)現(xiàn),需要的朋友可以參考下
2019-12-12
Vue2中compiler和runtime模式報(bào)錯(cuò)template compiler is
本文主要介紹了Vue2中compiler和runtime模式報(bào)錯(cuò)template compiler is not available，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
詳解van-cell如何使用插槽
這篇文章主要為大家介紹了van-cell如何使用插槽詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-12-12
在Vue2中v-model和.sync區(qū)別解析
在vue2中提供了.sync修飾符,但是在vue3中不再支持.sync,取而代之的是v-model,本文給大家介紹在Vue2中v-model和.sync區(qū)別,感興趣的朋友一起看看吧
2023-10-10
vue實(shí)現(xiàn)短信驗(yàn)證碼輸入框
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)短信驗(yàn)證碼輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-04-04
Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例
這篇文章主要介紹了Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
Vue入口文件index.html緩存的問(wèn)題及解決
這篇文章主要介紹了Vue入口文件index.html緩存的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03