參考C語言的,詳細(xì)如下:
?
- 大量寫 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%?可取值如下:
值 | 生效條件 |
---|---|
VUE3 | HBuilderX 3.2.0+?詳情 |
APP-PLUS | App |
APP-PLUS-NVUE或APP-NVUE | App nvue |
H5 | H5 |
MP-WEIXIN | 微信小程序 |
MP-ALIPAY | 支付寶小程序 |
MP-BAIDU | 百度小程序 |
MP-TOUTIAO | 字節(jié)跳動(dòng)小程序 |
MP-QQ | QQ小程序 |
MP-KUAISHOU | 快手小程序 |
MP-360 | 360小程序 |
MP | 微信小程序/支付寶小程序/百度小程序/字節(jié)跳動(dòng)小程序/QQ小程序/360小程序 |
QUICKAPP-WEBVIEW | 快應(yīng)用通用(包含聯(lián)盟、華為) |
QUICKAPP-WEBVIEW-UNION | 快應(yīng)用聯(lián)盟 |
QUICKAPP-WEBVIEW-HUAWEI | 快應(yīng)用華為 |
支持的文件
- .vue
- .js
- .css
-
- pages.json 這個(gè)用的比較少
-
- 各預(yù)編譯語言文件,如:.scss、.less、.stylus、.ts、.pug
注意:
- 條件編譯是利用注釋實(shí)現(xiàn)的,在不同語法里注釋寫法不一樣,js使用?
// 注釋
、css 使用?/* 注釋 */
、vue/nvue 模板里使用?<!-- 注釋 -->
; - 條件編譯APP-PLUS包含APP-NVUE和APP-VUE,APP-PLUS-NVUE和APP-NVUE沒什么區(qū)別,為了簡寫后面出了APP-NVUE ;
- 使用條件編譯請(qǐng)保證
編譯前
和編譯后
文件的正確性,比如json文件中不能有多余的逗號(hào); VUE3
?需要在項(xiàng)目的?manifest.json
?文件根節(jié)點(diǎn)配置?"vueVersion" : "3"
?
上面說那么多 現(xiàn)在開始實(shí)戰(zhàn),我們分別以?vue? 、js 、 css? 來寫:
?
<template> <view> <!-- #ifdef H5 --> <view>這行文字 只有在H5的環(huán)境下才能被看到!</view> <!--#endif--> <!-- #ifdef MP --> <view>這行文字 只有在小程序(微信小程序/支付寶小程序/百度小程序/字節(jié)跳動(dòng)小程序/QQ小程序/360小程序)的環(huán)境下才能被看到!</view> <!--#endif--> <!-- #ifdef APP-PLUS --> <view>這行文字 只有在IOS / 安卓的環(huán)境下才能被看到!</view> <!--#endif--> <!-- #ifndef MP --> <view>這行文字 只有在IOS / 安卓 / H5 的環(huán)境下才能被看到! 小程序不可能被看到!</view> <!--#endif--> </view> </template> <script> export default { data() { return { } }, methods: { }, onLoad() { //#ifdef MP-WEIXIN console.log("只有微信小程序才能看到我輸出這行"); //#endif //#ifdef H5 console.log("只有H5才能看到我輸出這行"); //#endif } } </script> <style> </style>
C3哪里沒實(shí)踐,按照這 /**/ 照貓畫虎即可? 很簡單??!
?
本文摘自 :https://www.cnblogs.com/