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

导读

本指南为开发者提供了使用 Taro 框架开发鸿蒙原生应用的快速入门方法。Taro，作为一个多端统一开发框架，让开发者能够使用一套代码同时适配多个平台，包括鸿蒙系统。文章将详细介绍如何配置开发环境，以及如何利用 Taro 的特性和组件库来构建鸿蒙应用。从基本的项目设置到复杂的应用逻辑开发，本文将一步步引导开发者了解 Taro 在鸿蒙应用开发中的实际应用，快速掌握跨平台开发的技巧。

01 前言

在今年的敏捷团队建设中，我通过Suite执行器实现了一键自动化单元测试。Juint除了Suite执行器还有哪些执行器呢？由此我的Runner探索之旅开始了！

随着鸿蒙系统的不断完善，许多应用厂商都希望将自己的应用移植到鸿蒙平台上。最近，Taro 发布了 v4.0.0-beta.x 版本，支持使用 Taro 快速开发鸿蒙原生应用，也可将现有的小程序转换为鸿蒙原生应用。本文将正式为开发者提供一份完整的鸿蒙应用开发指南，帮助大家使用 Taro 开发自己的第一个鸿蒙应用。

02 环境配置

首先要准备鸿蒙运行所需的环境，根据参考文档提示的步骤在 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 的版本号与下面的图片中相同，则标识配置成功了。

步骤 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. 调试：

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

03 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 项目的方式进行预览与调试。

04 注意事项

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 没有办法在编译时获取准确的节点结构以及节点类名信息，因此无法支持这两种行为。

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

05 结语

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

为了能让大家更好的学习鸿蒙 (OpenHarmony) 开发技术，这边特意整理了《鸿蒙 (OpenHarmony)开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙 (OpenHarmony)开发学习手册》

入门必看：https://qr21.cn/FV7h05

  1. 应用开发导读(ArkTS)
  2. ……

HarmonyOS 概念：https://qr21.cn/FV7h05

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

如何快速入门？：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. 构建第一个JS应用
  4. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/390647.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

MATLAB知识点：datasample函数（★★☆☆☆）随机抽样的函数，能对矩阵数据进行随机抽样

MATLAB知识点：datasample函数（★★☆☆☆）随机抽样的函数，能对矩阵数据进行随机抽样

讲解视频：可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇（数学建模清风主讲，适合零基础同学观看）_哔哩哔哩_bilibili 节选自第3章：课后习题讲解中拓展的函数 在讲解第三…
阅读更多...
.NET开源的一个小而快并且功能强大的 Windows 动态桌面软件 - DreamScene2

.NET开源的一个小而快并且功能强大的 Windows 动态桌面软件 - DreamScene2

前言 很多同学都不愿给电脑设动态壁纸，其中有个重要原因就是嫌它占资源过多。今天大姚分享一个.NET开源、免费（MIT license）的一个小而快并且功能强大的 Windows 动态桌面软件，支持视频和网页动画播放：DreamScene2。 …
阅读更多...
Android 车载应用开发之SystemUI 详解

Android 车载应用开发之SystemUI 详解

一、SystemUI SystemUI全称System User Interface，直译过来就是系统级用户交互界面，在 Android 系统中由SystemUI负责统一管理整个系统层的 UI，它是一个系统级应用程序（APK），源码在/frameworks/base/packages/目录下，而不是在/packages/目录下，这也说明了SystemUI这个…
阅读更多...
【C语言】模拟实现库函数qsort

【C语言】模拟实现库函数qsort

qsort的头文件是stdlib.h 他的四个参数分别是要进行排序的数组base的首地址，base数组的元素个数，每个元素的大小，以及一个函数指针，这个函数指针指向了一个函数，这个函数的参数是两个void*类型的指针，返回类…
阅读更多...
读十堂极简人工智能课笔记04_计算机视觉

读十堂极简人工智能课笔记04_计算机视觉

1. 仙女蜂 1.1. Megaphragma mymaripenne 1.2. 一种微小的蜂类 1.3. 人类已知第三小的昆虫 1.4. 大脑仅由7400个神经元组成，比大型昆虫的大脑小了好几个数量级 1.5. 微小的身体里没有空间容纳这些神经元，所以在生长的最后阶段，它把每个神…
阅读更多...
JDBC查询操作

JDBC查询操作

目录 加载驱动获取连接创建会话发送SQL处理结果关闭资源测试 加载驱动 // 加载驱动Class.forName("com.mysql.cj.jdbc.Driver");获取连接 // 获取连接String url "jdbc:mysql://127.0.0.1:3306/book";String username "root" …
阅读更多...
让每次生成的随机数都相同np.random.seed()

让每次生成的随机数都相同np.random.seed()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 让每次生成的随机数都相同 np.random.seed() 选择题 关于以下代码输出的结果说法正确的是？ import numpy as np np.random.seed(0) print(【执行】print(np.random.rand(3))) prin…
阅读更多...
[ai笔记9] openAI Sora技术文档引用文献汇总

[ai笔记9] openAI Sora技术文档引用文献汇总

欢迎来到文思源想的ai空间，这是技术老兵重学ai以及成长思考的第9篇分享！ 这篇笔记承接上一篇技术文档的学习，主要是为了做一个记录，记录下openai sora技术介绍文档提到的一些论文，再此特地记录一下！ 1 原文…
阅读更多...
2024 年 11 款最佳 iPhone 数据恢复软件和应用程序

2024 年 11 款最佳 iPhone 数据恢复软件和应用程序

数据丢失是任何人都无法承受的，因为它对每个人都至关重要。但导致数据丢失的原因有很多，一些常见的原因是意外删除数据、设备被盗、iOS 越狱、硬件损坏、病毒感染等。我们列出了 iOS 的顶级恢复工具，其中包括：将帮助您方便地恢复数…
阅读更多...
开年王炸！OpenAI发布文本转视频模型Sora，有亿点震撼！

开年王炸！OpenAI发布文本转视频模型Sora，有亿点震撼！

大家好，我是木易，一个持续关注AI领域的互联网技术产品经理，国内Top2本科，美国Top10 CS研究生，MBA。我坚信AI是普通人变强的“外挂”，所以创建了“AI信息Gap”这个公众号，专注于分享AI全维度知识…
阅读更多...
Java线程与进程

Java线程与进程

线程 概念 Java中，线程是程序执行的最小单位，它是进程的一个执行流，也是CPU调度和分配的基本单位。每个进程都可以运行多个线程，这些线程共享进程的内存块，但每个线程都有自己的堆栈和局部变量。 Java中的线程有两种…
阅读更多...
机器人专题：我国机器人产业园区发展现状、问题、经验及建议

机器人专题：我国机器人产业园区发展现状、问题、经验及建议

今天分享的是机器人系列深度研究报告：《机器人专题：我国机器人产业园区发展现状、问题、经验及建议》。 （报告出品方：赛迪研究院） 报告共计：26页 机器人作为推动工业化发展和数字中国建设的重要工具&…
阅读更多...
代码随想录算法训练营第三二天 | 买卖股票、跳跃游戏

代码随想录算法训练营第三二天 | 买卖股票、跳跃游戏

目录 买卖股票的最佳时机II跳跃游戏跳跃游戏ii LeetCode 122.买卖股票的最佳时机II LeetCode 55. 跳跃游戏 LeetCode 45.跳跃游戏II 买卖股票的最佳时机II 只有一只股票！ 当前只有买股票或者卖股票的操作。 最终利润是可以分解的：把利润分解为每天为…
阅读更多...
linux系统zabbix工具监控web页面

linux系统zabbix工具监控web页面

web页面监控 内建key介绍浏览器配置浏览器页面查看方式 监控指定的站点的资源下载速度，及页面响应时间，还有响应代码； web Scenario： web场景（站点）web page ：web页面，一个场景有多…
阅读更多...
C 语言 devc++ 使用 winsock 实现 windows UDP 局域网发送消息

C 语言 devc++ 使用 winsock 实现 windows UDP 局域网发送消息

U参考来源 U 这里移植到windows 上 &#xff0c;使用 devc 开发。 服务端代码 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <string.h> #include <winsock2.h>int main() {WORD sockVersion MAKEWORD(2, 2);WSAD…
阅读更多...
Leecode之合并两个有序链表

Leecode之合并两个有序链表

一.题目及剖析 https://leetcode.cn/problems/merge-two-sorted-lists/description/ 二.思路引入 用指针遍历两个链表并实时比较,较小的元素进行尾插,然后较小元素的指针接着向后遍历 三.代码引入 /*** Definition for singly-linked list.* struct ListNode {* int va…
阅读更多...
构造题记录

构造题记录

思路&#xff1a;本题要求构造一个a和b数组相加为不递减序列&#xff0c;并且b数组的极差为最小的b数组。 可以通过遍历a数组并且每次更新最大值&#xff0c;并使得b数组为这个最大值和当前a值的差。 #include <bits/stdc.h> using namespace std; #define int long lon…
阅读更多...
深度学习主流开源框架：Caffe、TensorFlow、Pytorch、Theano、Keras、MXNet、Chainer

深度学习主流开源框架：Caffe、TensorFlow、Pytorch、Theano、Keras、MXNet、Chainer

2.6 深度学习主流开源框架 表2.1 深度学习主流框架参数对比 框架关键词总结 框架关键词基本数据结构&#xff08;都是高维数组&#xff09;Caffe“在工业中应用较为广泛”&#xff0c;“编译安装麻烦一点”BlobTensorFlow“安装简单pip”TensorPytorch“定位&#xff1a;快…
阅读更多...
【STM32 CubeMX】I2C层次结构、I2C协议

【STM32 CubeMX】I2C层次结构、I2C协议

文章目录 前言一、I2C的结构层次1.1 怎样在两个设备之间传输数据1.2 I2C如何传输数据1.3 硬件框图1.4 软件层次 二、IIC协议2.1 硬件连接2.2 I2C 总线的概念2.3 传输数据类比2.3 I2C信号2.4 I2C数据的含义 总结 前言 在STM32 CubeMX环境中&#xff0c;I2C&#xff08;Inter-In…
阅读更多...
MongoDB数据库又被勒索攻击了

MongoDB数据库又被勒索攻击了

前言 朋友发来一张图片&#xff0c;说MongoDB数据库被勒索了&#xff0c;问我是哪个家族的...... &#xff08;上图来源于网络)&#xff0c;当笔者看到朋友发的图片之后&#xff0c;判断应该是黑客入侵了MongoDB数据库服务器&#xff0c;然后删除了数据库里面的数据&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023