# 条件编译介绍

为了支持跨端项目不同平台有不同呈现/逻辑的需求，支持了条件编译语法。

1、目前支持 wxml、wxss、js/ts、json，less/sass 等文件类型，资源支持通过配置区分不同平台。

2、目前支持的目标平台有：mini-wechat、mini-android、mini-ios。

3、内置 ANDROID、IOS、MP（微信小程序平台）和 NATIVE（Android 或 iOS）等定义，可以用于条件判断。

4、支持 || 语法表示同时兼容多种条件，如<!-- #if MP || ANDROID -->，（json 内不支持）。

5、条件编译采用注释语法，通过不同的条件编译不同的内容到不同的平台产物中，规则如下：

• wxml、wxss、js/ts、less/sass 等文件目前支持 #define、#if、 #elif、#endif 等条件语法。
• json 采用合并条件规则，通过 mini-ios/mini-android 等区分。
• 资源的条件编译规则定义在 app.json 内。

6、需在微信开发者工具勾选「详情 - 本地设置 - 启用条件编译」后方可生效。

注意：使用了第三方框架的小程序在被其工具链编译后可能丢失条件编译的写法，如注释写法。请开发者自行注意。

# 一、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 -->

  <!-- #if MP || ANDROID -->
  <view class="test-view">mp || android</view>
  <!-- #endif -->

# 二、wxss 语法格式（css/sass/less 适用）

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

  /* #if MP || ANDROID */
  background-color: black;
  /* #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

// #if MP || IOS
wx.showToast({
    title: "mp || ios"
})
// #endif

# 四、json 语法格式

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

# 五、资源配置

定义在 app.json 内的 static 字段可用于进行不同平台的资源配置。正常情况下默认所有资源文件都被打包发布到所有平台，但可以通过 static 字段配置特定某个目录/文件只能发布到特定的平台。语法格式如下：

{
    "static": [
        {
        "pattern": "miniprogram/pages/logs/*", // 支持glob语法
        "platforms": ['mini-ios']
        }
    ]
}