使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南

京东云开发者
• 阅读 365

随着鸿蒙系统的不断完善,许多应用厂商都希望将自己的应用移植到鸿蒙平台上。最近,Taro 发布了 v4.0.0-beta.x 版本,支持使用 Taro 快速开发鸿蒙原生应用,也可将现有的小程序转换为鸿蒙原生应用。

在 《使用 Taro 开发鸿蒙原生应用》 系列文章中,我们已经介绍了 鸿蒙的基本概念 和 Taro 适配鸿蒙的原理。本文作为该系列的第三篇,将正式为开发者提供一份完整的鸿蒙应用开发指南,帮助大家使用 Taro 开发自己的第一个鸿蒙应用。

一、环境配置

首先要准备鸿蒙运行所需的环境,根据参考文档提示的步骤在 HUAWEI DevEco Studio 的 IDE 中完成 MyApplication 项目的创建,熟悉鸿蒙开发者工具的预览查看等功能。

步骤 1:安装、配置 DevEco Studio

1.登录 HarmonysOS 应用开发门户,点击右上角注册按钮,注册开发者帐号;

2.进入 HUAWEI DevEco Studio 套件货架中心,申请白名单,由于目前最新版本的 OpenHarmony SDK 和 IDE 仍未对外开发,因此个人开发者若想尝鲜,需要先申请白名单成为合作伙伴后才能继续进行下面的步骤;

3.白名单申请通过后,进入货架,下载 IDE 版本为 DevEco Studio 4.0.3.700 的 DevEcoStudio4.0-API10 开发套件;

4.下载完成后,打开 IDE 安装包进行安装,安装成功后启动 DevEco Studio,根据 引导 解压套件里附带的 SDK 压缩包,并根据引导在 IDE 中配置好 SDK 的使用路径;

5.SDK 配置成功后,看到设置面板中各个 SDK 的版本号与下面的图片中相同,则标识配置成功了。

使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南

步骤 2:创建 Harmony 主项目

1.创建新项目,选择需要开发的设备,然后 Mode 选择 Stage 模型,Compile SDK 选择 4.0.0(API 10),按照引导操作后一个新的项目就被创建出来了;

2.关注目录 entry/src/main/ets/pages/Index.ets 下面的文件,熟悉文件结构。pages 目录下为页面入口,新建项目的页面目录会包含若干个 .ets 文件,应用级配置信息位于 build-profile.json5,当前的模块信息 、编译信息配置项位于 entry/build-profile.json5。项目结构详情;

3.创建好项目后,根据 配置插件指引,将下载的套件附带的插件配置在项目配置中。

步骤 3:预览 & 调试

DevEco Studio 目前只支持在华为提供的测试真机上进行预览与调试,模拟器调试将在不久后支持。

1. 预览:

用户真机与电脑相连,打开开发者模式,即可在真机看到效果。这里需要注意的是,真机需要使用华为侧提供的测试机,测试机中会安装纯鸿蒙的系统镜像,能够体验到完整的鸿蒙系统功能,纯鸿蒙应用目前还不能完美地在 HarmonyOS 4.0 的商用机侧跑起来。

2. 调试:

链接上真机后,选择好对应的入口模块,在项目代码中打上断点等信息,在编译器中启动调试即可。

使用 Taro 开发鸿蒙原生应用 —— 快速上手,鸿蒙应用开发指南

二、Taro 开发流程

步骤 1:安装 Taro v4.0.0-beta.x

1. 安装 CLI

安装 v4.0.0-beta.x 版本的 Taro CLI:

npm i -g @tarojs/cli@beta

2. 安装项目依赖

如您是新项目,创建项目时推荐创建编译器为 vite 的模板,若创建项目选择了 webpack 或 webpack5 的模板,则需要手动安装 vite、terser 以及 @tarojs/vite-runner。

$ npm i vite@^4.2.0
$ npm i terser@^5.4.0
$ npm i @tarojs/vite-runner@beta

旧项目需要把 package.json 文件中 Taro 相关依赖的版本修改为 ~4.0.0-beta.0,再重新安装依赖,并添加上述三个和 vite 相关的依赖。

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

步骤 2:安装 Taro 适配鸿蒙插件

$ npm i @tarojs/plugin-platform-harmony-ets@beta

步骤 3:修改 Taro 编译配置

config/index.ts

config = {
  // 配置使用插件
  plugins: ['@tarojs/plugin-platform-harmony-ets'],
  // harmony 相关配置
  harmony: {
    // 将编译方式设置为使用 Vite 编译
    compiler: 'vite',
    // 【必填】鸿蒙主应用的绝对路径,例如:
    projectPath: path.resolve(process.cwd(), '../MyApplication'),
    // 【可选】HAP 的名称,默认为 'entry'
    hapName: 'entry',
    // 【可选】modules 的入口名称,默认为 'default'
    name: 'default',
  },
}

步骤 4:修改鸿蒙主项目的权限配置

根据项目需要在鸿蒙主项目 entry/src/main/module.json5 中所需要使用到的机器权限。

{
  //...
  "requestPermissions": [
    {
      "name": "ohos.permission.VIBRATE"
    },
    {
      "name": "ohos.permission.GET_WIFI_INFO"
    },
    {
      "name": "ohos.permission.GET_NETWORK_INFO"
    },
    {
      "name": "ohos.permission.SET_NETWORK_INFO"
    },
    {
      "name": "ohos.permission.INTERNET"
    },
    {
      "name": "ohos.permission.GET_BUNDLE_INFO"
    },
    {
      "name": "ohos.permission.LOCATION"
    },
    {
      "name": "ohos.permission.APPROXIMATELY_LOCATION"
    },
    {
      "name": "ohos.permission.LOCATION_IN_BACKGROUND"
    }
  ]
}

步骤 5:编译运行

package.json 里添加以下的 scripts 命令,运行命令,Taro 可将打包结果生成到配置的鸿蒙主项目路径中。

"scripts": {
    "build:harmony": "taro build --type harmony",
    "dev:harmony": "npm run build:harmony -- --watch"
}

步骤 6:预览 & 调试

开发者可根据上面运行鸿蒙 demo 项目的方式进行预览与调试。

三、注意事项

1. 样式

布局

鸿蒙没有实现盒子模型,因此目前在实现上是使用鸿蒙的 Flex 和 Column 实现的。

尺寸单位

目前 Taro 转鸿蒙支持使用 px、vw、vh 作为数据的单位,诸如 rem、em 等单位则暂时不支持。

2. 调试

真机调试

当前,真机调试需要使用华为侧提供的测试机,测试机中会安装纯鸿蒙的系统镜像,能够体验到完整的鸿蒙系统功能,纯鸿蒙应用目前还不能完美地在 HarmonyOS 4.0 的商用机侧跑起来。

SDK 版本问题

由于鸿蒙侧迭代 SDK 的速度较快,目前 Taro 适配的 SDK 版本为最新的 API 10 版本,对于 API 版本为 9 的鸿蒙项目可能会存在组件和 API 的不兼容和不支持。

3. 与小程序的差异

当下,虽然 Taro 适配鸿蒙 ArkTS 的工作已经基本完成,但在适配过程中,我们也发现了一些暂时无法解决或者计划后续解决的遗留问题。

组件和 API

由于鸿蒙平台和小程序平台本身就存在着较大的差异,因此一些小程序的组件和 API 规范,在鸿蒙平台会没有办法重新实现,如与登录和账号信息相关的 API 以及 live-player 等和直播相关的组件。

样式解析存在一定的限制

由于在 ArkTS 中,会使用声明式 UI 来对 UI 的样式进行描述,因此不存在 sass 和 css 等样式文件,因此 Taro 在适配鸿蒙 ArkTS 时,会在编译时去解析这些样式文件。并将这些样式以内联的方式写入到组件的 TS/JS 代码中。

正常的样式基于 W3C 规范,存在着类名级联和样式继承的行为,由于开发者在代码中的写法各异,Taro 没有办法在编译时获取准确的节点结构以及节点类名信息,因此无法支持这两种行为。

另外,由于样式的解析是基于组件文件的纬度的,因此样式文件只能应用于被其引用的组件文件中,而不能跨文件应用,并且样式文件也只支持类选择器。

四、总结

本指南详细介绍了鸿蒙运行环境的配置、使用 Taro 开发鸿蒙应用的步骤和注意事项。我们希望,开发者们通过本指南,可以快速上手并高效开发自己的鸿蒙应用,顺利的进入到鸿蒙应用开发的新领域。

让我们一起开启鸿蒙应用开发的新篇章吧!

作者:京东零售 利齐诺

来源:京东云开发者社区 转载请注明来源

点赞
收藏
评论区
推荐文章
Stella981 Stella981
3年前
HarmonyOS应用开发项目实战
鸿蒙2.0已经发布了有段时间了,目前网上也有些小demo了,但是缺乏稍微大点的项目代码。我准备计划开发一个稍微正式点的项目,我写了个初略的项目需求清单,来体验鸿蒙应用开发。目前我已经着手实现了其中的一些重要功能,某些功能发现鸿蒙暂时不支持,但是还是先写上吧,后面慢慢摸索。我会陆续更新连载此贴,一步步从0基础讲解项目开发过程,然后巩固鸿蒙应用开发知识点。有错误
京东云开发者 京东云开发者
11个月前
使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙 | 京东云技术团队
纯血鸿蒙即将到来在今年8月的「2023年华为开发者大会(HDC.Together)」上,华为正式官宣「鸿蒙Next」,这个更新的版本将移除所有的AOSP代码,彻底与Android切割,使其成为一个完全自主研发的操作系统,这将去掉40%左右多余的代码,使系统
京东云开发者 京东云开发者
10个月前
使用 Taro 开发鸿蒙原生应用 —— 探秘适配鸿蒙 ArkTS 的工作原理
背景在上一篇文章中,我们已经了解到华为即将发布的鸿蒙操作系统,以及各个互联网厂商开展鸿蒙应用开发的消息。其中,Taro作为一个重要的前端开发框架,也积极适配鸿蒙的新一代语言框架——ArkTS。本文将深入探讨Taro适配鸿蒙ArkTS框架的工作原理,接下来我
爱学it学无止境 爱学it学无止境
3个月前
2024 鸿蒙零基础快速实战-仿抖音App开发( ArkTS版 )|完结
ArkTS:鸿蒙应用开发的高效利器ArkTS,作为HarmonyOS4.0优选的主力应用开发语言,正逐步成为鸿蒙生态系统中的核心开发工具。它基于TypeScript进行扩展,不仅继承了TypeScript的静态类型优势,还通过一系列创新设计,进一步提升了
京东云开发者 京东云开发者
2个月前
动态化-鸿蒙跨端方案介绍
一、背景👉华为在2023.9.25官方发布会上宣布,新的鸿蒙系统将不再兼容安卓应用,这意味着,包括京东金融APP在内的所有安卓应用,在新的鸿蒙系统上将无法运行,需要重新开发专门适用于新鸿蒙系统的专版APP。二、原生适配方案原生适配方案就是将京东金融APP
京东云开发者 京东云开发者
2个月前
京东鸿蒙上线前瞻——使用 Taro 打造高性能原生应用
背景2024年1月,京东正式启动鸿蒙原生应用开发,基于HarmonyOSNEXT的全场景、原生智能、原生安全等优势特性,为消费者打造更流畅、更智能、更安全的购物体验。同年6月,京东鸿蒙原生应用尝鲜版上架华为应用市场,计划9月完成正式版的上架。早在2020年
京东云开发者 京东云开发者
3星期前
Taro 鸿蒙技术内幕系列(一):如何将 React 代码跑在 ArkUI 上
作者:京东零售朱鸣辉基于Taro打造的京东鸿蒙APP已跟随鸿蒙Next系统公测,本系列文章将深入解析Taro如何实现使用React开发高性能鸿蒙应用的技术内幕背景随着鸿蒙操作系统的快速发展,开发者们期待将现有跨平台应用迁移到鸿蒙平台。Taro作为一个流行的
京东云开发者 京东云开发者
1星期前
Taro 鸿蒙技术内幕系列(二):如何让 W3C 标准的 CSS跑在鸿蒙上
作者:京东零售马银涛基于Taro打造的京东鸿蒙APP已跟随鸿蒙Next系统公测,本系列文章将深入解析Taro如何实现使用React开发高性能鸿蒙应用的技术内幕背景HarmonyOS采用自研的ArkUI框架作为原生UI开发方案,这套方案有完善的布局系统和样式