0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

探索鸿蒙OS应用开发的hello world代码

鸿蒙系统HarmonyOS 来源:51CTO 作者:涂启标 2021-04-16 15:49 次阅读

我们就来更深度的探索hello world代码背后的东西。

(一)IDE布局解析

pIYBAGB5QDaAXSP8AAGLSQCdpYo925.png

如上截图,我大体的将整个界面进行了拆分:最顶部红色区域是菜单栏,左边蓝色区域是项目工程,右边大区是代码编辑区域,右上角是工具条(调试、运行),底部是显示一些如日志、命令、调试信息。当然这里主要是标出了几个比较大块而且比较固定的窗口,更细节的,比如预览界面等这些属于动态的界面,等有需要的时候再细说。

(二)项目工程结构解析

项目工程这里主要存放了项目资源,包含用户代码、配置文件、库文件、图片、音视频等。

o4YBAGB5QEmAQffPAAEJP0BeUQs398.png

根目录就是我们创建项目时自己定义的项目目录,.gradle和.idea一般不需要开发者干预,属于IDE自动创建环境的目录。

build文件夹:此目录为编译产出目录,就是编译后会在这里产生对应.hap包(可以理解为类似ios的.ipa,安卓的.apk)。

entry文件夹:入口目录,如果是安卓的开发者,可以对应为app文件夹。这里面存放着我们应用程序的核心内容,比如代码、图片、音视频资源等等。所以这个文件夹是重点,我们再给它展开来剖析:

同样,在entry目录下,也有一些眼熟的目录:

entry-build:跟外层的根项目目录下的build作用一致。

entry-libs:库目录,用于放置库文件的目录。

entry-src:存放源文件的目录,然后内部又细分main目录和test目录,main是核心目录,里面包含核心的程序代码(main-java)和资源(resources)目录。config.json是配置信息文件,可以配置诸如包名、版本,设备类型等。其中设备类型(deviceType)指定了当前程序所支持的设备,鸿蒙OS会根据实际不同的设备去加载适合当前设备对应版本的FA,也就是说你可以增加一个或者多个设备支持,比如可以增加phone(现已发布beta)。

pIYBAGB5QH6AVu7ZAAFCdUSmN6M755.png

entry-src-resources:这个目录存放着各种资源文件,如应用程序用的图标、音效、布局配置等。

entry-src-tesst :这个是存放测试代码的目录,目前默认使用的是junit测试框架。

gradle:这个目录属于编译模块的。

(三)代码解析

了解了工程目录后,我们再来解析下之前hello world的源码。在entry-src-main-java-com.xxx.myHarmonyApp目录下:

pIYBAGB5QI2APrZCAADMYwFBqtc365.png

我们可以看到又三个java代码文件,其中slice可以对应安卓开发中的fragment概念。目前官方示例是将逻辑代码放到了MainAbilitySlice中。

MainAbility.java : 一个Ability代表了一种能力,我们可以看到这个MainAbility是继承自Ability类的:

pIYBAGB5QKKAIyNQAAHfYUQV56M591.png

这里重写(@Override)了onStart方法,方法里做了两件事:调用了父类的onStart方法初始化了intent,另一个是调用父类方法设置路由到slice类,意思就是它把后续的执行逻辑指定给了slice。一般一个Ability会对应一个AbilitySlice。

MyApplication.java:程序的入口,我们看代码里就只重写了一个初始化函数,主要作用是初始化程序。

o4YBAGB5QLGAJvs3AAEVmfzV2ds639.png

MainAbilitySlice.java:我们看到上面的两个java类中,并没有执行任何的逻辑代码,那么我们的hello world字样是怎么输出的呢?上面说了,MainAbility已经把它的执行路由给了slice,所以,核心的逻辑代码就在这个MainAbilitySlice.java中了。

o4YBAGB5QMGAARYJAAK3qwB99bk635.png

代码行数不多,我们可以逐行解析,先解析几个关键字,因本人之前熟悉的技术栈是c#,这里也做一个简单的对标参照:

package: 是一个关键字,指定了一个包名,格式com.厂商名.应用名.模块。可以类似的对标c#的名称空间。

import:也是一个关键字,用于导入其他程序包。也可以对标c#的using关键字。

extends:关键字,表示继承,对标c#的冒号。

@Override: 关键字,表示重写,对标c#的override

supper:关键字,表示基类调用,可以对标参照c#的base。

ohos: 表示open harmony operating system。

intent: 中间件,作用主要为组件相互调用提供媒介,协助组件间的交互与通讯。

所以,有了上面的这些概念,我们再来看代码就比较清晰了。

第1行代码,指定和定义了当前类的一个包名。

3-5行,导入了当前所需的包环境。

7-12行,继承AbilictySlice扩展了MainAbilitySlice类。重写了onStart方法,调用基类的onStart初始化intent中间件,再调用基类的setUIContent来设置UI内容(hello world的创建在这里~)。

14-23行,都为周期函数的初始化基类调用。

所以,重点是super.setUIContent(ResourceTable.Layout_ability_main);这句代码产出了“hello world”,简单说setUIContent会解析ResourceTable提供的元素信息创建对应的UI界面。

ResourceTable用于管理一些窗口小部件资源,Layout_ability_main则对应了entry-src-resources-base-layout目录下的布局配置。

o4YBAGB5QNGAawizAACsx98FH0A865.png

(四)布局文件解析

打开ability_main.xml对于hello world的来源已经很清晰了:

pIYBAGB5QN6AFP3QAAJRpGqnm5M524.png

这是一个xml文件,开头对应标记。

标签

鸿蒙的方向布局标签,对应的还有等。

xmlns:XML Namespaces表示命名空间。

ohos:heigh= “match_parent”:表示定义了高度适应父级。

ohos : width= “math_parent”:表示宽度适应父级。

ohos:orientation= “vertical”:表示布局方向为垂直,另一个相对的值是“horizontal”。

标签

表示了一个文本元素。

ohos:id= “$+id:tex_helloworld”:表示text的调用id,使用”$+id:”来标示一个占位,后跟一个名称,这样在需要调用这个text的时候就能这样调用:

pIYBAGB5QOyADiXKAAIV6t2-mpM956.png

ohos:backgound_element=“$graphic:background_ability_main”:表示背景元素指定为另一个在entry-src-main-resources-base-graphic目录下的xml配置。

标签

表示绘制一个形状。

o4YBAGB5QPuAbQNLAADc3HZCrzU349.png

ohos:shape= “rectangle”表示绘制一个矩形。

标签

表示填充颜色

表示填充颜色为白色,IDE的左侧颜色选择块还可以鼠标选择。

回到标签:

ohos:layout_aliment= “horizontal_center”表示文字对齐方式为横向居中。

ohos:text= “hello world”这个就是最终输出的文本。我们可以改成其他任意字符串试试,比如改成:ohos:text = “你好,鸿蒙!”

ohos:text_size=“50”:表示设置字体大小为50.

同样还可以给文字元素添加颜色:

ohos:text_color= “#78FF00”,当输入”#”+任意数字时,IDE左边就可以看到颜色选择块。

我们可以自定义下配置,可以重新运行看看效果:

编辑:hfy

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙系统
    +关注

    关注

    183

    文章

    2625

    浏览量

    65274
收藏 人收藏

    评论

    相关推荐

    鸿蒙OS应用开发实践(二)

    在上一篇中(前往),我们已经跑通了鸿蒙OS应用开发的环境。这篇中,我们就来更深度的探索hello wor
    发表于 12-01 10:18

    鸿蒙OS应用开发实践(二)

    在上一篇中(前往),我们已经跑通了鸿蒙OS应用开发的环境。这篇中,我们就来更深度的探索hello wor
    发表于 12-02 16:50

    【HarmonyOS HiSpark Wi-Fi IoT 套件试用连载】+打印hello world

    Hi3861第一个程序:打印hello_world通过学习鸿蒙系统的文件架构,大概知道了hi3861芯片的启动过程,对于hi3861外设开发,不需要涉及到内核方面的改动,所以只需要知道hi3861
    发表于 01-06 22:38

    Wifi-IOT开发板学习之编译Hello World程序(四)

    文件拷贝出来,执行如下指令:docker cp hm_build:/mnt/out/wifiiot/Hi3861_wifiiot_app_allinone.bin .这样把编译产物拷贝到当前目录,接下来就是使用Hi-Burn工具刷入到开发了。最后打印日志:Hello
    发表于 02-09 17:16

    鸿蒙 OS 应用开发初体验

    的操作系统平台和开发框架。HarmonyOS 的目标是实现跨设备的无缝协同和高性能。 DevEco Studio 对标 Android Studio,开发鸿蒙 OS 应用的 IDE。
    发表于 11-02 19:38

    Android开发之“hello World”的实现

    按照惯例,同时也是为了更好地引导读者进入精彩的Android世界,我们接下来要实现一个简单的“hello World”例子。
    发表于 08-24 11:20 5497次阅读
    Android<b class='flag-5'>开发</b>之“<b class='flag-5'>hello</b> <b class='flag-5'>World</b>”的实现

    Hello_World.Constraint

    Hello World,好东西,喜欢的朋友可以下载来学习。
    发表于 02-22 15:52 0次下载

    MICROCHIP MINUTES 4 - HELLO WORLD

    欢迎观看MICROCHIP MINUTES之MPLAB® X IDE系列短片。在本视频中,我们将编译HELLO WORLD应用程序。本视频使用PICDEM™ Curiosity开发板及开发
    的头像 发表于 06-07 05:46 2668次阅读

    MPSOC开发板教程之HELLO WORLD

    板。现在用米尔MPSOC开发板来一个hello world。MPSOC学习之HELLO WORLD,分享给大家。 米尔MPSOC
    发表于 08-02 11:43 351次阅读
    MPSOC<b class='flag-5'>开发</b>板教程之<b class='flag-5'>HELLO</b> <b class='flag-5'>WORLD</b>

    鸿蒙的第一个世界版Hello World

    js-defalut-pages-index-index.hml。 index.hml 就是我们第一个工程的首屏页面,点击右侧折叠的 Previewer 栏,等右下方一阵抽搐,就会成功出现... 您好,世界! 英文的效果呢?不用改词,鸿蒙 OS
    的头像 发表于 01-21 10:05 1980次阅读
    <b class='flag-5'>鸿蒙</b>的第一个世界版<b class='flag-5'>Hello</b> <b class='flag-5'>World</b>

    HELLO WORLD!

    HELLO WORLD
    发表于 12-03 16:21 8次下载
    <b class='flag-5'>HELLO</b> <b class='flag-5'>WORLD</b>!

    STM32开发入门(二)——Hello World

    STM32开发入门(二)——Hello World
    发表于 12-07 18:51 11次下载
    STM32<b class='flag-5'>开发</b>入门(二)——<b class='flag-5'>Hello</b> <b class='flag-5'>World</b>

    如何在鸿蒙开发板上输出Hello World

    HarmonyOS 开发快速入门:鸿蒙开发板上输出 Hello World
    的头像 发表于 01-15 16:03 1114次阅读

    我的第一个UVM代码Hello world

    你刚开始是怎么学UVM的?白皮书还是红皮书?而我是从hello world实验开始的。
    的头像 发表于 06-15 10:49 547次阅读
    我的第一个UVM<b class='flag-5'>代码</b>—<b class='flag-5'>Hello</b> <b class='flag-5'>world</b>

    RA-RTT体验RT-Thead超级简单的hello world!

    在这篇帖子上,我们增加自己的代码,实现串口输出hello world等功能
    的头像 发表于 10-12 14:36 280次阅读
    RA-RTT体验RT-Thead超级简单的<b class='flag-5'>hello</b> <b class='flag-5'>world</b>!