前言

上一篇,我们在鸿蒙上写了一个HDF驱动并操作了一下LED硬件,这一篇我们来尝试一下构建一个有简单界面的App,体验一下鸿蒙的前端开发流程。

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇

环境准备

1. 安装DevEco Studio

解压相应的压缩包(文末附下载链接),这里以win10为例,双击`deveco-studio-2.0.12.201.exe`

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇指定安装目录

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇设置可选快捷方式和环境变量

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇一路下一步即可。

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇同意用户协议后,就能正常启动了。

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇

2. 更新sdk

在菜单 `Setting->HarmonyOS SDK->SDK Platforms`中,选择`Js`和`Java`,安装新版的`SDK`。

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇同样在`SDK Tools`中,选中新版的`Previewer`

 

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇点击Apply更新

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇

新建项目

点击菜单`File->New Project...`,选择智慧屏`Smart Vision`,创建一个空模板应用。

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇

填入项目名称`MyUiAPP`,点击完成就能创建一个工程了。

 

遇到 `gradle`下载太慢或版本差异的,可以直接在以下网址用工具下载 

https://services.gradle.org/distributions/

 

目录结构

我们先分析一下目录结构,做`Android`开发的会倍感亲切。

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇

1. APP

`HarmonyOS`的应用软件包以`APP Pack(Application Package)`形式发布,它是由一个或多个`HAP(HarmonyOS Ability Package)`以及描述每个`HAP`属性的`pack.info`组成。`HAP`是`Ability`的部署包,`HarmonyOS`应用代码围绕`Ability`组件展开。

一个`HAP`是由代码、资源、第三方库及应用配置文件组成的模块包,可分为`entry`和`feature`两种模块类型。

- **entry**:应用的主模块。一个APP中,对于同一设备类型必须有且只有一个`entry`类型的`HAP`,可独立安装运行。
- **feature**:应用的动态特性模块。一个`APP`可以包含一个或多个`feature`类型的`HAP`,也可以不含。只有包含`Ability`的`HAP`才能够独立运行。

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇

2. Ability

Ability是应用所具备的能力的抽象,一个应用可以包含一个或多个`Ability`。`Ability`分为两种类型:`FA(Feature Ability)`和`PA(Particle Ability)`。`FA/PA`是应用的基本组成单元,能够实现特定的业务功能。`FA`有`UI`界面,而`PA`无`UI`界面。

3. 资源文件

应用的资源文件(字符串、图片、音频等)统一存放于`resources`目录下,便于开发者使用和维护。`resources`目录包括两大类目录,一类为`base`目录与限定词目录,另一类为`rawfile`目录。

4. 配置文件

配置文件` (config.json) `是应用的`Ability`信息,用于声明应用的`Ability`,以及应用所需权限等信息。

- 应用的全局配置信息,包含应用的包名、生产厂商、版本号等基本信息。
- 应用在具体设备上的配置信息,包含应用的备份恢复、网络安全等能力。
- `HAP`包的配置信息,包含每个`Ability`必须定义的基本属性(如包名、类名、类型以及`Ability`提供的能力),以及应用访问系统或其他应用受保护部分所需的权限等。

5. JS UI 框架

`JS UI`框架是一种跨设备的高性能`UI`开发框架,支持声明式编程和跨设备多态`UI`。

- 声明式编程

  `JS UI`框架采用类`HTML`和`CSS`声明式编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持`ECMAScript`规范的`JavaScript`语言。`JS UI`框架提供的声明式编程,可以让开发者避免编写`UI`状态切换的代码,视图配置信息更加直观。

- 跨设备

  开发框架架构上支持`UI`跨设备显示能力,运行时自动映射到不同设备类型,开发者无感知,降低开发者多设备适配成本。

- 高性能

  开发框架包含了许多核心的控件,如列表、图片和各类容器组件等,针对声明式语法进行了渲染流程的优化。

`JS UI`框架包括应用层`(Application)`、前端框架层`(Framework)`、引擎层`(Engine)`和平台适配层`(Porting Layer)`。

 

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇

# 空气质量监测 UI

## 1. 创建首页面

空气质量监测App包含两个界面`(Page)`,工程创建完成后会生成一个名为`index`的`Page`,可以作为首页。

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇

## 2. 创建详情页

在`pages`目录按右键,弹出的菜单中选择`New->JS Page`。

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇输入页面名称`detail`,

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇详情页创建完成后应用工程目录如下图所示,每个`Page`包括三个文件:布局文件`hml`、样式文件`css`、业务逻辑代码`js`。

 

#2020征文-开发板# 用鸿蒙开发AI应用(六)UI篇

## 3. 开发首页

应用首页主要展示城市的空气质量概况。首页总共有两屏(可以根据需求设置多屏),每屏显示一个城市的空气质量信息:主要包括AQI指数、城市名称、污染物指数、更新时间和信息来源等数据。

### 3.1 创建根节点

修改`entry/src/main/js/default/pages/index/index.hml`,加入根节点`div`:

<div class="container">
</div>

### 3.2 创建样式

修改`entry/src/main/js/default/pages/index/index.css`

.container {    
    flex-direction: column;
    height: 480px;
    width: 960px;
}

3.3 添加标题栏
标题栏包括一个退出按钮和一个标题,两个控件是横向排列

<div class="container">    
    <div class="header" onclick="exitApp">        
        <image class="back" src="common/ic_back.png"></image>        
        <text class="title">            
            空气质量        
         </text>    
    </div>
</div>

注意,这里要先导入common/ic_back.png图标资源。

 

3.4 添加标题栏样式
修改entry/src/main/js/default/pages/detail/detail.css,添加以下代码,设置组件的高度、边距、颜色等属性。

.header {    
    width: 960px;
    height: 72px;
}
.back {    
    width: 36px;
    height: 36px;
    margin-left: 39px;
    margin-top: 23px;
}
.title {    
    width: 296px;
    height: 40px;
    margin-top: 20px;
    margin-left: 21px;
    color: #e6e6e6;
}

 

### 3.5 添加退出事件

`onclick="exitApp"` 设置了`div`组件的`click`事件,当在标题栏上触发点击事件时,就会执行函数`exitApp`,该函数位于`index.js`文件中,代码如下:


文章后续内容和相关附件可以点击下面的原文链接前往学习
原文链接:https://harmonyos.51cto.com/posts/2875#bkwz


想了解更多关于鸿蒙的内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#bkwz