什么是条件编译

发布时间：2023-04-24 14:15:07 所属栏目：教程来源：

导读：想要实现一套代码适配多个平台，有一个很大的门槛就是实现各平台功能的兼容。

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

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

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

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

uni-app 是一个难得的在跨端的过程中不牺牲各平台特色的框架，出现开发差异的时候，可以使用条件编译来做适配，实现在一个项目中调用不用平台的特色功能。

什么是条件编译

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

实例：

// 表示代码仅在 H5 平台上面执行，其他平台不执行
#ifdef H5
需条件编译的代码
#endif
// 表示代码在 H5 平台上面不执行，其他平台上面执行
#ifndef H5
需条件编译的代码
#endif
// 表示代码在 H5 平台和 App 平台上面执行，其他平台上面不执行
#ifndef H5 || APP-PLUS
需条件编译的代码
#endif
这样可能也比较抽象，下面我们用前面小节做的登录弹窗给大家举个实际项目的例子。

登录弹窗组件条件编译

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


<Login v-if="isShow" :text="text" @isShow="getShow"></Login>

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

测试效果
点击工具栏–运行–运行到内置浏览器，内置浏览器是H5平台，所以登录弹窗会显示。

点击工具栏–运行–运行到小程序模拟器–微信开发者工具，因为我们用条件编译设置了仅在H5平台显示登录弹窗，所以登录弹窗不会显示。

运行到其他平台也不会显示登录弹窗，大家可以自己测试一下。

其他条件编译的用法
登录弹窗在 H5 平台上面不显示，其他平台上面显示。
实例：


<Login v-if="isShow" :text="text" @isShow="getShow"></Login>

登录弹窗在 H5 平台和微信小程序平台上面显示，其他平台上面不显示。
实例：


<Login v-if="isShow" :text="text" @isShow="getShow"></Login>

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

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!