uni-app 组成和跨端原理
基本语言和开发规范
uni-app 开发使用 JavaScript、Vue.js 和 CSS 作为核心语言，同时支持 TypeScript 和 SCSS 等 CSS 预编译器。在 App 端，还提供了原生渲染的 nvue 页面和可编译为 Kotlin 与 Swift 的 UTS 语言。DCloud 的 uniCloud 云引擎允许使用 JavaScript 编写服务器代码，使得开发者仅需掌握 JavaScript 即可实现 Web、Android、iOS、各种小程序及服务器端的全栈应用开发。
为了实现多端兼容并优化编译速度与运行性能，uni-app 遵循以下开发规范：
- 页面文件采用 Vue 单文件组件（SFC）规范，每个页面对应一个 .vue 文件。
- 组件标签接近小程序规范，具体可参考 uni-app 组件文档。
- 接口能力（JS API）类似小程序规范，但需将前缀如
wx、my替换为uni，详见 uni-app 接口文档。 - 数据绑定和事件处理遵循 Vue.js 规范，并补充了应用生命周期和页面生命周期。
- 如需兼容 App 端的 nvue 平台，建议使用 Flex 布局进行开发。
uni-app 的跨端能力依赖于编译器和运行时（runtime）的协同工作。编译器将开发者代码编译为各平台支持的特定代码，然后由各自平台的运行时解析执行。每个平台（如 Web、Android App、iOS App、各家小程序）都有其专用的运行时。
编译器
编译器运行在开发环境中，通常内置在 HBuilderX 工具中或可作为独立的 CLI 使用。它根据 uni-app 规范将代码编译为目标平台的特有代码：
- 在 Web 平台，.vue 文件被编译为 JavaScript 代码，类似于标准的 Vue CLI 项目。
- 在微信小程序平台，.vue 文件被拆分为 wxml、wxss 和 js 等文件。
- 在 App 平台，.vue 文件编译为 JavaScript 代码；如果涉及 UTS 代码，在 Android 上编译为 Kotlin，在 iOS 上编译为 Swift。
编译器分为 Vue 2 和 Vue 3 两个版本：Vue 2 版基于 Webpack，Vue 3 版基于 Vite，提供更快的性能。此外，编译器支持条件编译，允许指定代码仅在某些平台编译，从而实现工程中公用与个性化代码的融合。
更多编译器详情可参考官方编译器文档。
运行时（runtime）
运行时运行在终端设备上，每个平台都有其特定的实现，构成了一个复杂的工程体系。
- 在小程序端，uni-app 的运行时主要是小程序版的 Vue runtime，负责页面路由、组件和 API 的转义。
- 在 Web 端，运行时相比标准 Vue 项目增加了 UI 库、页面路由框架和 uni 对象（常见 API 封装）。
- 在 App 端，运行时更为复杂，可视为 DCloud 的小程序引擎，将代码打包为 APK 或 IPA；实际上，DCloud 确实提供了小程序引擎产品，用于原生应用的小程序化。
uni-app 运行时包括三个部分：基础框架、组件和 API。
-
基础框架：涵盖语法、数据驱动、全局文件、应用管理、页面管理、JavaScript 引擎、渲染和排版引擎等。在 Web 和小程序平台，直接使用浏览器和小程序的引擎；在 App 平台，uni-app 提供了 JavaScript 引擎（Android 用 V8，iOS 用 JSCore）和两种渲染引擎：.vue 文件由 WebView 渲染（类似小程序原理），.nvue 文件由原生渲染（类似 React Native），开发者可自行选择。
-
组件：运行时仅包含基础组件，如
<view>和<button>，其命名规范与小程序基本一致，以确保跨平台一致性。扩展组件不包含在运行时中，需下载到项目代码中。在小程序端，基础组件直接映射为平台内置组件，不占体积；在 Web 和 App 端，这些组件作为内置 UI 库占用一定体积。组件支持扩展：官方提供 uni UI 库；Web 平台可使用 Element UI 等（但涉及 DOM 操作，无法跨端）；App 平台支持原生语言扩展组件；同时，uni-app 支持将微信自定义组件运行到微信小程序、Web 和 App 平台。 -
API：uni-app 运行时内置了大量跨端 API，如
uni.request（网络请求）和uni.getStorage（存储读取）。开发者仍可调用各平台的原生 API：在小程序平台使用小程序 API；在 Web 平台使用浏览器 API；在 App 平台使用 plus API、Native.js 或通过 UTS 编写原生插件。部分不常用 API 被剥离为 ext API，需单独下载插件。由于历史原因，DCloud 的 5+ App、wap2app 和 uni-app 共享底层能力，但 uni-app 在逻辑层和渲染层分离上性能更优。
DCloud 还提供了插件市场，涵盖大多数常用组件和 API 的现成插件。
逻辑层和渲染层分离
在 Web 平台，逻辑层（JavaScript）和渲染层（HTML、CSS）统一运行在 WebView 中。但在小程序和 App 端，两者被分离以提升性能，避免 JavaScript 运算和界面渲染资源竞争导致的卡顿。
逻辑层独立为单独的 JavaScript 引擎，渲染层仍为 WebView（App 端也支持原生渲染）。因此，在小程序和 App 的逻辑层中，不支持浏览器专用的 window 和 DOM API；在 App 端，操作 window 和 DOM 需通过渲染层的 renderjs。
关于分离带来的注意事项，请参考性能优化文档。