APP
參考C語言的，詳細如下：
?
- 大量寫 if else，會造成代碼執(zhí)行性能低下和管理混亂。
- 編譯到不同的工程后二次修改，會讓后續(xù)升級變的很麻煩。
在 C 語言中，通過 #ifdef、#ifndef 的方式，為 windows、mac 等不同 os 編譯不同的代碼。?uni-app?參考這個思路，為?uni-app?提供了條件編譯手段，在一個工程里優(yōu)雅的完成了平臺個性化實現(xiàn)。
條件編譯是用特殊的注釋作為標記，在編譯時根據(jù)這些特殊的注釋，將注釋里面的代碼編譯到不同平臺。
寫法：以?#ifdef?或?#ifndef?加?%PLATFORM%?開頭，以?#endif?結(jié)尾。
- #ifdef：if defined 僅在某平臺存在
- #ifndef：if not defined 除了某平臺均存在
- %PLATFORM%：平臺名稱
例子：
?
| 條件編譯寫法 | 說明 |
|---|---|
|
#ifdef?APP-PLUS
需條件編譯的代碼 #endif |
僅出現(xiàn)在 App 平臺下的代碼 |
|
#ifndef?H5
需條件編譯的代碼 #endif |
除了 H5 平臺，其它平臺均存在的代碼 |
|
#ifdef?H5?||?MP-WEIXIN
需條件編譯的代碼 #endif |
在 H5 平臺或微信小程序平臺存在的代碼（這里只有||，不可能出現(xià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é)跳動小程序 |
| MP-QQ | QQ小程序 |
| MP-KUAISHOU | 快手小程序 |
| MP-360 | 360小程序 |
| MP | 微信小程序/支付寶小程序/百度小程序/字節(jié)跳動小程序/QQ小程序/360小程序 |
| QUICKAPP-WEBVIEW | 快應用通用(包含聯(lián)盟、華為) |
| QUICKAPP-WEBVIEW-UNION | 快應用聯(lián)盟 |
| QUICKAPP-WEBVIEW-HUAWEI | 快應用華為 |
支持的文件
- .vue
- .js
- .css
-
- pages.json 這個用的比較少
-
- 各預編譯語言文件，如：.scss、.less、.stylus、.ts、.pug
注意：
- 條件編譯是利用注釋實現(xiàn)的，在不同語法里注釋寫法不一樣，js使用?
// 注釋、css 使用?/* 注釋 */、vue/nvue 模板里使用?<!-- 注釋 -->； - 條件編譯APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE沒什么區(qū)別，為了簡寫后面出了APP-NVUE ；
- 使用條件編譯請保證
編譯前和編譯后文件的正確性，比如json文件中不能有多余的逗號； VUE3?需要在項目的?manifest.json?文件根節(jié)點配置?"vueVersion" : "3"
?
上面說那么多 現(xiàn)在開始實戰(zhàn)，我們分別以?vue? 、js 、 css? 來寫：
?
<template> <view> <!-- #ifdef H5 --> <view>這行文字 只有在H5的環(huán)境下才能被看到！</view> <!--#endif--> <!-- #ifdef MP --> <view>這行文字 只有在小程序(微信小程序/支付寶小程序/百度小程序/字節(jié)跳動小程序/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哪里沒實踐，按照這 /**/ 照貓畫虎即可? 很簡單啊！
?
本文摘自 ：https://www.cnblogs.com/
