Conditional compilation

Conditional compilation is marked with special comments that are used to compile code for different platforms at compile time.

** Begins with #ifdef or #ifndef plus %PLATFORM% and ends with #endif.

  • #ifdef: If defined exists only on a platform
  • #ifndef: if not defined
  • %PLATFORM% : indicates the PLATFORM name
Conditional compilation writing instructions
#ifdef APP-PLUSConditional compilation code #endif Code that only appears in the App platform
#ifndef H5Conditional compilation code #endif Code exists on all platforms except H5
#ifdef H5 || MP-WEIXINConditional compilation code #endif In the H5 platform or WeChat applet code (here only | |, impossible &&, because there is no intersection)

%PLATFORM% can be:

value platform
APP-PLUS App
APP-PLUS-NVUE App nvue
H5 H5
MP-WEIXIN Wechat applets
MP-ALIPAY Alipay small program
MP-BAIDU Baidu applet
MP-TOUTIAO Bytedance applet
MP-QQ QQ small programs
MP-360 360 small programs
MP Wechat small program/Alipay small program/Baidu small program/bytedance small program /QQ small program /360 small program
quickapp-webview Quick Application General (including Alliance and Huawei)
quickapp-webview-union Fast Application Alliance
quickapp-webview-huawei Quick Application Huawei

Supported files

  • .vue
  • .js
  • .css
  • pages.json
  • Various precompiled language files, such as.scss,.less,.stylus,.ts,.pug

Note: conditional compilation is implemented using comments, which can be written differently in different syntax. Js uses // comments, CSS uses /* comments */, vue/nvue templates use
;

Conditional compilation of apis

// #ifdef %PLATFORM%Platform specific API implementation// #endif
Copy the code

For example, the following code appears only under App:

For example, the following code does not appear on the H5 platform:

In addition to support the conditional compilation of a single platform, support for multiple platforms compiled at the same time, using the | | to separate the platform name.

As an example, the following code will appear on App and H5 platforms:

Conditional compilation of components

<! -- #ifdef %PLATFORM% -->Platform-specific components<! -- #endif -->
Copy the code

For example, the following public account following component will only appear in wechat applet:

<view>
    <view>Wechat public account attention component</view>
    <view>
        <! Uni-app is not packaged, but you can use wechat's native official-Account component directly.
        <! -- #ifdef MP-WEIXIN -->
                <official-account></official-account>
            <! -- #endif -->
    </view>
</view>
Copy the code

Conditional compilation of styles

/* #ifdef %PLATFORM% */Platform-specific style/* #endif */
Copy the code

Note: Conditional compilation of styles, whether in CSS or in precompiled languages such as SASS/SCSS /less/stylus, must use /* comment */.

Correct term

Error writing

Conditional compilation of pages. Json

The following pages will only be compiled when running into the App.

Functionality specific to different platforms, as well as subcontracting of applets, can be better implemented through conditional compilation of pages. Json. In this way, there is no excess resources on other platforms, thus reducing the package size.

Conditional compilation of JSON. For example, if the key names on different platforms are the same, the verifier installed by the developer in cli projects will report an error. You need to disable the verification rules for the same JSON key by the verifier. Don’t worry about this if you use HBuilderX’s validator, HBuilderX’s syntax validator has been optimized for this.

Conditional compilation of static directories

Static resources referenced in the static directory will be compiled only for the specific PLATFORM. Static resources referenced in the static directory will be compiled only for the specific PLATFORM. Static resources referenced in the static directory will be compiled only for the specific PLATFORM.

As shown in the following directory structure, A. PNG will be compiled only on wechat applet platform, and B. PNG will be compiled on all platforms.

├─ ├─ ├─ ├─ vue ├─manifest.json ├─ page.jsonCopy the code

Whole directory conditional compilation

Create platforms directories under uni-app project root, then create subdirectories such as app-plus and mp-weixin to hold files from different platforms.

Pay attention to

  • platformsOnly page files (page Vue files) can be placed under the directory. You are advised to use this directory for conditional compilation of other resourcesConditional compilation of static directories