用鸿蒙开发AI应用（六）UI篇

小嵌

用鸿蒙开发AI应用（六）UI篇,   


前言

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

环境准备
1. 安装DevEco Studio 解压相应的压缩包（文末附下载链接），这里以win10为例，双击deveco-studio-2.0.12.201.exe 指定安装目录 设置可选快捷方式和环境变量 一路下一步即可。 同意用户协议后，就能正常启动了。
2. 更新sdk 在菜单 Setting->HarmonyOS SDK->SDK Platforms中，选择Js和Java，安装新版的SDK。 同样在SDK Tools中，选中新版的Previewer 点击Apply更新




新建项目 点击菜单File->New Project...，选择智慧屏Smart Vision，创建一个空模板应用。 填入项目名称MyUiAPP，点击完成就能创建一个工程了。

遇到 gradle下载太慢或版本差异的，可以直接在以下网址用工具下载 https://services.gradle.org/distributions/


目录结构 我们先分析一下目录结构，做Android开发的会倍感亲切。
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才能够独立运行。
    
  

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）。
空气质量监测 UI
1. 创建首页面 空气质量监测App包含两个界面（Page），工程创建完成后会生成一个名为index的Page，可以作为首页。


2. 创建详情页 在pages目录按右键，弹出的菜单中选择New->JS Page。 输入页面名称detail， 详情页创建完成后应用工程目录如下图所示，每个Page包括三个文件：布局文件hml、样式文件css、业务逻辑代码js。
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“>         

         <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文件中，代码如下： exitApp（） {   

     console.log（\“start exit\“）;   

     app.terminate（）;   

     console.log（\“end exit\“）;

} app.terminate（）函数实现了程序退出功能；在使用该函数前，需要引入app模块，在index.js文件的最上方写如下代码： import app from \“@system.app\“ 在 Previewer 窗口中，可以预览界面效果
3.6 滑动组件 实现城市空气质量信息的多屏左右滑动，需要使用“swiper”组件。 在根节点中添加一个子节点swiper, 修改index.hml <swiper class=“swiper“ index=“{{swiperPage}}“ duration=“500“>