# Introduction to conditional compilation

In order to support cross-end projects, different platforms are presented differently/Logic requirements that support conditional compilation syntax.

  1. Current support wxml、wxs、js/ts、json,less/sass And other file types, resources are supported by configuration to distinguish between different platforms

2, the current support for the target platform are: mini-wechat, mini-android, mini- iOS

  1. Built-inANDROIDIOSMP(WeChat Mini Program Platform) andNATIVE(Android or IOS) can be used for conditional judgment

4, conditional compilation using annotation syntax, through different conditions to compile different content to different platform products, the rules are as follows:

  • wxml、wxs、js/ts、less/get Such documents are currently supported #define、 #if、 #Elif、 #endif Equiconditional grammar
  • json Adopt the Merge Condition Rule by mini-ios/Mini-Android Equal distinction
  • The conditional compilation rules for resources are defined in app.json within

5, need to start in the WeChat developer toolConditional compilationMay enter into force

# wxml

  <!-- #if MP -->
  <view class="test-view">wechat</view>
  <!-- #elif IOS -->
  <view class="test-view">iOS</view>
  <!-- #elif ANDROID -->
  <view class="test-view">android</view>
  <!-- #endif -->

# wxss

.test-view{
  /* #if MP */
  color: red
  /* #elif IOS */
  color: green
  /* #elif ANDROID */
  color: yellow
  /* #endif */
}

# js/ts

// #if MP
wx.showToast({
    title: "wechat toast"
})
// #elif IOS
wx.showToast({
    title: "iOS toast"
})
// #elif ANDROID
wx.showToast({
    title: "Android toast"
})
// #endif

# json

{
    "window": {
        "navigationBarTitleText": "Weixin",
    },
    "mini-wechat":  {
        "window": {
        "navigationBarTitleText": "wechat demo"
        }
    },
    "mini-ios": {
        "window": {
        "navigationBarTitleText": "iOS demo"
        }
    },
    "mini-android":  {
        "window": {
            "navigationBarTitleText": "android demo"
        }
    }
}

# Resources

Defined in the app.json Inner static Fields. By default, all source files are packaged for distribution to all platforms, and can be downloaded via the static Field configuration specific to each directory/Documents can only be posted to a specific platform

{
    "static": [
        {
        "pattern": "miniprogram/pages/logs/*", // Glob syntax support
        "platforms": ['mini-ios']
        }
    ]
}