### 介绍 uni-app 是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。 ### uni-app 跨端原理 uni-app ，实现一套代码多端运行主要是 **编译器和运行时（runtime）** 这两部分配合完成的，编译器将开发者的代码进行条件编译。 #### 编译阶段 UniApp通过抽象和封装，将不同平台的底层API和功能统一为一套接口，可以使用相同的代码来处理不同平台的操作，实现一套代码跨平台开发。通过在代码中使用条件编译指令来针对不同平台编写特定的代码，可以根据目标平台执行不同的代码逻辑，以处理平台差异。这有助于在保持代码复用的同时，解决特定平台的问题，编译的输出物由每个平台各自的runtime进行解析。以下是条件编译的代码示例，可以通过 ifdef MP-WEIXIN 、#ifdef H5 等区分不同平台，编译时根据不同平台编译对应的代码 ``` ``` #### 编译产物 1. 小程序端：以微信小程序为例，UniApp会将Vue组件和模板编译成微信小程序的WXML和WXSS，并将Vue的数据绑定机制转换成适用于小程序的数据绑定方式。其他小程序也会编译也和微信小程序类似。 2. web 端：将.vue文件编译为js代码。与普通的vue cli项目类似 3. App 端：在app平台，将.vue文件编译为js代码。进一步，如果涉及[uts](https://uniapp.dcloud.net.cn/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 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/88b82d7b725744dda1885303b4b338b7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1652&h=1235&s=168885&e=png&b=fbf4f1) ### HBuilderX编译器 #### 主要功能特点： 1. 代码编辑器：HBuilderX内置了代码编辑器，支持JavaScript、Vue.js、HTML、CSS等多种编程语言，具有代码高亮、智能代码补全、代码折叠等功能，以提高开发效率。 1. 调试工具：HBuilderX集成了调试工具，可以在多个平台上进行应用程序的实时调试。开发者可以通过模拟器或真机调试来解决应用程序中的问题。 1. 多平台编译：HBuilderX可以将uni-app代码编译成多个目标平台的应用程序，包括iOS、Android、H5、微信小程序、快应用等。这意味着你可以使用一套代码构建多个平台的应用，节省开发成本和时间。 1. 插件市场：HBuilderX拥有一个丰富的插件市场，开发者可以根据自己的需求安装插件，以增强工具的功能，例如代码片段、主题、框架集成等。 1. 项目管理：工具支持创建和管理uni-app项目，包括项目配置、依赖管理、资源管理等功能。 1. 云打包：HBuilderX还提供了云打包服务，可以将应用程序打包上传到云端进行编译，无需本地配置编译环境。 1. 版本控制：集成了版本控制系统，支持Git等常用的版本控制工具，方便团队协作开发。 ### 总结 UniApp的原理在于将跨平台开发的抽象和封装层与编译、转换、构建等过程相结合，以实现将Vue.js代码编译成不同平台的应用程序。这种方式使得开发者可以更轻松地使用Vue.js技术栈来开发多个平台的应用，同时处理了底层平台差异和特性的问题，当然uni-app实现跨端开发的同时，也存在复杂UI以及不合理的数据绑定导致的性能等问题。相信随着uni-app的发展，越来越多的开发者会使用uni-app