鸿蒙应用开发之Hello World-1

引言

本文首先通过一个简单HAP(HarmonyOS Ability Package)包的开发,展示了采用JS扩展的类Web开发范式(简称“类Web开发范式”)进行鸿蒙应用前端开发的基本流程;然后将开发出来的HAP安装到小熊派BearPi-HM_Micro_small开发板上,对应用进行了测试。


小贴士:

带图形界面的OpenHarmony应用程序包括 前端后端 两个部分:

(1)应用程序前端

应用程序前端主要负责图形界面的构建和展示,向上通过图形界面与用户进行交互,向下通过ArkUI框架的JS(JavaScript)接口或eTS(Extend TypeScript)接口与应用程序的后端进行交互。

OpenHarmony应用程序前端支持两种开发范式:基于JS扩展的类Web开发范式(简称“类Web开发范式”);基于TS扩展的声明式开发范式(简称“声明式开发范式”)。

(2)应用程序后端

应用程序后端负责实现应用程序的实际功能,向上通过ArkUI框架的C++接口与应用程序的前端进行交互,向下可以通过HDF驱动框架提供的接口与设备驱动进行交互。


参考文档:

DevEco Studio官方文档
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/versions_overview-0000001233344736
小熊派
https://gitee.com/bearpi/bearpi-hm_micro_app/blob/master/docs/hello_word.md

一、准备开发环境

1、开发板:小熊派BearPi-HM_Micro_small开发板,OpenHarmony 3.0。

2、设备开发IDE:DevEco Device Tool (Release) v3.0.0

参考:《搭建小熊派BearPi-HM_Micro_Small的纯Ubuntu开发环境》

3、应用开发IDE:DevEco Studio 3.0 Beta2

参考:《安装DevEco Studio 3.0 Beta2》

二、创建项目

1、启动DevEco Studio,在首页左侧的导航栏里选择Create Project,选择[lite]Empty Ability模板,单击Next,进入下一步。

鸿蒙应用开发之Hello World-1_第1张图片

2、 按照下图输入项目名称(Project name)、选择项目类型(Project type)、输入包名(Bundle name)、选择项目存放路径(Save location)、选择开发语言(Language、选择兼容的API版本(Compatible API version)、选择设备类型(Device type);然后,单击Finish,开始创建项目。

包名的格式一般为:com.公司名称.项目名称

鸿蒙应用开发之Hello World-1_第2张图片

3、 耐心等待项目创建完毕。项目创建完毕后,如下图所示:

鸿蒙应用开发之Hello World-1_第3张图片

在这一步,我们需要对鸿蒙应用包的结构、鸿蒙应用工程的目录结构,以及鸿蒙应用工程中的文件有一个基本的了解,建议去看看我写的另外一篇文章《OpenHarmony APP开发基础》。

还有一点需要注意: DevEco Studio在创建项目的时候,默认指定在编译项目时使用最新的SDK版本,这就需要你的硬件设备中也使用这个最新的SDK版本才能运行应用程序,否则你需要到鸿蒙应用工程中找到两个名为build.gradle的文件,将文件中的compileSdkVersion的值改成你的设备中使用的SDK的版本号,比如:在本例中改成了6

鸿蒙应用开发之Hello World-1_第4张图片

三、编写代码

在本例中,应用程序前端开发采用的是基于JS扩展的类Web开发范式(简称“类Web开发范式”),也就是经典的HML(类HTML)、CSS、JavaScript三段式开发方式。在这种开发方式中,使用HML标签文件进行图形界面的布局搭建;使用CSS文件对图形界面的样式进行描述;使用JavaScript文件实现图形界面的业务逻辑,即:与用户和后端程序进行交互。

页面(Page)和组件(Component) 是OpenHarmony应用开发中的两个基本概念:

(1)应用程序的图形界面可以由一个或多个页面组成。页面是ArkUI框架最小的分割和调度单位;每个页面可进行单独的文件管理。

(2)组件是构成页面的基本元素。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。

在本文第二部分创建项目时使用的[lite]Empty Ability模板中已经自带了一个用户页面,这个用户页面的功能非常简单,就是显示一个文本:Hello World,页面的代码如下图红框中所示:

鸿蒙应用开发之Hello World-1_第5张图片

双击打开三个文件:index.hmlindex.cssindex.js中的任何一个,然后单击DevEco Studio最右侧工具栏中的 Preview ,可以预览页面的效果;每次对页面进行修改之后,单击 刷新 即可。

鸿蒙应用开发之Hello World-1_第6张图片

也可以按照下图所示步骤,打开仿真面板 ,仿真页面显示效果。

鸿蒙应用开发之Hello World-1_第7张图片

鸿蒙应用开发之Hello World-1_第8张图片

鸿蒙应用开发之Hello World-1_第9张图片

注:单击上方的小方块,关闭仿真面板;单击右侧的Simulator可以刷新仿真结果。

3.1 index.hml

HML(OpenHarmony Markup Language)是一套类HTML的标记语言,用于描述页面中有哪些组件、组件在整个页面中的布局结构,以及组件所具备的数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。比如:UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。

HML语法参考:

https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/ui/js-framework-syntax-hml.md/

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/js-framework-syntax-hml-0000001281480758

如果在上述链接中找不到相关内容,也可以参考一下HTML的教程:

https://www.runoob.com/html/html-tutorial.html

原代码:

Hello {{ title }}

原代码解析:

(1)在hml文件中,每一对标签用于声明一个组件,组件之间可以相互包含(嵌套)。

(2)标签div通常被作为hml文件中的根标签,其所声明的组件div对应页面中的一个区域。class是组件的一种通用属性(即:任何一个组件都可以拥有的属性),用于声明组件的样式类型,例如:container就是由开发者自定义的一个样式类型的名称,具体的定义在css文件中。

组件div
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md/

(3)标签text所声明的组件text用于在页面中展示一段文本,起始标签和结束标签之间的内容就是要展示的文本:Hello {{ title }},双重花括号表示对变量的引用(数据绑定),花括号中的title是在文件index.js中定义的一个变量。

组件text
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/ui/ui-js-components-text.md/
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md/

修改原代码:

接下来,我们在div组件中再添加一个input组件:

Hello {{ title }}

Input是交互式组件,用于接收用户数据。其类型可设置为日期、多选框和按钮等。

(1)class是所有组件的通用属性,用于指明组件的样式类型。组件input的样式类型是btn(将在css文件中添加它的定义)。

通用属性
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-common-attributes.md/

(2)typevalue是组件input可以支持的属性。

组件input
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md/
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/ui/ui-js-components-input.md/

(3)click是组件的一种通用事件

通用事件
https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-common-events.md/

事件通过on或者@绑定在组件上,当组件触发事件时会执行JS文件中对应的事件处理函数,比如:本例中的exit函数(将在js文件中定义)。

未完,待续 …

你可能感兴趣的:(鸿蒙应用开发,鸿蒙,鸿蒙应用开发)