条件编译介绍

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

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

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

3、内置ANDROIDIOSMP(微信小程序平台)和NATIVE(Android 或 iOS)等定义,可以用于条件判断

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

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

5、需在微信开发者工具开始「条件编译」方可生效

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"
        }
    }
}

资源

定义在 app.json 内的 static 字段。正常情况下默认所有资源文件都被打包发布到所有平台,可以通过 static 字段配置特定每个目录/文件只能发布到特定的平台

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