uniapp 一套代码多端运行是如何实现的

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

编译器：将uni-app统一代码编译生成每个平台支持的特有代码；如在小程序平台，编译器将.vue文件拆分生成wxml、wxss、js等代码。

个人理解，这里说的编译器，和我们平时说的C++或其他的语言编译器，还是有所不同的。语言编译器，是将语言编译成CPU可识别的指令集。而uniapp里的编译器，其实是一种代码转换器。将uniapp规则的代码转换成符合各个平台规则的代码。

运行时：动态处理数据绑定、事件代理，保证Vue和平台宿主数据的一致性；

这里说的运行时，其实就是一些js库（函数），用于支持各个平台的功能。

uni-app项目根据所依赖的Vue版本不同，编译器的实现也不同：

vue2：uni-app编译器基于wepback实现

vue3：uni-app编译器基于Vite实现，编译速度更快，详见：vue3和vite双向加持，uni-app性能再次Ti升(opens new window)

uni-app项目根据创建方式的不同，编译器在使用上也有差异：

cli 方式创建的项目，编译器安装在项目下。编译器不会跟随HBuilderX升级。如需升级编译器，可以使用 @dcloudio/uvm 管理编译器的版本，如 npx @dcloudio/uvm。

HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。

已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。

uniapp的好处就是抹平了各个平台之间大部分的差异，而且使得开发者可以使用vue的方式快速开发，极大的提供了开发者的效率。

每个平台都有自己的特色功能，这些时uniapp无法提供的。面对这些差异时，开发者往往多有抱怨，因为不得不使用烦人的条件编译。但是，还是要多想想使用uniapp的好处，如果没有uniapp，每个平台的代码都要单独维护，工作量几乎时要翻倍的增长的。