uni-app 学习笔记（四）编译器

前言

纯官网介绍，我觉得有价值就记录下来了，方便后续查找

一、编译器

uni-app能实现一套代码、多端运行，核心是通过编译器 + 运行时实现的

编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码
运行时：动态处理数据绑定、事件代理，保证Vue和平台宿主数据的一致性

二、编译器使用

根据创建方式，编译器在使用上也有差异

1. cli 方式创建的项目，编译器安装在项目下。编译器不会跟随HBuilderX升级
2. HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
3. 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器

三、条件编译

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

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

例如：

#ifdef H5 || MP-WEIXIN
需条件编译的代码
#endif

在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

%PLATFORM%的取值看官网介绍

各种条件编译

注意注释的写法不同

1. API的条件编译

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif

2. 组件的条件编译

<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!--  #endif -->

3. 样式的条件编译

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