鼠扑 发表于 2024-11-19 06:12:25

【鸿蒙入门】快速相识开发鸿蒙APP的流程

本文面向0基础的小白,让你快速相识开发鸿蒙APP的流程,而且得到一款可以在手机上运行的鸿蒙APP。


一、下载安装鸿蒙应用开发工具DevEco Studio
开发鸿蒙应用可以从鸿蒙体系上运行第一个步伐Hello World开始。
为了得到这个Hello World,你需要得到这个Hello World的源代码,源代码是用人比较容易看得懂的盘算机编程语言规范写的小作文。编程语言就相称于你使用的中文类似,你写的小作文就是源代码,源代码是写给人看的。但是盘算机是不懂看这些源代码的,需要借助一个工具把源代码翻译成机器能理解的机器代码,也就是盘算性能执行的01机器代码。盘算机怎么只能执行01代码这就涉及比较深的知识了,就不细讲了,不用理解也不影响写小作文。

https://i-blog.csdnimg.cn/blog_migrate/4da8be64ddc4399ddaf5ed188733e696.png

能把鸿蒙应用步伐的源代码转成手性能运行的机器代码用到的工具是DevEco Studio。
DevEco Studio你可以从以下地点得到:
https://developer.harmonyos.com/cn/develop/deveco-studio/#download
目前最新版本是3.1.1,就以这个版本为例。

https://i-blog.csdnimg.cn/blog_migrate/9e47620fdb2aaeefd5018a515843cda8.png


根据你电脑的体系选择下载,下面以Windows电脑为例,选择下载第一个devecostudio-windows-3.1.0.501.zip文件。下载后解压运行安装。

https://i-blog.csdnimg.cn/blog_migrate/2a5ac60f1e4315707b10513e9e5c61fa.png
选择 Next 继承

https://i-blog.csdnimg.cn/blog_migrate/56dc0ccbd71daeffad8c273f62af6d3e.png
选择安装目录,我把它改到D盘

https://i-blog.csdnimg.cn/blog_migrate/01e21b76a5c3dd53cd9e26ae8c8a0bcb.png
之后把全部选项都选上 Next继承


https://i-blog.csdnimg.cn/blog_migrate/a348ed0ae6b173286970247002cb5292.png
最后一步默认 Install安装


https://i-blog.csdnimg.cn/blog_migrate/8d0da9af14879edb12232a5efc69ee34.png
安装过程

https://i-blog.csdnimg.cn/blog_migrate/1c271c0107ae228fe5b2407f6a4c0d7e.png
到这里点Finish就已经安装完成了
为了保险起见,重启一下电脑让设置能见效。
不出不测,电脑桌面应该有DevEco Studio步伐图标

https://i-blog.csdnimg.cn/blog_migrate/8632536192161eff6d2d68a752368f20.png
初次运行同意协议就开启鸿蒙应用开发之旅了

https://i-blog.csdnimg.cn/blog_migrate/e02e7e0073637b0bd5f9ec60cfccbb3b.png
初次运行你需要设置一下设置目录,由于是全新安装,默认不导入设置。

https://i-blog.csdnimg.cn/blog_migrate/817e08c51a82c116ac16c02a50315ec8.png
之后来到环境设置页面。环境设置就相称于DevEco Studio要正确运行还要依赖别的东西。必须要吐槽一下,像这种开发工具环境设置的东西,安装工具时就不能默认设置好一下吗?是开源协议不答应这打包还是用别人的东西都懒得去开发了啊?

https://i-blog.csdnimg.cn/blog_migrate/97524a62bb99e5aa8c7fae437d21fcae.png
分别设置两个依赖的环境,一个是Node.js,选择华为的镜像就可以了;另一个是Ohpm。两个依赖环境将安装在指定的目录中。

https://i-blog.csdnimg.cn/blog_migrate/bb37316ca767f0a36ed4e1117461b9e5.png
来到SDK设置页面,SDK是鸿蒙一系列开发工具包,选择要安装的目录即可。

https://i-blog.csdnimg.cn/blog_migrate/24faf4b08c202bee86690460f5b7b564.png
来到SDK协议页面,选择Accept担当,Next下一步

https://i-blog.csdnimg.cn/blog_migrate/800649434b5b9bbea4774e890704386c.png
来到预览设置页面,点Next下一步开始安装设置

https://i-blog.csdnimg.cn/blog_migrate/c12038daffd62a2cd0a623dcd5ab1cd1.png
软件就开始下载安装各种运行所依赖的环境以及开发工具包。

https://i-blog.csdnimg.cn/blog_migrate/e3ce12594b7d9ee15cfda9f692f41583.png
全部的依赖环境下载完成后点Finish完成安装

https://i-blog.csdnimg.cn/blog_migrate/b91c39d1d5b08bac58760aaaf8d189f4.png
完成安装后就打开DevEco Studi欢迎页。

https://i-blog.csdnimg.cn/blog_migrate/decdee6604b16d9928f0a00a92a4736d.png
到这一步就已经完成了全部开发环境的设置工具,下一步开始写小作文,完成第一个项目Hello World的开发。


二、创建Hello World项目
单击欢迎页中的 “Create Project”创建一个新的项目,进入创建项目页面。


https://i-blog.csdnimg.cn/blog_migrate/c4cf2de94d8e290f779bf4d08c7bf64a.png
创建项目页面有很多预设的模板可以选择,这就像给你写了差别种别的作文写作参考范本。让你知道在鸿蒙上议论文怎么写、说明文怎么写有个参考!就选第一个“Empty Ability”,我的理解是一张空的纸,写个Hello World充足了。

https://i-blog.csdnimg.cn/blog_migrate/c4cf2de94d8e290f779bf4d08c7bf64a.png
来到项目设置页面,我们根据现实情况自己改一下。

https://i-blog.csdnimg.cn/blog_migrate/ccedd6567063db26b9b4d26218dd95a6.png
Project name 是项目名称,自己给项目起个名字,就叫HelloWorld吧
Bundle name 是包名,可以理解为这个应用对外发布的ID
Save location 是项目生存路径
Compile SDK 是编译的API版本,可以理解为把源代码按照这个标准翻译成机器代码,默认选择API9就可以了
别的的选项就默认就好了,关键是有些官方也没有清晰的说明是什么意思,默认错不了。在这个界面我们就可以看到右边预览的界面了。就是在手机上显示Hello World,迫不及待点Finish完成项目的设置吧。
温馨提示:点击完成时可能会被360拦截,发起先关了杀毒软件,或答应全部操作!

https://i-blog.csdnimg.cn/blog_migrate/3e72047696b6636d62114d3b876d2ab3.png
不出不测,步伐已经创建好了HelloWorld项目的全部源代码。

https://i-blog.csdnimg.cn/blog_migrate/0ce519ac2db241f0b9abec18d5c3e553.png
你可以在刚才选择的项目生存目录中找到下面这些文件

https://i-blog.csdnimg.cn/blog_migrate/7ba6cc0d9ab93947fb63c6b150925be2.png
是不是有点懵圈?这只是在手机上显示Hello World就有一堆文件,这怎么动手啊?
实在不用担心,那么多文件通常你不需要都理解他是怎么来的。由于开发应用也是分层级的,通常应用开发者掌握应用层的开发就可以了,一样平常不会涉及到底层体系的开发。
你看这IDE(指集成开发环境,如这个DevEco Studi)默认打开的这个文件,从左边我们知道它在电脑中的目录结构的位置是存放在那里。右边则显示的是这个文件的源代码。源代码里面就看到有"Hello World"字样,想改变显示的文字直接替换就可以了,如许看是不是非常简单了?

https://i-blog.csdnimg.cn/blog_migrate/9cf865e9b0ec2a08665266d89e10aa92.png
这个IDE主要分成4个区域,左边1区域显示了项目的工程文件目录结构,中间2区域是代码编辑区,写小作文就是在这个区域编写。右边3区域是手机上显示的结果预览区,要点击旁边的“Previewer”预览按钮才见效。底部的4区域则是显示运行结果通知信息,让你掌握软件的运行的各种信息,它底下尚有很多选项卡,可以切换显示通知的内容。

https://i-blog.csdnimg.cn/blog_migrate/e76b05f03987eebe109c0147fae44cb0.png
点击右边的“Previewer”预览按钮吧,如许比较直观。如果不显示手机展示页面,可以多点击频频切换就可以了。

https://i-blog.csdnimg.cn/blog_migrate/55e213b80a36c3dd18b35348bb7e0572.png
手机横竖屏都可以切换显示的,在代码编辑区修改一下显示的文本,"Ctrl+S"生存一下,预览结果立刻在右边预览区显示了,开发应用就是这么简单!

https://i-blog.csdnimg.cn/blog_migrate/1c64ea3f4e647753b1c3599bcc170718.png
发起还把多设备预览开关功能给开启,同时预览手机、平板上的展示结果。

https://i-blog.csdnimg.cn/blog_migrate/0d29d83c80690304f753fd6d095b2115.png
到这一步你所看到的预览区显示的只是UI的预览,我们需要把这个APP在手机上运行起来。你可以自己买一台华为“遥遥领先”的设备举行安装运行,当然你也可以在电脑上模拟一台设备,在模拟的设备上运行。IDE有两个地方可以添加设备,一个是顶部的Tools工具栏Device Manager添加设备,另一个是IDE右上角有个添加设备的按钮。

https://i-blog.csdnimg.cn/blog_migrate/fe97fb015644133cbb834f459b908a1b.png

https://i-blog.csdnimg.cn/blog_migrate/c15ebf13db0c7270afdbe55bc1506d46.png
设备模拟器需要下载安装的,选择Local Emulator,IDE提示本地没有找到模拟器,我们点击 Install安装一个。

https://i-blog.csdnimg.cn/blog_migrate/d8be5bbd751e97d959e261b2d70eb559.png


https://i-blog.csdnimg.cn/blog_migrate/ffe011a82cf4dfa0920a52e1138fae32.png
下载完成后点Finish

https://i-blog.csdnimg.cn/blog_migrate/7174d234809b6f228238ceb9cd4d6dce.png
这时本地模拟器界面管理酿成如许了

https://i-blog.csdnimg.cn/blog_migrate/be187577cfb56b074cc167810ee51de8.png
更改一下安装模拟器的本职位置

https://i-blog.csdnimg.cn/blog_migrate/93ec3327e98d5f5ac0bb8d13fc765a95.png
再点击 + New Emulator创建一个新的模拟器

https://i-blog.csdnimg.cn/blog_migrate/234bfae707b7fa711566391bcca7d9ef.png
选择第一个手机,点击Next 按钮,

https://i-blog.csdnimg.cn/blog_migrate/0c17b344077abfee0ee14abb8e8306f6.png
选择API版本为9的设备下载

https://i-blog.csdnimg.cn/blog_migrate/f44409c40cd0f942e3d977bda195f9cc.png
等待下载完成

https://i-blog.csdnimg.cn/blog_migrate/7baab6de2bf34e8dd81f8d488a2964a7.png
Finish完成下载

https://i-blog.csdnimg.cn/blog_migrate/e8d8d4d00e66f90b25872696f516cc61.png
体系镜像界面点击next下一步

https://i-blog.csdnimg.cn/blog_migrate/d1c85cb0e4f651efb96d3b1f7e35337a.png
给设备起个名字点击Finish完成。

https://i-blog.csdnimg.cn/blog_migrate/e8965c3af4297022bf17e72f54d6eceb.png
然后就可以点击开始模拟器设备就会开机了

https://i-blog.csdnimg.cn/blog_migrate/18a9cf61cbd9333bdb7c7fd233f92d36.png
开机需要肯定时间,要耐心等待开机完成。

https://i-blog.csdnimg.cn/blog_migrate/6065e28190af8fb504d2115a42a2739f.png
等待时间过长,我遇到了体系UI无法相应,可能是我电脑设置太低的缘故原由,有点慢啊。

https://i-blog.csdnimg.cn/blog_migrate/2d3110fe2e98d47d9a690e365bf4e1ff.png
这个运行的模拟器手机实在跟你真机差不了多少。
再回到IDE主界面,点击运行HelloWorld步伐

https://i-blog.csdnimg.cn/blog_migrate/06d6282606436828d9169385d1e9838c.png
到此,你就完成了一个鸿蒙HelloWorld应用开发了。

https://i-blog.csdnimg.cn/blog_migrate/cea6e1f5da7468887ac7c187e5d41917.png
最后,想要手机上安装该APP,需要编译成手性能看懂的机器代码,在Build菜单中选择Build Hap(s)/APP(s)>Build APP(s)即可完成APP的打包。

https://i-blog.csdnimg.cn/blog_migrate/688529b623d07726f18ce15dabb73c7c.png
天生的APP就存放在项目目录下\build\outputs\default的目录里面,那个.app后缀的文件就是了。

https://i-blog.csdnimg.cn/blog_migrate/cdafea9d0787be18567893142c2e7261.png

https://i-blog.csdnimg.cn/blog_migrate/fe07dd8ce45528410d2ed87497fe533a.png
有鸿蒙体系手机的同学如果有兴趣的可以自己去下载安装看是不是显示同样的结果。
https://www.lunkeji.com/download/HelloWorld-default-unsigned.app
下载地点可能失效,如失效可以私信鸿蒙APP获取下载地点。
需要注意的是,由于出于安全的机制,应用在应用市肆线上发布是需要署名证书的,这个证书你可以以为它就是一张通行证一样。有机会再出个上线应用市肆的教程吧,那是走人工考核的一套流程。

看到这里我想你应该能搞到一个简单的鸿蒙APP了吧?还记得代码区里面的代码吗?那就是开发鸿蒙所使用的ArkTs编程语言,它就是长成那样子的。
以是开发鸿蒙APP主要使用ArkTs编程语言。而这个ArkTs是基于TS(TypeScript)的扩展,而TS又是基于JS(JavaScript)的扩展。它们之间的关系如下图所示:

https://i-blog.csdnimg.cn/blog_migrate/743e5eb4ed8af2503b1c6dc2f8995852.png
以是你想要开发鸿蒙APP,你需要起首掌握JS编程语言,然后再学TS编程语言,最后还要学ArkTS编程语言。
学这个编程语言还没有完,你还要搞清晰这个项目中每个目录是主要干嘛的,它们之间是怎样联系的,等等。
这些就构成了鸿蒙OS。
以是何为自研操作体系,我觉得有一个定义很符合。自研操作体系本质就是自己定义一套规范。按照自己的一套标准去组织各个体系模块的功能。如定义自己一套编程规范,自己的一套UI规范等等。
自研的含量高不高就要看这套规范与其他的规范他的本质差异多大,用这套规范能不能更好的为人服务,由于开发这体系本质是要给开发人员去开发应用的。
真为开发人员心疼几秒钟,又要适配更多的设备更多的操作体系掉头发了。

好啦,以上就是今天文章的全部内容。感谢各人的耐心阅读!您的关注、点赞、收藏是我创作的动力。
万水千山总是情,点个
页: [1]
查看完整版本: 【鸿蒙入门】快速相识开发鸿蒙APP的流程