app前端源码怎么编译-#ifdefMP 在 uni-app 开发中意味着什么？条件编译

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

跨端兼容

uni-app将常用的组件和JSAPI封装到框架中。 开发者按照uni-app规范开发即可保证多平台兼容性，大部分业务都可以直接满足。

但每个平台都有自己的特点，所以会存在一些难以跨平台的情况。

编写大量的ifelse会导致代码执行性能不佳，管理混乱。 编译到不同的项目后进行二次修改，会让后续的升级变得非常麻烦。 在C语言中，通过#ifdef和#ifndef的方法，针对windows、mac等不同操作系统编译出不同的代码。 uni-app参考了这一思想，为uni-app提供了条件编译手段，高贵地在一个项目中完成了平台的个性化实现。

条件编译 条件编译使用特殊注释作为标记。 编译时，注释上面的代码会根据这个特殊的注释编译到不同的平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称
#ifdef APP-PLUS
需条件编译的代码
#endif
仅出现在 App 平台下的代码
#ifndef H5
需条件编译的代码
#endif
除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif

APP-PLUSAppHTML5规格APP-PLUS-NVUEAppnvueWeex规格H5H5

MP-WEIXIN 陌陌小程序 陌陌小程序 MP-ALIPAY 支付宝小程序 支付宝小程序 MP-BAIDU 百度小程序 百度小程序 MP-TOUTIAO 头条小程序 头条小程序 MP-QQQQ 小程序（目前仅 cli 版本支持） MP陌陌小程序/支付宝小程序/百度小程序/今日头条小程序/QQ小程序

支持的文件

.vue.js.csspages.json 预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

注意： 条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 ；

API 的条件编译

// #ifdef  %PLATFORM%

特定于平台的 API 实现

// #endif

例如下面的代码只出现在App下：

例如以下代码在H5平台上不会出现：

它不仅支持单平台的条件编译，还支持多平台的同时编译。 使用|| 分隔平台名称。

例如，在App和H5平台上会出现以下代码：

组件的条件编译

平台特有的组件

例如，以下广告组件只会出现在陌陌小程序中：

样式化条件编译

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

注意：对于样式的条件编译，无论是css还是sass/scss/less/stylus等预编译语言，都必须使用/comment/。

下面的页面在pages.json中进行有条件编译，并且仅在运行到应用程序中时才会进行编译。

静态目录的条件编译引用的静态资源在不同平台上也可能不同。 这个问题可以通过静态条件编译来解决。 在静态目录下新建一个不同平台的专属目录（目录名称与%PLATFORM%取值范围相同，但是（所有字母均为大写字母）。专属目录中的静态资源只会在特定平台上编译。

如下目录结构所示，a.png仅在陌陌小程序平台上编译，b.png在所有平台上都会编译。

整体目录条件编译如果想要更完整的分离各个平台的页面文件，还可以在uni-app项目根目录下创建platforms目录，然后在下面进一步创建APP-PLUS、MP-WEIXIN等子目录存储不同平台的文件。 文档。

HBuilderX 支持 HBuilderX 为 uni-app 的条件编译提供了丰富的支持：

代码块支持

在HBuilderX中开发uni-app时，通过输入ifdef可以快速生成条件编译的代码片段，并带有正确的注释和快速选择。

在HBuilderX中，ctrlalt/可以生成正确的注释（js://comment、css: /*comment*/、vue/nvue template:）。

正确标注、快速选择

在HBuilderX中，ctrlalt/可以生成正确的注释（js://comment、css: /*comment*/、vue/nvue template:）。

请注意，Android 和 iOS 平台不支持通过条件编译进行区分。 如果需要区分Android和iOS平台，请通过调用uni.getSystemInfo获取平台信息。 从HBuilderX1.9.10开始，支持ifios和ifAndroid代码块，可以方便地进行编辑和判断。

一些跨端工具可以提供js的条件编译或者多态性，但这对于实际开发来说是远远不够的。 uni-app不仅仅是处理js，任何代码都可以在多终端条件下编译，可以真正解决实际项目的跨终端问题。 另外，所谓的多态性在实际开发中会导致大量的冗余代码，不利于复用和维护。 例如，陌陌小程序的主题颜色是红色app前端源码怎么编译，而百度支付宝小程序则是红色。 如果你的应用程序想要使颜色适应不同的平台，只有条件编译的代码量最低，也最容易维护。

有些公司的产品运营总是为不同的平台提供不同的需求，但这并不是拒绝uni-app的理由。 关键在于项目中有更多复用的代码还是更个性化的代码。 通常，有更多的重用代码app前端源码怎么编译，因此它应该始终是通用的。 个性化的代码放在不同平台的目录下，进行差异化维护。