一、背景

鸿蒙作为华为自研开发的一款可以实现万物互联的操作系统,一经推出就受到了很大的关注,被国人寄予了厚望。而鸿蒙也没让人失望,今年 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 是无法解决的。

2.2 鸿蒙插件

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

a) 模板

熟悉 Taro 的同学都应该清楚,Taro 在小程序端利用 <template> 标签的递归来渲染页面动态的 DOM 树。而鸿蒙中并没有 <template> ,因此我们使用自定义组件进行递归。

b) 运行时

运行时主要在鸿蒙端兼容了小程序的生命周期和数据更新方法 setData

c) 组件 & API

我们使用鸿蒙的原生语法封装了符合微信小程序规范的组件库和 API 库。在兼容微信小程序的属性的同时,也保留了鸿蒙独有的支持属性。

目前共适配了 29 个组件,16 类API。组件示例库可参考:taro-components-sample

3. 架构图

三、使用方法

如您是新项目, 升级 Taro 选择鸿蒙模板即可;

旧项目需要按照如下方法进行手动配置:

1. 把 Taro 升级到 v3.5.0-canary.0 版本

首先需要安装 v3.5.0-canary.0 的 CLI 工具

npm i -g @tarojs/cli@canary

然后更新项目本地的 Taro 相关依赖:把 package.json 文件中 Taro 相关依赖的版本修改为 ~3.5.0-canary.0,再重新安装依赖。

如果安装失败或打开项目失败,可以删除 node_modulesyarn.lockpackage-lock.json 后重新安装依赖再尝试。

2. 安装 taro 适配鸿蒙插件

(1)Taro 项目中安装鸿蒙插件 @tarojs/plugin-platform-harmony

$ yarn add --dev @tarojs/plugin-platform-harmony

(2)在 config/index.js 中增加编译配置


config = {
// 配置使用插件
plugins: ['@tarojs/plugin-platform-harmony'],
mini: {
// 如果使用开发者工具的预览器(previewer)进行预览的话,需要使用 development 版本的 react-reconciler。
// 因为 previewer 对长串的压缩文本解析有问题。(真机/远程真机没有此问题)
debugReact: true,
// 如果需要真机断点调试,需要关闭 sourcemap 的生成
enableSourceMap: false
},
// harmony 相关配置
harmony: {
// 【必填】鸿蒙应用的绝对路径
projectPath: path.resolve(process.cwd(), '../MyApplication'),
// 【可选】HAP 的名称,默认为 'entry'
hapName: 'entry',
// 【可选】JS FA 的名称,默认为 'default'
jsFAName: 'default'
}
}

3. 准备鸿蒙运行环境

开发鸿蒙软件需要用到 HUAWEI DevEco Studio,它提供了模板创建、开发、编译、调试、发布等服务。

主要包括以下内容:

(1)注册开发者账号

(2)下载 DevEco Studio 安装包

(3)启动 DevEco Studio,根据工具引导下载 HarmonyOS SDK

(4)新建 MyApplication JS项目

(5)使用预览器或真机查看应用效果

《初窥鸿蒙》 《华为开发者工具》《鸿蒙开发文档》

4. 项目运行

运行命令

$ taro build —type harmony —watch

若您在步骤 2(2) 设置好了打包输出到鸿蒙项目的路径,即可查看 Taro 适配鸿蒙的应用效果。

testHarmony 为您通过 DevEco Studio 创建的 JS 项目。

四、最后

接下来我们会继续完善对鸿蒙的适配工作,预计会在 2022 年 Q1 发布 v3.5 正式版。

同时也希望社区有更多的开发者参与共建,无论是提出 Issues、在论坛发帖、提交 PR 还是帮助建设周边生态等,对我们来说都是宝贵的财富,让我们一起把 Taro 建设的更强。

Taro 团队衷心感谢一路走来大家对我们的支持,正是因为大家的期待、信赖敦促我们走向更好。

最后的最后,如果您有任何疑问,可以扫描下方二维码添加我们的 Harmony 小助手进行反馈,感谢您的支持!

欢迎关注凹凸实验室博客:aotu.io

或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:

Taro 3.5 canary 发布:支持适配 鸿蒙的更多相关文章

  1. Taro 3 正式版发布:开放式跨端跨框架解决方案

    作者:凹凸曼 - yuche 从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验.今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望 Tar ...

  2. Taro 3.4 beta 发布: 支持 Preact 为应用开辟更多体积空间

    项目体积是困扰小程序开发者的一大问题,如果开发者使用 Taro React 进行开发,更是不得不引入接近 100K 的 React 相关依赖,这让项目体积变得更加捉襟见肘.因此,Taro v3.4 的 ...

  3. Taro 3.1 beta 发布: 开放式架构新增 4 端支持

    作者:凹凸曼-JJ 自 7 月初我们正式发布了 Taro 3,至今半年时间已然略去.期间我们不断地修复着问题,同时也在构想着下一个 minor 版本. 面对小程序平台越来越多的大环境,Taro 是选择 ...

  4. CAP 2.3版本发布,支持 MongoDB

    前言 经过2个月的调整及测试,CAP 2.3 版本终于发布了,这个版本最大的特性就是对于 MongoDB 的支持,感谢博客园团队的keke同学对于 MongoDB 支持所提供的 PR,相信随着博客园的 ...

  5. SmartIDE v0.1.16 已经发布 - 支持阿里&蚂蚁开源的国产 IDE OpenSumi

    SmartIDE v0.1.16 (Build 3137) 已经在2022年4月19日发布到稳定版通道,我们在这个版本中增加了阿里和蚂蚁发布的国产IDE OpenSumi的支持,以及其他一些改进.Sm ...

  6. Visual Studio Code 1.0发布,支持中文在内9种语言

    Visual Studio Code 1.0发布,支持中文在内的9种语言:Simplified Chinese, Traditional Chinese, French, German, Italia ...

  7. 发布支持多线程的PowerShell模块 —— MultiThreadTaskRunner

    应用场景 多线程在需要批量处理一些任务的时候相当有用,也更加有利于充分利用现有计算机的能力.所有主流的开发语言都支持多线程. 默认情况下,PowerShell作为一个脚本语言,是不支持多线程操作的,虽 ...

  8. robbe-1.2发布-支持最新版本的friso+WinNT下php各版本的dll

    robbe是建立在friso中文分词组建上的一个高性能php中文分词扩展.(只支持UTF-8编码) robbe-1.2: 1. friso近几天发布1.3了, 接口有些许变化, 更改robbe适合最新 ...

  9. 深蓝词库转换2.5发布——支持微软五笔,支持Linux和macOS和更多命令行功能

    最近利用晚上的时间,对很久没有新版本发布的深蓝词库转换进行了版本升级.本次升级主要包含的功能包括: 一.支持Win10自带的微软五笔输入法用户自定义短语的导入导出. 1.在转换输入法词库列表中选择“W ...

随机推荐

  1. Python - 一行代码查看当前操作系统默认的编码标准

    一句代码 在 cmd 中执行 > python3 -c 'import locale; print(locale.getpreferredencoding())' UTF-8

  2. 常见yaml写法-job

    apiVersion: batch/v1 kind: Job metadata: name: job-demo spec: template: metadata: name: job-demo spe ...

  3. Java学习(十七)

    Java多态的学习差不多有3个小时,老师还夹杂着一些编译器运用的知识. 这是多态的基本知识: 我们可以创建父类引用指向子类对象,这就是多态的一种.(这种也叫向下转型) Pet c=new Cat(); ...

  4. [loj519]数学上来先打表

    建立操作树,即1和3操作时i-1向i连边,2操作中k向i连边,然后dfs一遍 那么当我们走到一个节点,就执行该操作(修改也是操作),退出后取消该操作即可 于是相当于要维护一个东西,支持:1.加边:2. ...

  5. 收集的常用的CTF学习资源网站

    http://www.sec-wiki.com/skill/        安全技能学习路线(迷茫就看它) https://wiki.x10sec.org/       介绍了CTF各个方向的基础知识 ...

  6. 国内首家!腾讯云正式成为 FinOps 基金会顶级会员

    11月24日,腾讯云正式宣布加入FinOps基金会,作为国内首家FinOps基金会顶级会员,腾讯云将联合FinOps基金会,全面推进对FinOps标准和最佳实践的贡献,为企业提供云财务管理的最佳解决方 ...

  7. 【Tool】JDK8 安装

    JDK8 2019-07-26  14:05:21  by冲冲 1. 下载 通常前往官网 https://www.oracle.com/technetwork/java/javase/download ...

  8. Kubernetes Deployment 最佳实践

    零.示例 首先给出一个 Deployment+HPA+ PodDisruptionBudget 的完整 demo,后面再详细介绍其中的每一个部分: apiVersion: apps/v1 kind: ...

  9. Netty高性能网络应用框架对标P7面试题分享v4.1.70.Final

    概述 **本人博客网站 **IT小神 www.itxiaoshen.com 定义 Netty官网 https://netty.io/ 最新版本为4.1.70.Final Netty是一个异步的.事件驱 ...

  10. java 桥接模式实现代码

    写在前面 桥接模式:将抽象与实现分离,使它们可以独立变化.它是用组合/聚合关系代替继承关系来实现,从而降低了抽象和实现这两个可变维度的耦合度. 使用场景1:要绘制矩形.圆形.椭圆.正方形,绘制的图形需 ...