乐趣区

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

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),不定时推送文章。

退出移动版