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

2024-02-17 07:52

本文主要是介绍使用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.……

这篇关于使用Taro开发鸿蒙原生应用——快速上手,鸿蒙应用开发指南的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/717139

相关文章

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

csu 1446 Problem J Modified LCS (扩展欧几里得算法的简单应用)

这是一道扩展欧几里得算法的简单应用题,这题是在湖南多校训练赛中队友ac的一道题,在比赛之后请教了队友,然后自己把它a掉 这也是自己独自做扩展欧几里得算法的题目 题意:把题意转变下就变成了:求d1*x - d2*y = f2 - f1的解,很明显用exgcd来解 下面介绍一下exgcd的一些知识点:求ax + by = c的解 一、首先求ax + by = gcd(a,b)的解 这个

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C