Taro 3.5 canary 发布:支持适配 鸿蒙

一、背景

鸿蒙作为华为自研开发的一款可以实现万物互联的操作系统,一经推出就受到了很大的关注,被国人寄予了厚望。而鸿蒙也没让人失望,今年 Harmony2.0 正式推出供用户进行升级之后,在短短的三个月内实现了 1.2 亿的装机量,并且在前不久的华为开发者大会上,华为宣布 Harmony2.0 的装机量已经突破了 1.5 亿。

众多应用厂商都逐步推出了适配的鸿蒙应用,Taro 作为一个开放式的 跨端跨框架 解决方案,不少开发者期待将小程序的能力移植到鸿蒙 OS 上,可以使用 Taro 开发鸿蒙 && OpenHarmony 应用。

鸿蒙的方舟开发框架提供类 Web 范式编程,支持使用 JS 开发 UI 层,其语法与小程序相接近。经过前期调研,可以沿用 Taro 现有的架构适配鸿蒙

今年 6 月份我们新建了支持鸿蒙的提案,希望能达成三大目标:

  • 开发者可以使用 Taro 开发鸿蒙应用。
  • 开发者可以把现有的 Taro 应用适配到鸿蒙平台。
  • 开发者可以使用 Taro 的反向转换工具,把原生开发的小程序转换为 Taro 应用,再适配到鸿蒙平台。

目前 Taro 和 OpenHarmony 建立了官方合作关系,并成立了跨平台 UI 兴趣小组,同时 Taro 与华为保持着内部沟通与分享,Taro 拥有的海量开发者和优秀案例,能有效补充鸿蒙生态。

二、实现细节

鸿蒙的 JS UI 语法与小程序类似,但毕竟两者底层原理不一样,不可避免地存在许多差异。接下来将简单介绍鸿蒙与小程序的主要差异,和 Taro 又是如何处理这些差异的。

1. 鸿蒙与小程序的异同

1.1 项目组织

鸿蒙的项目组织和小程序类似,有入口文件 app.js 、页面、自定义组件。

其中页面、自定义组件均由三类文件组成:

  • .hml 用来描述布局结构。与小程序的模板文件相比,语法、支持的能力有少许区别。
  • .css 用来描述页面样式。
  • .js 用于处理页面和用户的交互,默认支持 ES6 语法。

1.2 配置文件

和小程序规定的入口文件、页面文件、自定义组件各自对应一份配置文件不一样,鸿蒙 JS UI 的配置文件只有一份。

鸿蒙的路由和小程序一样是配置式的,需要在 JS UI 的配置文件中进行配置。

1.3 样式

CSS 方面,鸿蒙和 RN 一样有着诸多限制。例如不支持盒子模型、各组件只支持部分 CSS 属性等。

1.4 组件 & API

鸿蒙提供了一系列功能丰富的组件,与小程序的组件相比,命名、功能上略有差别。

API 也是一样的,两者的 API 集合有部分交集,用法、功能上有差别。

2. 兼容细节

2.1 Taro 可以解决什么?

Taro 适配鸿蒙致力于尽可能地抹平差异,但作为一个框架,注定有它能够解决和不能解决的问题。

语法差异可以通过编写运行时框架去处理;使用鸿蒙的组件、API 去尽可能地实现微信小程序规范的组件和 API,以抹平两者之间的使用差别。

而 CSS 的差异、组件和 API 能力上的差异等依赖着鸿蒙底层实现,Taro 是无法解决的。

Taro 3.5 canary 发布:支持适配 鸿蒙_第1张图片

2.2 鸿蒙插件

Taro 在鸿蒙方面的兼容工作主要由 @tarojs/plugin-platform-harmony 插件来完成,开发者引入该插件即可编译为鸿蒙应用。它主要做了这些适配工作:

a) 模板

熟悉 Taro 的同学都应该清楚,Taro 在小程序端利用