# 条件编译介绍
为了支持跨端项目不同平台有不同呈现/逻辑的需求,支持了条件编译语法。
1、目前支持 wxml、wxs、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、wxs、js/ts、less/saaa 等文件目前支持 #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
.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']
}
]
}