关于javascript:Taro-35-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 又是如何解决这些差别的。

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

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

.hml 用来形容布局构造。与小程序的模板文件相比，语法、反对的能力有少许区别。
.css 用来形容页面款式。
.js 用于解决页面和用户的交互，默认反对 ES6 语法。

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

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

CSS 方面，鸿蒙和 RN 一样有着诸多限度。例如不反对盒子模型、各组件只反对局部 CSS 属性等。

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

API 也是一样的，两者的 API 汇合有局部交加，用法、性能上有差异。

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

语法差别能够通过编写运行时框架去解决；应用鸿蒙的组件、API 去尽可能地实现微信小程序标准的组件和 API，以抹平两者之间的应用差异。

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

Taro 在鸿蒙方面的兼容工作次要由 @tarojs/plugin-platform-harmony 插件来实现，开发者引入该插件即可编译为鸿蒙利用。它次要做了这些适配工作：

a) 模板

相熟 Taro 的同学都应该分明，Taro 在小程序端利用 <template> 标签的递归来渲染页面动静的 DOM 树。而鸿蒙中并没有 <template>，因而咱们应用自定义组件进行递归。

b) 运行时

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

c) 组件 & API

咱们应用鸿蒙的原生语法封装了合乎微信小程序标准的组件库和 API 库。在兼容微信小程序的属性的同时，也保留了鸿蒙独有的反对属性。

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

如您是新我的项目，降级 Taro 抉择鸿蒙模板即可；

旧我的项目须要依照如下办法进行手动配置：

首先须要装置 v3.5.0-canary.0 的 CLI 工具

npm i -g @tarojs/cli@canary

而后更新我的项目本地的 Taro 相干依赖：把 package.json 文件中 Taro 相干依赖的版本批改为 ~3.5.0-canary.0，再重新安装依赖。

如果装置失败或关上我的项目失败，能够删除 node_modules、yarn.lock、package-lock.json 后重新安装依赖再尝试。

（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'
  }
}

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

次要包含以下内容：

（1）注册开发者账号

（2）下载 DevEco Studio 安装包

（3）启动 DevEco Studio，依据工具疏导下载 HarmonyOS SDK

（4）新建 MyApplication JS 我的项目

（5）应用预览器或真机查看利用成果

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

运行命令

$ taro build —type harmony —watch

若您在步骤 2(2) 设置好了打包输入到鸿蒙我的项目的门路，即可查看 Taro 适配鸿蒙的利用成果。

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

接下来咱们会持续欠缺对鸿蒙的适配工作，预计会在 2022 年 Q1 公布 v3.5 正式版。

同时也心愿社区有更多的开发者参加共建，无论是提出 Issues、在论坛发帖、提交 PR 还是帮忙建设周边生态等，对咱们来说都是贵重的财产，让咱们一起把 Taro 建设的更强。

Taro 团队衷心感谢一路走来大家对咱们的反对，正是因为大家的期待、信赖催促咱们走向更好。

最初的最初，如果您有任何疑难，能够扫描下方二维码增加咱们的 Harmony 小助手进行反馈，感谢您的反对！

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。

关于javascript:Taro-35-canary-发布支持适配-鸿蒙

一、背景

二、实现细节

1. 鸿蒙与小程序的异同

1.1 我的项目组织

1.2 配置文件

1.3 款式

1.4 组件 & API

2. 兼容细节

2.1 Taro 能够解决什么？

2.2 鸿蒙插件

3. 架构图

三、应用办法

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

2. 装置 taro 适配鸿蒙插件

3. 筹备鸿蒙运行环境

4. 我的项目运行

四、最初