鸿蒙应用开发之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，进入下一步。

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

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

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

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

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

​

三、编写代码

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

页面（Page）和组件（Component） 是OpenHarmony应用开发中的两个基本概念：

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

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

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

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

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

注：单击上方的小方块，关闭仿真面板；单击右侧的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

原代码：

<div class="container">
    <text class="title">
        Hello {{ title }}
    </text>
</div>

原代码解析：

（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用于在页面中展示一段文本，起始标签<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组件：

<div class="container">
    <text class="title">
        Hello {{ title }}
    </text>
    
    <input class="btn" type="button" value="Exit" onclick="exit">
	</input>
</div>

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）type和value是组件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文件中定义）。

未完，待续 …

​