【每天学习一点点 day01】uniapp跨端原理 - 但行前路 莫问前程

哈喽大家好，2024年1月24日我将开启打卡【每天学习一点点】，主要内容为记录和分享每日学习内容，学习的类型不限（全凭个人兴趣，哈哈哈，不一定今天能学点啥）

day1 - uniapp开发app

1. uni-app开发app有三种开发方式

①vue ②nvue ③uts

2. uni-app的跨端原理

uni-app分编译器（compiler）和运行时（runtime）。uni-app能实现一套代码、多端运行，是通过这2部分配合完成的。

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

2.1 编译器

• 编译器（compiler）运行在电脑开发环境。一般是内置在HBuilderX工具中，也可以使用独立的cli版。
• 开发者按uni-app规范编写代码，由编译器将开发者的代码编译生成每个平台支持的特有代码
  • 在app平台，将.vue文件编译为js代码。进一步，如果涉及uts代码：
    • 在Android平台，将.uts文件编译为kotlin代码
    • 在iOS平台，将.uts文件编译为swift代码
• 编译器分vue2版和vue3版
  • vue2版：基于webpack
  • vue3版：基于Vite
• 编译器支持条件编译，即可以指定某部分代码只编译到特定的终端平台。从而将公用和个性化融合在一个工程中。

参考文档：什么是编译器 | uni-app官网 (dcloud.net.cn)

2.2 运行时

• runtime不是运行在电脑开发环境，而是运行在真正的终端上。
• uni-app在每个平台（Web、Android App、iOS App、各家小程序）都有各自的runtime。这是一个比较庞大的工程。
  • 在App端，uni-app的runtime更复杂，可以先简单理解为DCloud也有一套小程序引擎，打包app时将开发者的代码和DCloud的小程序打包成了apk或ipa。

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

1. 基础框架：

• • 包括语法、数据驱动、全局文件、应用管理、页面管理、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相同。开发者可以根据需要自主选择渲染引擎。【app-nvue 的视图层是基于 weex 改造的原生渲染视图】

1. 组件：

• • runtime中包括的组件只有基础组件，如等。扩展组件不包含在uni-app的runtime中，而是下载到用户的项目代码中。（这些组件都是vue组件）
  • 为了降低开发者的学习成本，uni-app的内置基础组件命名规范与小程序基本相同。
  • 这几十个组件不管在哪个平台，已被处理为均有一致表现。
  • 在小程序端，uni-app基础组件会直接转义为小程序自己的内置组件。在小程序的runtime中不占体积。
  • 在web和android、iOS端，这几十个组件都在uni-app的runtime中，会占用一定体积，相当于内置了一套ui库。
  • 组件的扩展：
    • 有了几十个基础组件，大多数扩展组件也都是基于这些基础组件封装的。比如官方提供的扩展ui库 uni ui
    • 在App平台，uni-app也支持使用原生编程语言来自行扩展原生组件，比如原生的地图、ar等。

1. API：

• • uni-app runtime内置了大量常见的、跨端的 API
  • 同时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.开头，但需要单独下载插件到项目下
  • app平台：除了uni.的API，还可以使用plus.的APINative.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。

参考文档：uni-app组成和跨端原理 | uni-app官网 (dcloud.net.cn)

2.3 渲染层与逻辑层分离

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

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

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

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

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

关于逻辑层和渲染层分离带来的注意事项，请详读

参考文档：逻辑层和视图层分离 | uni-app官网 (dcloud.net.cn)