想要实现一套适配多个平台，有很大的门槛就是实现各平台的兼容。

虽然 已经将跨平台兼容处理的组件及 API 等进行了封装，日常开发过程中，我们按照 规范开发就可以保证大部分业务在各平台兼容。

但是有时会因为某个平台的开发特性，出现不兼容的情况。比如单平台适配的样式、第三方授权或者支付。

是难得的在跨端的过程中不牺牲各平台特色的框架，出现开发差异的时候，可以使用条件编译来做适配，实现在项目中不用平台的特色。本小节我们来了解一下条件编译的使用。

条件编译是用特殊的注释作为，在编译时根据这些特殊的注释，将注释里面的编译到不同平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

实例：

这样可能也比较抽象，下面我们用前面小节做的弹窗给大家举个实际项目的例子。

编辑 pages/index/index.vue ，在弹窗组件的外面条件编译，设置仅在H5平台弹窗。
实例：

<!-- #ifdef H5 -->
<Login v-if="isShow" :text="text" @isShow="getShow"></Login>
<!-- #endif -->

Tips：条件编译是注释的状态，不要写错哦~

点击工具栏–运行–运行到内置浏览器，内置浏览器是H5平台，所以弹窗会。

弹窗在 H5 平台上面，其他平台上面。
实例：

<!-- #ifndef H5 -->
<Login v-if="isShow" :text="text" @isShow="getShow"></Login>
<!-- #endif -->

弹窗在 H5 平台和平台上面，其他平台上面。
实例：

<!-- #ifndef H5 || MP-WEIXIN -->
<Login v-if="isShow" :text="text" @isShow="getShow"></Login>
<!-- #endif -->

条件编译是用特殊的注释作为，在编译时根据这些特殊的注释，将注释里面的编译到不同平台。

也就是%PLATFORM% 可取值如下：

接下来我们来看一下按钮样式的条件编译，在不同的平台不一样的颜色。

将 pages/index/index.vue 中，我们给 Login 组件上面加的条件编译去掉。来编辑 components/login/login.vue 中的样式部分。
实例：

/*H5平台按钮红色，按钮蓝色*/
button {
  /* #ifdef H5 */
  background:red;
  /*  #endif  */
  /* #ifdef MP-WEIXIN */
  background:blue;
  /*  #endif  */
}

点击工具栏–运行–运行到内置浏览器，测试H5平台。

我们来演示一下如何在不同平台不同的信息。

编辑 pages/index/index.vue ，在 data 中编辑。
实例：

点击工具栏–运行–运行到内置浏览器，测试H5平台。

点击工具栏–运行–运行到模拟器–微信开发者工具，测试平台。

用条件编译的方案，来处理不同平台的特性或差异，优雅的完成了各个平台个性化的实现。本节课程我们主要学习了 神奇的条件编译，是不是一学就会，非常简单。本节课程的需要掌握的重点如下：