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

追格官方小助手/ 2022年03月11日/ 小程序/ 浏览 4840

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,每个平台的代码都要单独维护,工作量几乎时要翻倍的增长的。

发表评论

暂无评论,抢个沙发...

客服 工单