HarmonyOS 4应用开发：1.从环境搭建到Hello World

        在踏上HarmonyOS应用开发之旅之前，需要进行一些必要的准备工作。首先，你需要下载并安装DevEco Studio，并进行相应的环境配置。

一、下载和安装DevEco Studio

  • 前往DevEco Studio官方的下载地址，点击“立即下载”跳转至下载页面。
  • DevEco Studio提供了Windows和Mac版本的选择，根据你的操作系统选择相应版本进行下载。

  1. 在Windows上进行安装

    • 下载完成后，双击下载的“deveco-studio-xxxx.exe”文件，启动DevEco Studio安装向导。
    • 在安装向导界面，选择安装路径。默认路径为“C:\Program Files”，你也可以点击“Browse…”选择其他安装路径，然后点击“Next”继续。
    • 在安装选项界面，勾选DevEco Studio，可以创建桌面快捷方式，然后点击“Next”，点击“install”，直至安装完成。
    • 安装完成后，点击“Finish”来结束整个安装过程。

现在，你已经成功安装了DevEco Studio，下一步就是运行DevEco Studio，然后开始配置开发环境！

二、配置开发环境

  1. 启动DevEco Studio配置向导

     双击已安装的DevEco Studio快捷方式，打开配置页面。IDE将自动进入配置向导。在配置向导中，选择同意相关条款，然后点击"Next"。

  2. 基础配置设置

    进入DevEco Studio配置页面后，首先进行基础配置。这包括设置Node.js和Ohpm的安装路径，选择从华为镜像下载并安装到适当的目录。点击"Next"进入SDK配置。

  3. SDK配置

    在SDK配置中，设置适当的路径，并点击"Next"。

  4. 在显示SDK许可协议后，阅读相关内容并勾选"Accept"。点击"Next"。

  5. 配置预览

    点击"Next"后，进入配置预览页。在这里确认配置项，确保设置符合需求。确认后，点击"Next"进入下一步。

  6. 等待配置自动下载

    等待配置自动下载完成，完成后点击"Finish"。IDE将进入欢迎页，这标志着我们已成功配置好开发环境。

通过以上步骤，你已经顺利完成了DevEco Studio的配置，现在可以愉快地开始开发了！

三、项目创建和运行

  1. 进入DevEco Studio创建项目

    完成前述准备工作后，现在我们将使用DevEco Studio进行项目的创建和运行。

  2. 创建项目

    • 如果这是你首次打开DevEco Studio，你将首先进入欢迎页。
    • 在欢迎页中，点击"Create Project"，进入项目创建页面。

  3. 选择应用类型

    • 在项目创建页面，选择"Application"，然后选择"Empty Ability"。点击"Next"，进入工程配置页。

  4. 配置项目详细信息

    • 在配置页中，提供以下详细信息：
      • Project name： 这是开发者可以自行设置的项目名称。根据你的选择，修改为你的项目名称。
      • Bundle name： 包名称，默认情况下应用ID也会使用该名称，发布时需要保持一致。
      • Save location： 工程保存路径。
      • Compile SDK： 编译的API版本，默认选择API9。
      • Model： 选择"Stage"模型，其他保持默认即可。
      • Device Type：设备类型，Phone和Table类型分别代表可以运行在手机和平板上。

  5. 完成工程创建

    点击“Finish”按钮完成工程创建，然后等待工程同步完成。

通过以上步骤，你已经成功创建了一个项目，并准备好进行开发。接下来，你可以开始添加代码和其他资源，然后运行你的HarmonyOS应用。

四、DevEco Studio界面介绍

        创建好项目，我们会进入IDE，首先我们要了解基础的界面布局，它主要分为四个部分：1.工程目录区、2.代码编辑区、3.预览区、4.日志和控制台。这些部分的位置和大小都是可调整的，初始位置如下图所示。

1.工程目录区： 位于左侧，用于查看和管理项目文件。详细的介绍将在后续章节中进行。

2.代码编辑区： 这是IDE的核心部分，位于中央位置。你可以在这里修改代码并切换显示的文件。通过按住Ctrl键并滚动鼠标滚轮，可以方便地实现界面的放大和缩小。

3.日志和控制台等： 在编辑器底部有一行工具栏，主要包括常用信息栏。其中，Run是项目运行时的信息显示栏，Problems是当前工程的错误和提醒信息栏，Terminal是命令行终端，用于执行命令行操作，PreviewerLog是预览器日志输出栏，Log是模拟器和真机运行时的日志输出栏，Profiler是可视化性能优化工具，这些功能将在应用开发过程中基本都会用到。

4.预览区： 通过单击右上角的Previewer，可以预览文件的UI展示效果。

        预览器提供了丰富的界面显示功能，如旋转屏幕、切换显示设备以及多设备预览等。你可以通过单击旋转按钮来切换竖屏和横屏显示效果。也可以单击列表按钮切换显示的设备类型，弹出框内会显示可用的设备类型。

         例如，单击Foldable可以切换设备，同时你还可以通过单击旋转按钮切换Foldable的横竖屏显示模式。打开Muti-profile preview开关，可以实现多个尺寸设备的实时预览。

        另外，单击预览器右上角的组件预览按钮，可以进入组件预览界面。组件预览模式允许你预览当前组件对应的代码块，点击相应组件时，代码文件中会框选对应的组件代码部分，下方则展示当前组件的基本属性。

五、运行Hello World

IDE提供了一套本地模拟器，供开发者使用。首先，需要下载并安装本地模拟器，并随后运行工程。

  1. 在顶部工具栏中选择Tools > Device Manager。

  2. 选择Local Emulator，并设置适当的Local Emulator Location存储地址，然后点击'+New Emulator'。

  3. 在弹出的窗口中，选择Huawei_Phone手机模拟器，点击'Next'，进入模拟器系统下载页。

  4. 选择下载api9的系统镜像，然后点击'Next'，等待下载完成。

  5. 下载完成后，创建相应的手机模拟器，点击Finish完成创建。

  6. 在Local Emulator页面中，会显示刚创建的手机模拟器。点击Actions按钮，启动模拟器。

  7. 模拟器启动后，点击顶部的启动按钮，将Hello World工程运行到模拟器上。

  8. IDE构建完成后，Hello World工程就成功在模拟器上运行了。

六、基本工程目录结构

1.工程级目录：

工程的目录结构如下，

具体详解如下所示：

  1. AppScope： 存放应用全局所需的资源文件。

  2. entry： 应用的主模块，包含HarmonyOS应用的代码和资源等。

  3. oh_modules： 工程的依赖包，存放工程所需的源文件。

  4. build-profile.json5： 工程级配置信息，包括签名、产品配置等。

  5. hvigorfile.ts： 工程级编译构建任务脚本。hvigor是一款基于任务管理机制实现的全新自动化构建工具，主要提供任务注册编排、工程模型管理、配置管理等核心能力。

  6. oh-package.json5： 工程级依赖配置文件，用于记录引入包的配置信息。

在AppScope中，包含了resources文件夹和配置文件app.json5。AppScope > resources > base中包含element和media两个文件夹：

  1. element： 存放公共的字符串、布局文件等资源。

  2. media： 存放全局公共的多媒体资源文件。

2.模块级目录：

在entry > src目录中，主要包含总的main文件夹，单元测试目录ohosTest，以及模块级的配置文件。

  1. main： 包含ets文件夹用于存放ets代码，resources文件夹存放模块内的多媒体及布局文件等，以及module.json5文件作为模块的配置文件。

  2. ohosTest： 单元测试目录。

  3. build-profile.json5： 模块级配置信息，包括编译构建配置项。

  4. hvigorfile.ts： 模块级构建脚本。

  5. oh-package.json5： 模块级依赖配置信息文件。

进入src > main > ets目录中，其分为entryability、pages两个文件夹：

  1. entryability： 存放ability文件，用于当前ability应用逻辑和生命周期管理。

  2. pages： 存放UI界面相关代码文件，初始生成一个Index页面。

在resources目录下，存放模块公共的多媒体、字符串及布局文件等资源，分别存放在element、media文件夹中。

配置文件解析：

  1. app.json5 (AppScope)： 位于AppScope目录下，存放应用的全局配置信息，包括bundleName（包名）、vendor（应用程序供应商）、versionCode（用于区分应用版本）、versionName（版本号）、icon（应用显示图标）、label（应用名）等。

  2. module.json5 (entry > src > main)： 存放模块的配置信息，包含当前模块的详细配置，如模块属性、打包信息等，具体信息见注释。

  3. main_pages.json（src/main/resources/base/profile/main_pages.json）

        main_pages.json文件保存的是页面page的路径配置信息，所有需要进行路由跳转的page页面都要在这里进行配置，我们在新建页面的时候需要到这个文件中配置路由，否则可能会出现页面无法跳转的情况。

 七、总结

        通过以上步骤，我们完成了HarmonyOS应用开发的初步准备工作。我们详细了解了DevEco Studio的下载安装过程，配置了开发环境，创建并成功运行了一个Hello World项目。探索了DevEco Studio的界面结构，从项目级到模块级，我们对基本工程目录结构有了清晰的认识。这一系列步骤为我们的HarmonyOS应用开发打下了坚实的基础。在接下来的学习和实践中，我们将继续挖掘更多丰富的功能和工具，构建出更为复杂和实用的应用程序。愿你在HarmonyOS的开发之路上取得愉快而成功的经验！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）控件的部分公共属性和事件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）控件的部分公共属性和事件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）控件的部分公共属性和事件 一、操作环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、公共属性 常用的公共属性有： 宽(with)、高(height)、…
阅读更多...
深度学习记录--随机初始化

深度学习记录--随机初始化

权重 权重，指的是变量系数w，决定了变量的变化率 它会改变dw，进而改变下一轮的w(改变更新) 神经网络的权重 对于神经网络(含隐藏层) 由于权重的对称性，我们的隐层的神经单元输出始终不变，出现隐藏神经元的对称性 …
阅读更多...
WPF 显示PDF、PDF转成图片

WPF 显示PDF、PDF转成图片

1.NuGet 安装 O2S.Components.PDFView4NET.WPF 2.添加组件 工具箱中&#xff0c;空白处 右键&#xff0c;选择项 WPF组件 界面&#xff0c;选择NuGet安装库对面路径下的 O2S.Components.PDFView4NET.WPF.dll 3.引入组件命名空间&#xff0c;并使用 <Windowxmlns"htt…
阅读更多...
antd-table：通过rowClassName实现斑马条纹样式+通过rowSelection实现单选功能效果——基础积累

antd-table：通过rowClassName实现斑马条纹样式+通过rowSelection实现单选功能效果——基础积累

斑马条纹 对于element-ui是有个stripe斑马条纹的属性的&#xff0c;最终呈现的效果如下&#xff1a; antd-table中是没有这个属性的&#xff0c;但是可以通过rowClassName&#xff1a;可以给对应行添加指定类名。 实现方法&#xff1a; <a-table:rowClassName"getRo…
阅读更多...
每日一练2023.12.18——天梯赛的善良【PTA】

每日一练2023.12.18——天梯赛的善良【PTA】

题目链接&#xff1a;L1-079 天梯赛的善良 题目要求&#xff1a; 天梯赛是个善良的比赛。善良的命题组希望将题目难度控制在一个范围内&#xff0c;使得每个参赛的学生都有能做出来的题目&#xff0c;并且最厉害的学生也要非常努力才有可能得到高分。 于是命题组首先将编程能…
阅读更多...
Qt for Android设置安卓程序默认横屏+全屏

Qt for Android设置安卓程序默认横屏+全屏

我的qt版本是5.14.1&#xff0c;网上查到的方法是&#xff0c;把编译出的build文件夹中的AndroidManifest.xml文件复制出来然后修改&#xff0c;然后把修改后的xml文件加入pro文件&#xff0c;语法为ANDROID_PACKAGE_SOURCE_DIR $$PWD/AndroidManifest.xml&#xff08;具体&am…
阅读更多...
vue3如何动态添加组件到dom中（jsx,h(),render）

vue3如何动态添加组件到dom中（jsx,h(),render）

背景&#xff0c;在写自定义指令的时候遇见&#xff0c;需要把svg图标组件动态添加到div中&#xff0c;然后把方法绑定到图标上 1、创建jsx import IconSvg from "/components/IconSvg/IconSvg.vue";const renderDom () > {return (<IconSvg class"ico…
阅读更多...
【算法与数据结构】122、LeetCode买卖股票的最佳时机 II

【算法与数据结构】122、LeetCode买卖股票的最佳时机 II

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;股票要想盈利&#xff0c;必须低买高卖。在第N天买入&#xff0c;然后在第M天卖出&#xff0c;所获的利…
阅读更多...
Docker使用4-Persist the DB

Docker使用4-Persist the DB

写在前面 主题是Persist the DB&#xff0c;这里是链接。本文主要学习如何持久化容器中的数据。 实践 使用docker运行一个随机生成1-10000的数的命令。下面是两个命令用&&合并在一起&#xff0c;第一个命令是生成随机数并输出到data.txt&#xff0c;后面的命令是保持…
阅读更多...
echarts 饼图3样式

echarts 饼图3样式

父组件&#xff1a; <pieChartNormal :opt"contractStatics" style"width: 100%;height: 100%;" />import pieChartNormal from "./components/pieChartNormal";data() {return {contractStatics: {seriesData: [{name: 技术服务类,value:…
阅读更多...
优思学院｜有了人工智能，质检员快将失业了吗？

优思学院｜有了人工智能，质检员快将失业了吗？

从前&#xff0c;质检员是执着于质量的守护者。他们拥有工作轻松、压力小、时间自由的优势&#xff0c;然而&#xff0c;这种优越感背后隐藏着容易得罪人、进步空间受限、上升机会有限的挑战&#xff0c;近年&#xff0c;随着人工智能、自动化等理念推陈出新&#xff0c;许多传…
阅读更多...
AI浪潮下，大模型如何在音视频领域运用与实践？

AI浪潮下，大模型如何在音视频领域运用与实践？

视频云大模型算法「方法论」。 刘国栋&#xff5c;演讲者 在AI技术发展如火如荼的当下&#xff0c;大模型的运用与实践在各行各业以千姿百态的形式展开。音视频技术在多场景、多行业的应用中&#xff0c;对于智能化和效果性能的体验优化有较为极致的要求。如何运用好人工智能提…
阅读更多...
Redis最实用的基础入门数据结构和常用指令使用教程

Redis最实用的基础入门数据结构和常用指令使用教程

1.单线程redis操作为什么那么快&#xff1f; 一方面&#xff0c;Redis 的大部分操作在内存上完成&#xff0c;再加上它采用了高效的数据结构&#xff0c;例如哈希表和跳表&#xff0c;这是它实现高性能的一个重要原因。另一方面&#xff0c;就是 Redis 采用了多路复用机制&…
阅读更多...
LeetCode刷题--- 找出所有子集的异或总和再求和

LeetCode刷题--- 找出所有子集的异或总和再求和

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏 力扣递归算法题 http://t.csdnimg.cn/yUl2I 【C】 http://t.csdnimg.cn/6AbpV 数据结构与算法 http://t.csdnimg.cn/hKh2l 前言&#xff1a;这个专栏主要讲述递归递归、搜…
阅读更多...
vue2入门

vue2入门

vue2官方文档&#xff1a;安装 — Vue.js 1、安装 新建"vue"文件夹——>新建vue1.html 直接用<script>标签引入vue&#xff1a; <script src"https://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js"></script> tips: CDN:一个网络…
阅读更多...
Postman介绍和快速使用

Postman介绍和快速使用

Postman 是什么&#xff1f; Postman 是一个流行的API&#xff08;Application Programming Interface&#xff09;开发工具&#xff0c;它使得开发者可以很容易地创建、测试、共享和文档化API。Postman 提供了一个友好的用户界面&#xff0c;来发送HTTP请求&#xff0c;接收响…
阅读更多...
【PHP】一个邮箱点击验证的完整示例

【PHP】一个邮箱点击验证的完整示例

目录 1.效果展示 2.发送验证码 3.进行验证 以绑定邮箱为例&#xff0c;注册验证的话修改判断逻辑 1.效果展示 2.发送验证码 /*** 发点击验证* 参数 email*/public function sendClick(){$param $this->request->post();// 邮箱email的validate规则验证&#xff0c;略…
阅读更多...
基于云主机的k8s环境搭建

基于云主机的k8s环境搭建

1. 申请三台云主机(按量付费即可) 内网IP配置节点角色172.17.0.92C4Gk8s-master172.17.0.82C2Gk8s-node1172.17.0.172C2Gk8s-node2 2. 安装Kubernetes集群(全部节点执行以下操作) 关闭防火墙 systemctl stop firewalld systemctl disable firewalld关闭selinux sed -i s/e…
阅读更多...
非常好用的C++跨平台网络通信Mongoose，随笔记录

非常好用的C++跨平台网络通信Mongoose，随笔记录

简介 Mongoose 是一个 C/C 网络库。它实现了事件驱动&#xff0c; TCP、UDP、HTTP、WebSocket、MQTT 的非阻塞 API。它连接设备 并将它们带到网上。自 2004 年以来&#xff0c;一些开源和商业 产品已经利用了它。它甚至运行在 国际空间站&#xff01; Mongoose 使嵌入式网络编…
阅读更多...
vscode配置latex环境

vscode配置latex环境

vscode配置latex环境 1.安装LaTeX Workshop插件2.配置环境附录 1.安装LaTeX Workshop插件 2.配置环境 按照下图进行操作&#xff1a; 在打开的settings.json中加入如下代码&#xff08; 每行代码的含义见代码详解 &#xff09;&#xff1a; "latex-workshop.latex.autoB…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023