當(dāng)前位置:首頁 > IT技術(shù) > 移動(dòng)平臺(tái) > 正文

uniApp 條件編譯
2021-09-15 15:20:58

參考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>
flagCompile.vue

C3哪里沒實(shí)踐,按照這 /**/ 照貓畫虎即可? 很簡單??!

?

本文摘自 :https://www.cnblogs.com/

開通會(huì)員,享受整站包年服務(wù)立即開通 >