Master Uniapp Conditional Compilation for H5, Mini‑Program, and App

Why Multi‑Platform Adaptation?

Uniapp can publish a single codebase to many platforms, but each platform has different rules, components, APIs, and CSS support. Mini‑programs lack window, document and some CSS; App has stronger native capabilities; H5 supports everything but may have cross‑origin issues. Conditional compilation is required to run different code per platform.

Core Syntax: Conditional Compilation

The syntax is fixed and can be copied directly:

// #ifdef platform identifier
  code executed only on this platform
// #endif

Common Platform Identifiers

MP-WEIXIN – WeChat Mini‑program

H5 – Browser H5

APP-PLUS – App (Android / iOS)

Three Main Usage Scenarios

1. In <template> (different UI per platform)

<template>
  <view>
    <!-- Only in WeChat Mini‑program -->
    <!-- #ifdef MP-WEIXIN -->
    <view class="mp-tip">I am exclusive to Mini‑program</view>
    <!-- #endif -->

    <!-- Only in H5 -->
    <!-- #ifdef H5 -->
    <view class="h5-tip">I am exclusive to H5</view>
    <!-- #endif -->

    <!-- Only in App -->
    <!-- #ifdef APP-PLUS -->
    <view class="app-tip">I am exclusive to App</view>
    <!-- #endif -->
  </view>
</template>

2. In <script> (different API calls)

<script>
export default {
  onLoad() {
    // Mini‑program
    // #ifdef MP-WEIXIN
    console.log('Running in Mini‑program')
    // #endif

    // H5
    // #ifdef H5
    alert('Running in H5')
    // #endif

    // App
    // #ifdef APP-PLUS
    uni.showToast({ title: 'Running in App' })
    // #endif
  }
}
</script>

3. In <style> (different styles)

<style scoped>
/* Only in Mini‑program */
<!-- #ifdef MP-WEIXIN -->
.mp-tip { color: red; }
<!-- #endif -->

/* Only in H5 */
<!-- #ifdef H5 -->
.h5-tip { color: blue; }
<!-- #endif -->

/* Only in App */
<!-- #ifdef APP-PLUS -->
.app-tip { color: green; }
<!-- #endif -->
</style>

Reverse Condition (#ifndef)

Use #ifndef to run code on all platforms except the specified one, e.g., show a component on H5 and App but not on Mini‑program.

// #ifndef MP-WEIXIN
  // executed when not Mini‑program
// #endif

Practical Cases

Case 1: Different Share Logic

onShare() {
  // Mini‑program share
  // #ifdef MP-WEIXIN
  uni.showShareMenu({ withShareTicket: true })
  // #endif

  // App share
  // #ifdef APP-PLUS
  uni.share({ provider: 'weixin' })
  // #endif

  // H5 copy link
  // #ifdef H5
  uni.setClipboardData({ data: location.href })
  // #endif
}

Case 2: Different Back Navigation

goBack() {
  // Mini‑program native back
  // #ifdef MP-WEIXIN
  uni.navigateBack()
  // #endif

  // H5 browser back
  // #ifdef H5
  history.back()
  // #endif
}

Case 3: Different Styles (most common)

/* Mini‑program top padding */
<!-- #ifdef MP-WEIXIN -->
.container { padding-top: 20px; }
<!-- #endif -->

/* H5 no padding */
<!-- #ifdef H5 -->
.container { padding-top: 0; }
<!-- #endif -->

Additional Tips for Beginners

Use rpx for units – automatically adapts to all screen sizes.

Avoid advanced CSS selectors – not supported in Mini‑programs.

Do not use window / document – will cause errors on Mini‑program/App.

Prefer local image resources – faster and more reliable.

Test order – H5 → Mini‑program → App.

Common Troubleshooting

Conditional code not taking effect? Check platform identifier spelling and comment format (must use // #ifdef).

Mini‑program error “window is undefined”? Wrap H5‑only code with #ifdef H5.

Style works in Mini‑program but looks broken in H5? Separate styles with conditional compilation.

Code hints turn red in IDE? This is normal in HBuilderX and does not affect execution.