uni-app 组成和跨端原理【跨端开发系列】

🔗 uniapp 跨端开发系列文章：🎀🎀🎀

一、介绍 🎯

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

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

二、功能框架图 📋

从下面 uni-app 功能框架图可看出， uni-app 在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

三、基本语言和开发规范 📜

uni-app 代码编写，基本语言包括 js 、 vue 、 css 以及 ts 、 scss 等 css 预编译器。

在 app 端，还支持原生渲染的nvue，以及可以编译为 kotlin 和 swift 的uts。

DCloud 还提供了使用 js 编写服务器代码的 uniCloud云引擎。所以只需掌握 js ，你可以开发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）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。

编译器将开发者的代码进行编译，编译的输出物由各个终端的 runtime 进行解析，每个平台（Web、Android App、iOS App、各家小程序）都有各自的 runtime 。

四、编译器 🛠️

编译器运行在电脑开发环境。一般是内置在 HBuilderX 工具中，也可以使用独立的 cli 版。
开发者按uni-app规范编写代码，由编译器将开发者的代码编译生成每个平台支持的特有代码
- 在 web 平台，将.vue文件编译为 js 代码。与普通的 vue cli 项目类似
- 在微信小程序平台，编译器将 .vue 文件拆分生成 wxml、wxss、js 等代码
- 在 app 平台，将.vue文件编译为 js 代码。进一步，如果涉及 uts 代码：
  - 在 Android 平台，将.uts 文件编译为 kotlin 代码
  - 在 iOS平台，将 .uts 文件编译为 swift 代码
编译器分vue2版和vue3版
- vue2 版：基于 webpack 实现。
- vue3 版：基于 Vite 实现，性能更快。
编译器支持条件编译，即可以指定某部分代码只编译到特定的终端平台。从而将公用和个性化融合在一个工程中。

javascript 复制代码

// #ifdef  App
console.log("这段代码只有在App平台才会被编译进去。非App平台编译后没有这段代码")
// #endif

五、运行时（runtime）⚙️

runtime 不是运行在电脑开发环境，而是运行在真正的终端上。

uni-app 在每个平台（Web、Android App、iOS App、各家小程序）都有各自的 runtime 。这是一个比较庞大的工程。

在小程序端，uni-app 的 runtime，主要是一个小程序版的 vue runtime ，页面路由、组件、api等方面基本都是转义。
在 web端，uni-app 的 runtime 相比普通的 vue项目，多了一套ui库、页面路由框架、和uni对象（即常见API封装）。
在 App端，uni-app 的 runtime更复杂，可以先简单理解为DCloud也有一套小程序引擎，打包app时将开发者的代码和DCloud的小程序打包成了 apk 或 ipa 。当然，事实上DCloud确实有小程序引擎产品，供原生应用实现小程序化。

uni-app runtime 包括3部分：基础框架 、组件、API 。

基础框架 ：
- 包括语法、数据驱动、全局文件、应用管理、页面管理、js引擎、渲染和排版引擎等
- 在 web 和小程序上，不需要uni-app提供js引擎和排版引擎，直接使用浏览器和小程序的即可。但 app 上需要 uni-app 提供。
- App的 js引擎：App-Android上，uni-app 的 js 引擎是 v8 ，App-iOS是 jscore。
- App的渲染引擎：同时提供了2套渲染引擎， .vue 页面文件由 webview 渲染，原理与小程序相同； .nvue 页面文件由原生渲染，原理与 react native 相同。开发者可以根据需要自主选择渲染引擎。
组件：
- runtime中包括的组件只有基础组件，如<view>、<button>等。扩展组件不包含在uni-app的runtime中，而是下载到用户的项目代码中。（这些组件都是vue组件）
- 为了降低开发者的学习成本，uni-app的内置基础组件命名规范与小程序基本相同。
- 这几十个组件不管在哪个平台，已被处理为均有一致表现。
- 在小程序端，uni-app基础组件会直接转义为小程序自己的内置组件。在小程序的runtime中不占体积。
- 在web和android、iOS端，这几十个组件都在uni-app的runtime中，会占用一定体积，相当于内置了一套ui库。
- 组件的扩展：
  - 有了几十个基础组件，大多数扩展组件也都是基于这些基础组件封装的。比如官方提供的扩展ui库 uni ui 。
  - 在web平台，for web 的各种 ui库（如elementUI）也可以使用，但这些库由于操作了dom，无法跨端在app和小程序中使用。
  - 在App平台，uni-app也支持使用原生编程语言来自行扩展原生组件，比如原生的地图、ar等。
  - uni-app同时支持将微信自定义组件运行到微信小程序、web、app这3个平台。注意微信自定义组件不是vue组件。
API ：
- uni-app runtime内置了大量常见的、跨端的 API，比如联网( uni.request )、读取存储( uni.getStorage )
- 同时uni-app不限制各端原生平台的API调用。开发者可以在uni-app框架中无限制的调用该平台所有能使用的API。即，在小程序平台，小程序的所有API都可以使用；在web平台，浏览器的所有API都可使用；在iOS和Android平台，os的所有API都可以使用。
- 也就是说，使用uni-app的标准API，可以跨端使用。但对于不跨端的部分，仍可以调用该端的专有API。由于常见的API都已经被封装内置，所以日常开发时，开发者只需关注uni标准API，当需要调用特色端能力时在条件编译里编写特色API调用代码。
- ext API：web和app的runtime体积不小，如果把小程序的所有API等内置进去会让开发者的最终应用体积变大。所以有部分不常用的API被剥离为ext API。虽然仍然是uni.开头，但需要单独下载插件到项目下
- 小程序平台：uni对象会转为小程序的自有对象，比如在微信小程序平台，编写uni.request等同于wx.request。那么所有wx.的API都可以这样使用。
- web平台：window、dom等浏览器专用API仍可以使用。
- app平台：除了uni.的API，还可以使用 plus.的API、Native.js，以及通过 uts 编写原生插件，或者使用 java 和 objectC 编写原生插件。这些原生插件调用 os 的API并封装给js使用。
- 由于历史沿革，DCloud在开发app时有：5+App、wap2app、uni-app等3种模式。这3种方式的runtime在底层能力上是公用的，所有uni-app可以调用5+（也就是plus.xxx）的API。虽然都可以使用5+的系统能力，但uni-app的逻辑层运行在js层，渲染层是webview和原生nvue双选。而5+不区分逻辑层和渲染层，全部运行在webview里，在性能上5+不及uni-app。

DCloud还提供了插件市场，大多数用得着的组件和API都已经有现成的插件。

六、逻辑层和渲染层分离 ⛓️‍💥

在web平台 ，逻辑层（js）和渲染层（html、css），都运行在统一的 webview 里。

但在 小程序 和app 端，逻辑层和渲染层被分离了。

分离的核心原因是性能。过去很多开发者吐槽基于 webview 的 app性能不佳，很大原因是js运算和界面渲染抢资源导致的卡顿。

不管小程序还是 app ，逻辑层都独立为了单独的js引擎，渲染层仍然是 webview （app上也支持纯原生渲染）。

🔖注意事项：小程序 和 app 的逻辑层都不支持 浏览器专用 的 window、dom等 API。app只能在 渲染层 操作 window、dom ，即 renderjs 。

七、总结💢

在真正使用 uniapp 做开发之前一定要掌握这些基本知识，不然你在处理每个端之间的差异时，可能会疯掉。 😂