uniApp 條件編譯

參考C語言的，詳細如下：

 

• 大量寫 if else，會造成代碼執行性能低下和管理混亂。
• 編譯到不同的工程后二次修改，會讓后續升級變的很麻煩。

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

條件編譯是用特殊的注釋作為標記，在編譯時根據這些特殊的注釋，將注釋里面的代碼編譯到不同平台。

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

• #ifdef：if defined 僅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名稱

例子：

 

條件編譯寫法	說明
#ifdef APP-PLUS 需條件編譯的代碼 #endif	僅出現在 App 平台下的代碼
#ifndef H5 需條件編譯的代碼 #endif	除了 H5 平台，其它平台均存在的代碼
#ifdef H5 || MP-WEIXIN 需條件編譯的代碼 #endif	在 H5 平台或微信小程序平台存在的代碼（這里只有||，不可能出現&&，因為沒有交集）

 

%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	字節跳動小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-360	360小程序
MP	微信小程序/支付寶小程序/百度小程序/字節跳動小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快應用通用(包含聯盟、華為)
QUICKAPP-WEBVIEW-UNION	快應用聯盟
QUICKAPP-WEBVIEW-HUAWEI	快應用華為

支持的文件

• .vue
• .js
• .css
  • • pages.json　　　　這個用的比較少
• 各預編譯語言文件，如：.scss、.less、.stylus、.ts、.pug

注意：

• 條件編譯是利用注釋實現的，在不同語法里注釋寫法不一樣，js使用 // 注釋、css 使用 /* 注釋 */、vue/nvue 模板里使用 <!-- 注釋 -->；
• 條件編譯APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE沒什么區別，為了簡寫后面出了APP-NVUE ；
• 使用條件編譯請保證編譯前和編譯后文件的正確性，比如json文件中不能有多余的逗號；
• VUE3 需要在項目的 manifest.json 文件根節點配置 "vueVersion" : "3"

 

上面說那么多 現在開始實戰，我們分別以 vue  、js 、 css  來寫：

 

<template>
    <view>
        
        <!-- #ifdef H5 -->
        <view>這行文字 只有在H5的環境下才能被看到！</view>
        <!--#endif-->
        
        <!-- #ifdef MP -->
        <view>這行文字 只有在小程序(微信小程序/支付寶小程序/百度小程序/字節跳動小程序/QQ小程序/360小程序)的環境下才能被看到！</view>
        <!--#endif-->
        
        <!-- #ifdef APP-PLUS -->
        <view>這行文字 只有在IOS / 安卓的環境下才能被看到！</view>
        <!--#endif-->
        
        <!-- #ifndef MP  -->
        <view>這行文字 只有在IOS / 安卓 / H5 的環境下才能被看到！ 小程序不可能被看到！</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哪里沒實踐，按照這 /**/ 照貓畫虎即可  很簡單啊！