uniapp使用條件編譯#ifdef(跨平臺設(shè)備兼容)
uni-app 已將常用的組件、JS API 封裝到框架中,開發(fā)者按照 uni-app 規(guī)范開發(fā)即可保證多平臺兼容,大部分業(yè)務(wù)均可直接滿足。
但每個平臺有自己的一些特性,因此會存在一些無法跨平臺的情況。
大量寫 if else
,會造成代碼執(zhí)行性能低下和管理混亂。
編譯到不同的工程后二次修改,會讓后續(xù)升級變的很麻煩。
在 C 語言中,通過 #ifdef、#ifndef
的方式,為 windows、mac
等不同 os 編譯不同的代碼。 uni-app 參考這個思路,為 uni-app 提供了條件編譯手段,在一個工程里優(yōu)雅的完成了平臺個性化實(shí)現(xiàn)。
條件編譯
官方文檔:https://uniapp.dcloud.io/platform條件編譯是用特殊的注釋作為標(biāo)記,在編譯時根據(jù)這些特殊的注釋,將注釋里面的代碼編譯到不同平臺。
常用寫法:
以#ifdef
或 #ifndef
加%PLATFORM%
開頭,以 #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 僅在某平臺存在;#ifndef
:if not defined 除了某平臺均存在;%PLATFORM%
:平臺名稱寫法如下:
支持:
- .vue
- .js
- .css
- pages.json
- 各預(yù)編譯語言文件,如:.scss、.less、.stylus、.ts、.pug
注意
:: 條件編譯是利用注釋實(shí)現(xiàn)的,在不同語法里注釋寫法不一樣,js使用 // 注釋、css 使用 /* 注釋 */、vue/nvue 模板里使用 ;
以上就是uniapp使用條件編譯#ifdef(跨平臺設(shè)備兼容)的詳細(xì)內(nèi)容,更多關(guān)于uniapp使用條件編譯#ifdef(跨平臺設(shè)備兼容)的資料請關(guān)注腳本之家其它相關(guān)文章!
- uniapp使用高德地圖的超詳細(xì)步驟
- uniapp實(shí)現(xiàn)h5、app與微信小程序三端pdf文件下載和預(yù)覽功能
- uniapp微信小程序打卡功能的詳細(xì)實(shí)現(xiàn)流程
- 手把手教你寫一個uniapp通用頁面組件
- uniapp頁面間傳參的幾種方法實(shí)例總結(jié)
- uniapp開發(fā)打包多端應(yīng)用完整方法指南
- uniapp打包安卓App的兩種方式(云打包、本地打包)方法詳解
- 使用uniapp打包上架微信小程序完整教程
- uniApp微信小程序使用騰訊地圖定位功能及getLocation需要在app.json中聲明permission字段問題解決
- uniapp語音識別(訊飛語音)轉(zhuǎn)文字
相關(guān)文章
vue中el-cascader三級聯(lián)動懶加載回顯問題解決
本文主要介紹了vue中el-cascader三級聯(lián)動懶加載回顯問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06react+vite動態(tài)導(dǎo)入報錯@vite-ignore的問題及解決
這篇文章主要介紹了react+vite動態(tài)導(dǎo)入報錯@vite-ignore的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03Nuxt.js SSR與權(quán)限驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了Nuxt.js SSR與權(quán)限驗(yàn)證的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11手把手搭建安裝基于windows的Vue.js運(yùn)行環(huán)境
手把手教大家搭建安裝基于windows的Vue.js的運(yùn)行環(huán)境,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06使用Vue-neo4j實(shí)現(xiàn)繪制三國人物圖譜關(guān)系
這篇文章主要介紹了使用Vue-neo4j實(shí)現(xiàn)繪制三國人物圖譜關(guān)系,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04vue項(xiàng)目使用$router.go(-1)返回時刷新原來的界面操作
這篇文章主要介紹了vue項(xiàng)目使用$router.go(-1)返回時刷新原來的界面操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue3實(shí)現(xiàn)自定義指令攔截點(diǎn)擊事件的示例代碼
某些應(yīng)用場景會給點(diǎn)擊事件添加權(quán)限,不存在權(quán)限就攔截點(diǎn)擊事件,有權(quán)限就繼續(xù)正常觸發(fā)點(diǎn)擊事件。這樣的效果是如何實(shí)現(xiàn)的呢,本文就來和大家詳細(xì)講講2023-02-02Vue中的this.$options.data()和this.$data用法說明
這篇文章主要介紹了Vue中的this.$options.data()和this.$data用法說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07