前言
上一篇，我們在鴻蒙上寫了一個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" 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
https://harmonyos.51cto.com/#bkwz