利用 Taro 开辟鸿蒙原生应用 VOL1：当 Taro 碰到纯血鸿蒙
纯血鸿蒙即将到来在23年 8 月的「2023光阴为开辟者大会（HDC.Together）」上，华为正式官宣「鸿蒙Next」，这个更新的版本将移除全部的 AOSP 代码，彻底与 Android 切割，使其成为一个完全自主研发的操纵系统，这将去掉 40%左右多余的代码，使系统变得更加简洁、流畅。同时，会上也预告了将在来岁 1 月份发布面向全部开辟者的预览版，意味着还有一个多月纯血的鸿蒙就要与全部开辟者见面了，这不禁令人热血沸腾，分外期待。
https://i-blog.csdnimg.cn/blog_migrate/679682f36571251697c49d048fdcaed0.png
图一·鸿蒙 Next 计划
而近期关于鸿蒙的消息不停，各大互联网厂商，如阿里、美团、去哪儿、小红书等等，都已经官宣开展了开辟 ArkUI 版原生鸿蒙应用的消息，同时也都在各个雇用渠道公开高薪雇用鸿蒙工程师和专家，仿佛偌大的鸿蒙生态即将全面放开，这对于对鸿蒙适配呈观望态度的开辟者来说无疑是巨大的强心剂，鸿蒙应用开辟，好像真的行了。
https://i-blog.csdnimg.cn/blog_migrate/7e353db9bafebcaf383b5bf03bbf5733.png
图二·业界多家互联网公司渲染开辟鸿蒙原生应用
鸿蒙 ArkUI 是怎么个事儿
好了，吹了一波鸿蒙的彩虹屁，让我们来看看，鸿蒙应用开辟是个怎么个事儿。
从鸿蒙官网我们可以相识到，鸿蒙应用开辟利用方舟框架，即 ArkUI 框架，它支持两种方式，一种是利用 ArkTS，也就是声明式的开辟范式，另一种是利用 JS，即类 Web 的开辟范式，让我们来看看这两种开辟范式的区别。
•声明式开辟范式：采用基于 TypeScript 声明式UI语法扩展而来的 ArkTS 语言，从组件、动画和状态管理三个维度提供 UI 绘制能力。
•类Web开辟范式：采用经典的 HML、CSS、JavaScript 三段式开辟方式，即利用 HML 标签文件搭建布局、利用 CSS 文件描述样式、利用 JavaScript 文件处理逻辑。该范式更符合于 Web 前端开辟者的利用习惯，便于快速将已有的 Web 应用改造成方舟开辟框架应用。
https://i-blog.csdnimg.cn/blog_migrate/ad7c33f2600ebd70791044767f958570.png
图三·ArkUI 两种开辟范式区别
可以看出，显然，Web式的开辟范式较贴近Web前端开辟者的习惯，不外，它更实用于开辟简朴的卡片应用，Taro框架已经提供了对这种开辟范式的支持，可以查看 Taro && 鸿蒙、OpenHarmony开辟文档，然而，对于大型应用的开辟，声明式开辟范式可能更为合适。
你会在下文的语法介绍中发现，声明式开辟范式类似于 Flutter 和 Compose 的开辟方式，它对 Web前端开辟者来说可能必要肯定的学习本钱。但鉴于其实用于构建更高复杂度的应用，并且理论上的性能优于Web 式开辟范式，鸿蒙将主要推广这种开辟范式。
因此，对于我们这些有志于前端开辟的青年来说，更应该关注鸿蒙的ArkTS——即声明式开辟范式。
https://i-blog.csdnimg.cn/blog_migrate/2a7e0d627b1882d8d9425cd7f952893e.png
图四·ArkTS 架构
从声明式范式的架构图中可以看出，该架构主要采用了前后端分离的形式。在这个体系中，前端主要负责处理语法底子规范和 UI 组件等内容，这部分主要体现在 DSL 层。另一方面，后端则利用 C++ 进行开辟，主要负责支持前端的语法范式、组件以及渲染管线。
别的，语言运行时则利用了华为自研的方舟编译器，支持 JS、ArkTS 和 C++ 的混写。值得注意的是，方舟编译用具备 AOT（Ahead-Of-Time，即预编译）处理能力，这使得它能够将应用代码转化为统一的字节码，然后再通过 AOT 转化为呆板码，从而提拔应用的性能。
在架构的下一层，系统会对接基于 Skia 的自绘渲染引擎。在这个过程中，终端的全部渲染需求都会统一提交给渲染引擎，从而使得渲染结果得到提拔，这种设计理念不仅使系统在处理渲染任务时更加高效，同时也包管了渲染结果的高质量。
前面提到，声明式范式与类 Web 的开辟范式大有不同，我们可以从下面这段代码感受一下。
https://i-blog.csdnimg.cn/blog_migrate/9cb0fbb7705f7968c1760fd1930fd1d7.png
图五· ArkTS 底子语法
认识 Flutter 和 Compose 的朋侪们可以发现，声明式范式的 ArkTS 在 UI 描述上的写法与他们非常相似，而这段 ArkTS 代码也体现出与 Web 前端认识的 JS/TS 语言的不同，如界说自界说组件的 struct 关键字等等，在官方的解释中，ArkTS 是基于 TS 进行扩展的超集，以是这不就是最认识的生疏人么，这不禁让我们前端以为”我又行了“。
Taro 与 ArkTS 的联动
由于声明式范式与类 Web 范式天然的不同，对 Web 前端来说学习本钱还是有的，而且，相应的研发生态也得从零开始建立，之前我们沉淀的大量 Web 生态肯定是没法直接利用了，这对于前端转型 ArkTS 开辟来说还是存在挑衅的，那么有没有办法可以利用 Web 的开辟范式，来开辟 ArkTS 应用呢？这好像就进入了 Taro 最认识的领域了，以 Web 的开辟范式来统一各端开辟。
https://i-blog.csdnimg.cn/blog_migrate/979ada59a9f47f0001c77b2aec9b24e3.png
图六·Taro 支持的平台
前文提到，当前 Taro 已经支持了ArkUI 类 Web 的开辟范式，这为我们沉淀了很多的经验，固然，ArkTS 是一种全新的语法，为了实现对它的适配，我还是有不少的工作必要去做。
颠末对 ArkTS 语法的分析，其 UI 描述结构让人联想到 Flutter 三棵树中的 Widget Tree，那么我们首先想到的解决方案就是，将 React/Vue 运行时产生的捏造 DOM，以某种形式递归映射为 ArkTS 的自界说组件树。基于 Taro 3.0 中适配小程序的经验，我们想到可以在 ArkTS 情况中模仿 DOM/BOM API，将捏造 DOM 基于 DOM/BOM API 构建为 Taro DOM 树，然后再递归映射为自界说组件树，接着再走鸿蒙渲染。
https://i-blog.csdnimg.cn/blog_migrate/11506fb8b2619af45935a5b3db13360a.png
图七·Taro 适配小程序/鸿蒙原理
在今年 8 月的「2023光阴为开辟者大会（HDC.Together）」上，Taro 团队受邀分享了 Taro 适配鸿蒙 ArkUI 的技术方案，整体技术蹊径是受到认可的，同时在后续的适配过程中也得到了来自华为的技术支持，让我们的适配工作得以顺利进行。
https://i-blog.csdnimg.cn/blog_migrate/fee6704960687fb2e768d7692f0c89b2.png
图八·Taro 在 HDC 上技术分享
目前，基于上述思路，Taro React 适配鸿蒙 ArkTS 的工作已经进入收尾阶段，预计将在 12 月下旬发布可用版本，想要相识进展的朋侪可以查看这篇文档，根据相应分支来 follow 我们的进展，有条件的朋侪也可以自行实验调试。
https://i-blog.csdnimg.cn/blog_migrate/46866c43253156955354a374880a7dc1.png
图九·利用 Taro 开辟的应用 DEMO 编译后的代码
总结与展望
是不是有种突然结束，戛然而止的感觉？哈哈哈，本文是 「Taro 适配鸿蒙 ArkTS」系列文章的第一篇，算是先导预告片，在后续我们会陆续释出其他文章，比方详解 Taro 适配鸿蒙 ArkTS 原理、Taro 开辟 ArkTS 应用最佳实践、Taro 性能优化利器-半编译技术介绍等等，向社区介绍 Taro 的最新结果。
鸿蒙 ArkUI 的整体设计笔者以为是超前的，声明式范式、自绘渲染等等，吸收了近几年业界移动端技术的优点，如果开辟调试、研发生态等配套设施能够跟上业界领先的移动端开辟解决方案，还是大有可为的，期待鸿蒙 Next 为国产操纵系统书写新的篇章。
作者：京东零售 Taro 项目组
来源：京东零售技术 转载请注明来源
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]