uni-app 条件编译

条件编译可以使一套代码，在不同平台下执行不同的部份。比如在APP内执行A，在小程序内执行B。

条件编译可以出现在：template、style、script 三个模块内。在三个模块内编译代码也不一样。

比如在template内，输入ifdef 按回车，代码如下：

<!-- #ifdef APP-PLUS -->
在APP平台下执行这部份
<!-- #endif -->

比如在style内，输入ifdef按回车，代码如下：

/* #ifdef APP-PLUS */
.appstyle{
}
/* #endif */

比如在script内，输入ifdef按回车，代码如下： 

// #ifdef APP-PLUS
console.log('APP下执行');
// #endif

 

一、其中APP-PLUS表示APP平台。如果想在微信小程序中编译，只需要将APP-PLUS更改为MP-WEIXIN。

二、条件编辑还支持 || 语法（不支持 && 语法）。 ||表示在多个平台，比如：// #ifdef APP-PLUS || MP-WEIXIN 表示在APP或微信小程序平台下编译。

三、除了#ifdef 表示仅在某平台下编辑，还有 Ifndef 表示除了某平台不编译，其它平台下都编译

四、各平台值与对应的平台如下：

值	生效条件
VUE3	HBuilderX 3.2.0+ 详情(opens new window)
APP-PLUS	App
APP-PLUS-NVUE或APP-NVUE	App nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

 

五、pages.json 中也可以加入条件编译，比如：

// #ifdef APP-PLUS
{
  "path": "pages/api/speech/speech",
  "style": {
       "navigationBarTitleText" : "语音识别"
   ｝
}
// #endif

 

六、static目录编译

static文件夹内存储数据文件的，默认情况下它会在APP打包时整体打包进去。

我们可以将不同平台下的静态文件存储在不同文件夹内（名称名同编译平台名的小写字母），这样打包时，就不会把微信小程序的静态文件也打包到app内。比如：

/static
/static/h5 存储h5平台下的静态文件
/static/app 存储app平台下的静态文件

 

七、整体目录条件编译

如果想把各平台的页面文件更彻底的分开，也可以在uni-app项目根目录创建platforms目录，然后在下面进一步创建app-plus、mp-weixin等子目录，存放不同平台的文件。
platforms目录下只支持放置页面文件（即页面vue文件），如果需要对其他资源条件编译建议使用static 目录的条件编译