likes
comments
collection
share

uni-app的编译流程及原理总结

作者站长头像
站长
· 阅读数 9

介绍

uni-app 是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app 跨端原理

uni-app ，实现一套代码多端运行主要是 编译器和运行时（runtime） 这两部分配合完成的， 编译器将开发者的代码进行条件编译。

编译阶段

UniApp通过抽象和封装，将不同平台的底层API和功能统一为一套接口，可以使用相同的代码来处理不同平台的操作，实现一套代码跨平台开发。 通过在代码中使用条件编译指令来针对不同平台编写特定的代码，可以根据目标平台执行不同的代码逻辑，以处理平台差异。这有助于在保持代码复用的同时，解决特定平台的问题，编译的输出物由每个平台各自的runtime进行解析。

以下是条件编译的代码示例，可以通过 ifdef MP-WEIXIN 、#ifdef H5 等 区分不同平台，编译时根据不同平台编译对应的代码

      <!-- #ifdef MP-WEIXIN -->
      <view @navclick="goBack" :title="userinfo.title" />
       </view>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <view class="nav-bar">
        <view class="back-box" @click="goBack">
        </view>
        <view>{{ userinfo.title }}</view>
      </view>
      <!-- #endif -->

编译产物

  1. 小程序端：以微信小程序为例，UniApp会将Vue组件和模板编译成微信小程序的WXML和WXSS，并将Vue的数据绑定机制转换成适用于小程序的数据绑定方式。其他小程序也会编译也和微信小程序类似。
  2. web 端：将.vue文件编译为js代码。与普通的vue cli项目类似
  3. App 端：在app平台，将.vue文件编译为js代码。进一步，如果涉及uts代码：
  • Android平台，将.uts文件编译为kotlin代码
  • iOS平台，将.uts文件编译为swift代码

uni-app使用了nvue(weex)，nue基于weex做了大量改造，其原理和react-native一样，通过js调用原生组件和API实现同原生一样的效果，但一直存在性能问题，所以Dcloud目前在主推uts, 与 ts 基本一致的语法规范，可以实现跨平台开发，但是uts并没有开源

uts 和React Native 、 Weex 都是通过js 调用原生代码来实现跨平台能力。不同点在于 React Native 和 Weex 是运行时将 js view 转为 native view 去渲染，那么 uts + uvue 就是编译时把 uts 转化为 kotlin 和 swift 去打包。

uni-app 编译器的特定编译

编译器分vue2版和vue3版

  • vue2版：基于webpack实现
  • vue3版：基于Vite实现，性能更快

编译器支持条件编译，即可以指定某部分代码只编译到特定的终端平台, 又可以使用统一

Runtime

  1. 小程序端，使用各小程序版的vue runtime ，页面路由，组件，api 等方面基本都是转义。 web 端，uni-app的runtime 相比普通的vue项目，多一套ui库，页面路由框架。
  2. App 端，使用了两套runtime和渲染引擎
  • .vue页面文件由webview渲染和web端类似；
  • .nvue页面文件由unit提供的runtime解析并由原生渲染，原理与react native相同。

uni-app架构设计

uni-app在跨平台的过程中，在不减少平台特色的前提下，可以调用平台专有能力。

  • 各个平台通过uni内置组件使用统一接口代码，经过条件编译最终调用公共api和各平台专有API( 包括 网络请求、数据存储、界面渲染)
  • uni内置组件和api 对App(Android iOS) API、各平台小程序以及h5平台专有API做了统一封装和适配
  • 底层包含 uni-app支持的所有平台的API 和 SDK, 包括Android iOS 专用的native.js, 可以直接调用原生代码，同时也包含了各平台小程序插件以及API 以及H5专有平台API

uni-app的编译流程及原理总结

HBuilderX编译器

主要功能特点：

  1. 代码编辑器：HBuilderX内置了代码编辑器，支持JavaScript、Vue.js、HTML、CSS等多种编程语言，具有代码高亮、智能代码补全、代码折叠等功能，以提高开发效率。
  2. 调试工具：HBuilderX集成了调试工具，可以在多个平台上进行应用程序的实时调试。开发者可以通过模拟器或真机调试来解决应用程序中的问题。
  3. 多平台编译：HBuilderX可以将uni-app代码编译成多个目标平台的应用程序，包括iOS、Android、H5、微信小程序、快应用等。这意味着你可以使用一套代码构建多个平台的应用，节省开发成本和时间。
  4. 插件市场：HBuilderX拥有一个丰富的插件市场，开发者可以根据自己的需求安装插件，以增强工具的功能，例如代码片段、主题、框架集成等。
  5. 项目管理：工具支持创建和管理uni-app项目，包括项目配置、依赖管理、资源管理等功能。
  6. 云打包：HBuilderX还提供了云打包服务，可以将应用程序打包上传到云端进行编译，无需本地配置编译环境。
  7. 版本控制：集成了版本控制系统，支持Git等常用的版本控制工具，方便团队协作开发。

总结

UniApp的原理在于将跨平台开发的抽象和封装层与编译、转换、构建等过程相结合，以实现将Vue.js代码编译成不同平台的应用程序。这种方式使得开发者可以更轻松地使用Vue.js技术栈来开发多个平台的应用，同时处理了底层平台差异和特性的问题，当然uni-app实现跨端开发的同时，也存在复杂UI以及不合理的数据绑定导致的性能等问题。相信随着uni-app的发展，越来越多的开发者会使用uni-app