uniapp multi-terminal compatibility - conditional compilation

Table of contents

1. Fixed syntax

2. Conditional compilation

3. The possible values of %PLATFORM% are as follows:

4. Supported files

Writing:

5. Code block support

Proper Annotation and Quick Selection

6. Official documents

1. Fixed syntax

Start with #ifdef or #ifndef followed by %PLATFORM% and end with #endif.

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

2. Conditional compilation

#ifdef only exists on a certain platform

#ifndef exists except a certain platform (reverse)

#ifdef APP-PLUS requires conditionally compiled code #endif	Code that only appears under the App platform
#ifndef H5 requires conditionally compiled code #endif	Except for the H5 platform, codes that exist on other platforms
#ifdef H5 \|\| MP-WEIXIN requires conditionally compiled code #endif	Codes that exist on the H5 platform or the WeChat applet platform (only \|\| here, && is impossible because there is no intersection)

3. The possible values of %PLATFORM% are as follows:

value	Effective conditions
VUE3	HBuilderX 3.2.0+ Details
APP-PLUS	App
APP-PLUS-NVUE or APP-NVUE	App nvue page
APP-ANDROID	App Android platform only uts files
APP-IOS	App iOS platform only uts files
H5	H5
MP-WEIXIN	WeChat applet
MP-ALIPAY	Alipay applet
MP-BAIDU	Baidu applet
MP-TOUTIAO	ByteDance applet
MP-LARK	Feishu applet
MP-QQ	QQ applet
MP-KUAISHOU	Kuaishou applet
MP-JD	Jingdong applet
MP-360	360 applet
MP	WeChat Mini Program/Alipay Mini Program/Baidu Mini Program/Byte Beat Mini Program/Feishu Mini Program/QQ Mini Program/360 Mini Program
QUICKAPP-WEBVIEW	Universal Quick App (including Alliance and Huawei)
QUICKAPP-WEBVIEW-UNION	Quick App Alliance
QUICKAPP-WEBVIEW-HUAWEI	Quick App Huawei

4. Supported files

.view    

.js   // #ifndef H5

.css   /* #ifndef H5 */

pages.json // #ifndef H5

Various precompiled language files, such as: .scss, .less, .stylus, .ts, .pug

Notice:

Conditional compilation is implemented using annotations. The annotations are written differently in different grammars, // 注释using js, css /* 注释 */, and vue/nvue templates ;

Conditional compilation of APP-PLUS includes APP-NVUE and APP-VUE. There is no difference between APP-PLUS-NVUE and APP-NVUE. For shorthand, APP-NVUE is listed later;

编译前Please ensure the correctness of the file when using conditional compilation 编译后, for example, there should be no extra commas in the json file;

VUE3manifest.json It needs to be configured in the file root node of the project "vueVersion" : "3"

Writing:

html:page

<view>
    <view>微信公众号关注组件</view>
    <view>
        <!-- uni-app未封装，但可直接使用微信原生的official-account组件-->
        <!-- #ifdef MP-WEIXIN -->
		        <official-account></official-account>
		    <!-- #endif -->
    </view>
</view>

css: styles