自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

用鴻蒙開(kāi)發(fā)AI應(yīng)用（六）UI篇

作者：bluishfish
開(kāi)發(fā)
文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請(qǐng)前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com/#zz

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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

前言
 上一篇，我們?cè)邙櫭缮蠈?xiě)了一個(gè)HDF驅(qū)動(dòng)并操作了一下LED硬件，這一篇我們來(lái)嘗試一下構(gòu)建一個(gè)有簡(jiǎn)單界面的App，體驗(yàn)一下鴻蒙的前端開(kāi)發(fā)流程。

環(huán)境準(zhǔn)備

1. 安裝DevEco Studio

解壓相應(yīng)的壓縮包(文末附下載鏈接)，這里以win10為例，雙擊`deveco-studio-2.0.12.201.exe`

 
指定安裝目錄
 
設(shè)置可選快捷方式和環(huán)境變量
 
一路下一步即可。
 

同意用戶(hù)協(xié)議后，就能正常啟動(dòng)了。

 
2. 更新sdk
 
在菜單 `Setting->HarmonyOS SDK->SDK Platforms`中，選擇`Js`和`Java`，安裝新版的`SDK`。
 

同樣在`SDK Tools`中，選中新版的`Previewer`。

 

點(diǎn)擊Apply更新

 

新建項(xiàng)目

點(diǎn)擊菜單`File->New Project...`，選擇智慧屏`Smart Vision`，創(chuàng)建一個(gè)空模板應(yīng)用。

填入項(xiàng)目名稱(chēng)`MyUiAPP`，點(diǎn)擊完成就能創(chuàng)建一個(gè)工程了。
 
遇到 `gradle`下載太慢或版本差異的，可以直接在以下網(wǎng)址用工具下載。
 
  1. https://services.gradle.org/distributions/ 

目錄結(jié)構(gòu)

我們先分析一下目錄結(jié)構(gòu)，做`Android`開(kāi)發(fā)的會(huì)倍感親切。

1. APP

`HarmonyOS`的應(yīng)用軟件包以`APP Pack(Application Package)`形式發(fā)布，它是由一個(gè)或多個(gè)`HAP(HarmonyOS Ability Package)`以及描述每個(gè)`HAP`屬性的`pack.info`組成。`HAP`是`Ability`的部署包，`HarmonyOS`應(yīng)用代碼圍繞`Ability`組件展開(kāi)。

一個(gè)`HAP`是由代碼、資源、第三方庫(kù)及應(yīng)用配置文件組成的模塊包，可分為`entry`和`feature`兩種模塊類(lèi)型。

- **entry**：應(yīng)用的主模塊。一個(gè)APP中，對(duì)于同一設(shè)備類(lèi)型必須有且只有一個(gè)`entry`類(lèi)型的`HAP`，可獨(dú)立安裝運(yùn)行。

- **feature**：應(yīng)用的動(dòng)態(tài)特性模塊。一個(gè)`APP`可以包含一個(gè)或多個(gè)`feature`類(lèi)型的`HAP`，也可以不含。只有包含`Ability`的`HAP`才能夠獨(dú)立運(yùn)行。

 

2. Ability

Ability是應(yīng)用所具備的能力的抽象，一個(gè)應(yīng)用可以包含一個(gè)或多個(gè)`Ability`。`Ability`分為兩種類(lèi)型：`FA(Feature Ability)`和`PA(Particle Ability)`。`FA/PA`是應(yīng)用的基本組成單元，能夠?qū)崿F(xiàn)特定的業(yè)務(wù)功能。`FA`有`UI`界面，而`PA`無(wú)`UI`界面。

3. 資源文件

應(yīng)用的資源文件(字符串、圖片、音頻等)統(tǒng)一存放于`resources`目錄下，便于開(kāi)發(fā)者使用和維護(hù)。`resources`目錄包括兩大類(lèi)目錄，一類(lèi)為`base`目錄與限定詞目錄，另一類(lèi)為`rawfile`目錄。

4. 配置文件

配置文件` (config.json) `是應(yīng)用的`Ability`信息，用于聲明應(yīng)用的`Ability`，以及應(yīng)用所需權(quán)限等信息。

- 應(yīng)用的全局配置信息，包含應(yīng)用的包名、生產(chǎn)廠(chǎng)商、版本號(hào)等基本信息。

- 應(yīng)用在具體設(shè)備上的配置信息，包含應(yīng)用的備份恢復(fù)、網(wǎng)絡(luò)安全等能力。

- `HAP`包的配置信息，包含每個(gè)`Ability`必須定義的基本屬性(如包名、類(lèi)名、類(lèi)型以及`Ability`提供的能力)，以及應(yīng)用訪(fǎng)問(wèn)系統(tǒng)或其他應(yīng)用受保護(hù)部分所需的權(quán)限等。

5. JS UI 框架

`JS UI`框架是一種跨設(shè)備的高性能`UI`開(kāi)發(fā)框架，支持聲明式編程和跨設(shè)備多態(tài)`UI`。

- 聲明式編程

`JS UI`框架采用類(lèi)`HTML`和`CSS`聲明式編程語(yǔ)言作為頁(yè)面布局和頁(yè)面樣式的開(kāi)發(fā)語(yǔ)言，頁(yè)面業(yè)務(wù)邏輯則支持`ECMAScript`規(guī)范的`JavaScript`語(yǔ)言。`JS UI`框架提供

的聲明式編程，可以讓開(kāi)發(fā)者避免編寫(xiě)`UI`狀態(tài)切換的代碼，視圖配置信息更加直觀。

- 跨設(shè)備

開(kāi)發(fā)框架架構(gòu)上支持`UI`跨設(shè)備顯示能力，運(yùn)行時(shí)自動(dòng)映射到不同設(shè)備類(lèi)型，開(kāi)發(fā)者無(wú)感知，降低開(kāi)發(fā)者多設(shè)備適配成本。

- 高性能

開(kāi)發(fā)框架包含了許多核心的控件，如列表、圖片和各類(lèi)容器組件等，針對(duì)聲明式語(yǔ)法進(jìn)行了渲染流程的優(yōu)化。

`JS UI`框架包括應(yīng)用層`(Application)`、前端框架層`(Framework)`、引擎層`(Engine)`和平臺(tái)適配層`(Porting Layer)`。

# 空氣質(zhì)量監(jiān)測(cè) UI

## 1. 創(chuàng)建首頁(yè)面

空氣質(zhì)量監(jiān)測(cè)App包含兩個(gè)界面`(Page)`，工程創(chuàng)建完成后會(huì)生成一個(gè)名為`index`的`Page`，可以作為首頁(yè)。

## 2. 創(chuàng)建詳情頁(yè)

在`pages`目錄按右鍵，彈出的菜單中選擇`New->JS Page`。

輸入頁(yè)面名稱(chēng)`detail`，
 

詳情頁(yè)創(chuàng)建完成后應(yīng)用工程目錄如下圖所示，每個(gè)`Page`包括三個(gè)文件：布局文件`hml`、樣式文件`css`、業(yè)務(wù)邏輯代碼`js`。

## 3. 開(kāi)發(fā)首頁(yè)

應(yīng)用首頁(yè)主要展示城市的空氣質(zhì)量概況。首頁(yè)總共有兩屏(可以根據(jù)需求設(shè)置多屏)，每屏顯示一個(gè)城市的空氣質(zhì)量信息：主要包括AQI指數(shù)、城市名稱(chēng)、污染物指數(shù)、更新時(shí)間和信息來(lái)源等數(shù)據(jù)。

### 3.1 創(chuàng)建根節(jié)點(diǎn)

修改`entry/src/main/js/default/pages/index/index.hml`，加入根節(jié)點(diǎn)`div`：

  1. <div class="container"> 
  2. </div> 

### 3.2 創(chuàng)建樣式

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

  1. container {     
  2.     flex-direction: column; 
  3.     height: 480px; 
  4.     width: 960px; 
  5. } 
 3.3 添加標(biāo)題欄

標(biāo)題欄包括一個(gè)退出按鈕和一個(gè)標(biāo)題，兩個(gè)控件是橫向排列

  1. <div class="container">     
  2.     <div class="header" onclick="exitApp">         
  3.         <image class="back" src="common/ic_back.png"></image>         
  4.         <text class="title">             
  5.             空氣質(zhì)量         
  6.          </text>     
  7.     </div> 
  8. </div> 

注意，這里要先導(dǎo)入common/ic_back.png圖標(biāo)資源。

3.4 添加標(biāo)題欄樣式

修改entry/src/main/js/default/pages/detail/detail.css，添加以下代碼，設(shè)置組件的高度、邊距、顏色等屬性。

  1. .header {     
  2.     width: 960px; 
  3.     height: 72px; 
  4. } 
  5. .back {     
  6.     width: 36px; 
  7.     height: 36px; 
  8.     margin-left: 39px; 
  9.     margin-top: 23px; 
  10. } 
  11. .title {     
  12.     width: 296px; 
  13.     height: 40px; 
  14.     margin-top: 20px; 
  15.     margin-left: 21px; 
  16.     color: #e6e6e6; 
  17. } 

### 3.5 添加退出事件

`onclick="exitApp"` 設(shè)置了`div`組件的`click`事件，當(dāng)在標(biāo)題欄上觸發(fā)點(diǎn)擊事件時(shí)，就會(huì)執(zhí)行函數(shù)`exitApp`，該函數(shù)位于`index.js`文件中，代碼如下：

  1. exitApp() {   
  2.     console.log('start exit');   
  3.     app.terminate();   
  4.     console.log('end exit'); 
  5. } 

`app.terminate()`函數(shù)實(shí)現(xiàn)了程序退出功能;在使用該函數(shù)前，需要引入`app`模塊，在`index.js`文件的最上方寫(xiě)如下代碼：

  1. import app from '@system.app' 

在 Previewer 窗口中，可以預(yù)覽界面效果

 

### 3.6 滑動(dòng)組件

實(shí)現(xiàn)城市空氣質(zhì)量信息的多屏左右滑動(dòng)，需要使用`“swiper”`組件。

在根節(jié)點(diǎn)中添加一個(gè)子節(jié)點(diǎn)`swiper`, 修改`index.hml`

  1. <swiper class="swiper" index="{{swiperPage}}" duration="500" onchange="swiperChange"> 
  2.  
  3. </swiper> 
 添加樣式，修改`index.css`
 
  1. .swiper { 
  2.     height: 385px; 
  3.     width: 960px; 
  4. } 
 綁定`swiperPage`變量，`swiperChange`事件，修改`index.js`
 
  1. //引入router模塊，用戶(hù)頁(yè)面跳轉(zhuǎn) 
  2. import router from'@system.router' 
  3. import app from '@system.app' 
  4.   
  5. export default { 
  6.     //定義參數(shù) 
  7.     data: { 
  8.       //默認(rèn)是第一頁(yè) 
  9.       swiperPage: 0  
  10.     }, 
  11.     onInit () { 
  12.     }, 
  13.     exitApp(){   
  14.         console.log('start exit');   
  15.         app.terminate();   
  16.         console.log('end exit'); 
  17.     }, 
  18.     //swiper滑動(dòng)回調(diào)事件，保存當(dāng)前swiper的index值，每次滑動(dòng)都會(huì)將index值保存在swiperPage變量中 
  19.     swiperChange (e) { 
  20.         this.swiperPage = e.index; 
  21.     } 
  22. } 

在`swiper`中添加兩個(gè)子組件`stack`(絕對(duì)布局)，每個(gè)`stack`組件內(nèi)分別添加`text、image、progress`等組件來(lái)顯示對(duì)應(yīng)的信息。

  1. <div class="container"> 
  2.     <div class="header" onclick="exitApp"> 
  3.         <image class="back" src="common/ic_back.png"></image> 
  4.         <text class="title"> 
  5.             空氣質(zhì)量 
  6.         </text> 
  7.     </div> 
  8.     <swiper class="swiper" index="{{swiperPage}}" duration="500" onchange="swiperChange"> 
  9.         <!--第一屏--> 
  10.         <stack class="swiper"> 
  11.             <!--空氣質(zhì)量--> 
  12.             <text class="airquality" style="color:{{textColor1}};">{{airData[0].airQuality}}</text> 
  13.             <!--城市名稱(chēng)--> 
  14.             <text class="location-text">{{airData[0].location}}</text> 
  15.             <!--進(jìn)度條--> 
  16.             <progress 
  17.                 class="circleProgress" 
  18.                 style="color:{{textColor1}};background-Color:{{bgColor1}};" 
  19.                 type="arc" 
  20.                 onclick="openDetail" 
  21.                 percent="{{percent1}}"> 
  22.             </progress> 
  23.             <!--云朵圖片--> 
  24.             <image class="image" src="{{src1}}"></image> 
  25.             <!--AQI數(shù)值--> 
  26.             <text class="pm25-value">{{ airData[0].detailData }}</text> 
  27.             <text class="pm25-name">AQI</text> 
  28.             <!--空氣指標(biāo)詳細(xì)信息--> 
  29.             <div class="detail"> 
  30.                 <div class="text-wrapper"> 
  31.                     <text class="gas-name"> 
  32.                         CO 
  33.                     </text> 
  34.                     <text class="gas-value"> 
  35.                         100 
  36.                     </text> 
  37.                 </div> 
  38.                 <div class="text-wrapper"> 
  39.                     <text class="gas-name"> 
  40.                         NO2 
  41.                     </text> 
  42.                     <text class="gas-value"> 
  43.                         90 
  44.                     </text> 
  45.                 </div> 
  46.                 <div class="text-wrapper"> 
  47.                     <text class="gas-name"> 
  48.                         PM10 
  49.                     </text> 
  50.                     <text class="gas-value"> 
  51.                         120 
  52.                     </text> 
  53.                 </div> 
  54.                 <div class="text-wrapper"> 
  55.                     <text class="gas-name"> 
  56.                         PM2.5 
  57.                     </text> 
  58.                     <text class="gas-value"> 
  59.                         40 
  60.                     </text> 
  61.                 </div> 
  62.                 <div class="text-wrapper"> 
  63.                     <text class="gas-name"> 
  64.                         SO2 
  65.                     </text> 
  66.                     <text class="gas-value"> 
  67.                         150 
  68.                     </text> 
  69.                 </div> 
  70.                 <input class="btn" type="button" onclick="openDetail" value="歷史記錄"></input> 
  71.             </div> 
  72.             <!--更新時(shí)間和網(wǎng)站等信息--> 
  73.             <div class="footer"> 
  74.                 <text class="update-time"> 
  75.                     更新時(shí)間: 10:38 
  76.                 </text> 
  77.                 <text class="info-source"> 
  78.                     信息來(lái)源: tianqi.com 
  79.                 </text> 
  80.             </div> 
  81.         </stack> 
  82.  
  83.         <!--第二屏--> 
  84.         <stack class="swiper"> 
  85.             <text class="airquality" style="color: {{textColor2}};">{{airData[1].airQuality}}</text> 
  86.             <text class="location-text">{{airData[1].location}}</text> 
  87.             <progress class="circle-progress" style="color: {{textColor2}};background-Color: {{bgColor2}};" type="arc" 
  88.                     percent="{{percent2}}"></progress> 
  89.             <image class="image" src="{{src2}}"></image> 
  90.             <text class="aqi-value">{{airData[1].detailData}}</text> 
  91.             <text class="aqi"> 
  92.                 AQI 
  93.             </text> 
  94.             <div class="detail"> 
  95.                 <div class="text-wrapper"> 
  96.                     <text class="gas-name"> 
  97.                         CO 
  98.                     </text> 
  99.                     <text class="gas-value"> 
  100.                         10 
  101.                     </text> 
  102.                 </div> 
  103.                 <div class="text-wrapper"> 
  104.                     <text class="gas-name"> 
  105.                         NO2 
  106.                     </text> 
  107.                     <text class="gas-value"> 
  108.                         50 
  109.                     </text> 
  110.                 </div> 
  111.                 <div class="text-wrapper"> 
  112.                     <text class="gas-name"> 
  113.                         PM10 
  114.                     </text> 
  115.                     <text class="gas-value"> 
  116.                         60 
  117.                     </text> 
  118.                 </div> 
  119.                 <div class="text-wrapper"> 
  120.                     <text class="gas-name"> 
  121.                         PM2.5 
  122.                     </text> 
  123.                     <text class="gas-value"> 
  124.                         40 
  125.                     </text> 
  126.                 </div> 
  127.                 <div class="text-wrapper"> 
  128.                     <text class="gas-name"> 
  129.                         SO2 
  130.                     </text> 
  131.                     <text class="gas-value"> 
  132.                         150 
  133.                     </text> 
  134.                 </div> 
  135.                 <input class="btn" type="button" onclick="openDetail" value="歷史記錄"></input> 
  136.             </div> 
  137.             <div class="footer"> 
  138.                 <text class="update-time"> 
  139.                     更新時(shí)間: 10:38 
  140.                 </text> 
  141.                 <text class="info-source"> 
  142.                     信息來(lái)源: tianqi.com 
  143.                 </text> 
  144.             </div> 
  145.         </stack> 
  146.     </swiper> 
  147. </div> 

### 3.7 頁(yè)面位置指示器

添加頁(yè)面位置指示器：由于當(dāng)前`swiper`不支持設(shè)置`indicator`，需要開(kāi)發(fā)者自己來(lái)實(shí)現(xiàn)該效果。在根節(jié)點(diǎn)中添加一個(gè)子組件`div`，并設(shè)置相應(yīng)樣式;然后在該`div`中添

加兩個(gè)子組件`div`，設(shè)置兩個(gè)`div`的`border-radius`，并在`swiper`滑動(dòng)事件中動(dòng)態(tài)改變對(duì)應(yīng)`div`的背景色來(lái)實(shí)現(xiàn)該效果。

修改`index.hml`，在`swiper`組件后加入以下代碼：

  1. <div class="images">     
  2.     <div class="circle-div" style="background-color: {{iconcheckedColor}};"></div>     
  3.     <div class="circle-div" style="background-color: {{iconUncheckedColor}};margin-left: 36px;"></div> 
  4. </div> 

### 3.8 新增文字樣式

修改 `index.css`

  1. aqi-value { 
  2.     text-align: center; 
  3.     font-size: 65px; 
  4.     color: #f0ffff; 
  5.     width: 156px; 
  6.     height: 92px; 
  7.     top: 134px; 
  8.     left: 210px; 
  9. } 
  10. .aqi { 
  11.     text-align: center; 
  12.     color: #a2c4a2; 
  13.     width: 156px; 
  14.     height: 45px; 
  15.     top: 90px; 
  16.     left: 210px; 
  17. } 
  18. .airquality { 
  19.     top: 222px; 
  20.     text-align: center; 
  21.     width: 156px; 
  22.     height: 45px; 
  23.     left: 210px; 
  24. } 
  25. .image { 
  26.     top: 285px; 
  27.     left: 274px; 
  28.     width: 32px; 
  29.     height: 32px; 
  30. } 
  31. .location-text { 
  32.     text-align: center; 
  33.     color: #ffffff; 
  34.     width: 250px; 
  35.     height: 52px; 
  36.     font-size: 40px; 
  37.     left: 380px; 
  38.     top: 16px; 
  39. } 
  40. .container { 
  41.     flex-direction: column; 
  42.     height: 480px; 
  43.     width: 960px; 
  44. } 
  45. .circle-progress { 
  46.     center-x: 128px; 
  47.     center-y: 128px; 
  48.     radius: 128px; 
  49.     startAngle: 198; 
  50.     totalAngle: 320; 
  51.     strokeWidth: 24px; 
  52.     width: 256px; 
  53.     height: 256px; 
  54.     left: 160px; 
  55.     top: 58px; 
  56. } 
  57. .detail { 
  58.     width: 256px; 
  59.     height: 265px; 
  60.     left: 544px; 
  61.     top: 58px; 
  62.     flex-direction: column; 
  63. } 
  64. .text-wrapper { 
  65.     width: 256px; 
  66.     height: 35px; 
  67.     margin-top: 6px; 
  68. } 
  69. .gas-name { 
  70.     width: 128px; 
  71.     height: 35px; 
  72.     text-align: left; 
  73. } 
  74. .gas-value { 
  75.     width: 128px; 
  76.     height: 35px; 
  77.     text-align: right; 
  78. } 
  79. .btn { 
  80.     width: 180px; 
  81.     height: 50px; 
  82.     margin-top: 6px; 
  83.     margin-left: 38px; 
  84.     background-color: #1a1a1a; 
  85.     color: #1085CE; 
  86. } 
  87. .footer { 
  88.     top: 326px; 
  89.     width: 960px; 
  90.     height: 28px; 
  91. } 
  92. .header { 
  93.     width: 960px; 
  94.     height: 72px; 
  95. } 
  96. .back { 
  97.     width: 36px; 
  98.     height: 36px; 
  99.     margin-left: 39px; 
  100.     margin-top: 23px; 
  101. } 
  102. .title { 
  103.     width: 296px; 
  104.     height: 40px; 
  105.     margin-top: 20px; 
  106.     margin-left: 21px; 
  107.     color: #e6e6e6; 
  108. } 
  109. .swiper { 
  110.     height: 385px; 
  111.     width: 960px; 
  112. } 
  113. .images { 
  114.     width: 60px; 
  115.     height: 15px; 
  116.     margin-left: 450px; 
  117. } 
  118. .update-time { 
  119.     width: 480px; 
  120.     height: 28px; 
  121.     font-size: 20px; 
  122.     color: #A9A9A9; 
  123.     text-align: right; 
  124. } 
  125. .info-source { 
  126.     width: 450px; 
  127.     height: 28px; 
  128.     font-size: 20px; 
  129.     color: #A9A9A9; 
  130.     text-align: left; 
  131.     margin-left: 24px; 
  132. } 
  133. .circle-div { 
  134.     width: 12px; 
  135.     height: 12px; 
  136.     border-radius: 6px; 
  137. } 
 ### 3.9 實(shí)現(xiàn)頁(yè)面邏輯

修改`index.js`，綁定頁(yè)面數(shù)據(jù)`data`。初始化時(shí)，根據(jù)不同的數(shù)值顯示不同的字體和圖片`onInit`。實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)`openDetail`，將當(dāng)前頁(yè)面索引傳遞給`detail`頁(yè)面。滑動(dòng)觸發(fā)后`swiperChange`改變指示位置。

  1. //引入router模塊，用戶(hù)頁(yè)面跳轉(zhuǎn) 
  2. import router from'@system.router' 
  3. import app from '@system.app' 
  4.  
  5. export default { 
  6. //定義參數(shù) 
  7.     data: { 
  8.         //頁(yè)面綁定數(shù)據(jù) 
  9.         textColor1: "#00ff00", 
  10.         textColor2: "#00ff00", 
  11.         bgColor1: "#669966", 
  12.         bgColor2: "#669966", 
  13.         //默認(rèn)是第一頁(yè) 
  14.         swiperPage: 0, 
  15.         percent1: 10, 
  16.         percent2: 90, 
  17.         iconUncheckedColor: '#262626', 
  18.         iconcheckedColor: '#ffffff', 
  19.         iconcheckedBR: '6px', 
  20.         src1: "common/cloud_green.png", 
  21.         src2: "common/cloud_green.png", 
  22.         airData: [ 
  23.           { 
  24.             location: "HangZhou", 
  25.             airQuality: "Good", 
  26.             detailData: 10 
  27.           }, 
  28.           { 
  29.             location: "ShangHai", 
  30.             airQuality: "Unhealth", 
  31.             detailData: 90 
  32.           } 
  33.         ] 
  34.     }, 
  35.     onInit () { 
  36.         //根據(jù)數(shù)值的不同，設(shè)置不同的字體、背景顏色和圖片 
  37.         if(this.airData[0].detailData > 100){ 
  38.             this.src1 = 'common/cloud_red.png'; 
  39.             this.textColor1 = '#ff0000'; 
  40.             this.bgColor1 = '#9d7462'; 
  41.         } else if(50 < this.airData[0].detailData && this.airData[0].detailData <= 100){ 
  42.             this.src1 = 'common/cloud_yellow.png'; 
  43.             this.textColor1 = '#ecf19a'; 
  44.             this.bgColor1 = '#9d9d62'; 
  45.         } 
  46.         if(this.airData[1].detailData > 100){ 
  47.             this.src2 = 'common/cloud_red.png'; 
  48.             this.textColor2 = '#ff0000'; 
  49.             this.bgColor2 = '#9d7462'; 
  50.         } else if(50 < this.airData[1].detailData && this.airData[1].detailData <= 100){ 
  51.             this.src2 = 'common/cloud_yellow.png'; 
  52.             this.textColor2 = '#ecf19a'; 
  53.             this.bgColor2 =  '#9d9d62'; 
  54.         } 
  55.         if(this.selectedCityIndex){ 
  56.             this.swiperPage = this.selectedCityIndex; 
  57.             if(this.swiperPage == 0){ 
  58.                 this.iconcheckedColor = '#ffffff'; 
  59.                 this.iconUncheckedColor = '#262626'; 
  60.             }else{ 
  61.                 this.iconcheckedColor = '#262626'; 
  62.                 this.iconUncheckedColor = '#ffffff'; 
  63.             } 
  64.         } 
  65.     }, 
  66.     //跳轉(zhuǎn)到詳情頁(yè)面 
  67.     openDetail () { 
  68.         router.replace({ 
  69.             uri: 'pages/detail/detail', 
  70.             params: {selectedCityIndex:this.swiperPage} 
  71.         }); 
  72.     }, 
  73.     //退出應(yīng)用 
  74.     exitApp(){ 
  75.         console.log('start exit'); 
  76.         app.terminate(); 
  77.         console.log('end exit'); 
  78.     }, 
  79.     //swiper滑動(dòng)回調(diào)事件，保存當(dāng)前swiper的index值，每次滑動(dòng)都會(huì)將index值保存在swiperPage變量中 
  80.     swiperChange (e) { 
  81.         this.swiperPage = e.index; 
  82.         if(e.index == 0){ 
  83.             this.iconcheckedColor = '#ffffff'; 
  84.             this.iconUncheckedColor = '#262626'; 
  85.         }else{ 
  86.             this.iconcheckedColor = '#262626'; 
  87.             this.iconUncheckedColor = '#ffffff'; 
  88.         } 
  89.     } 
  90. } 
 預(yù)覽效果如下：
 

## 4. 開(kāi)發(fā)詳情頁(yè)

詳情頁(yè)以圖表的形式展示一周內(nèi)空氣質(zhì)量指標(biāo)值。本頁(yè)面由兩部分組成：標(biāo)題欄和圖表欄;在圖表欄，考慮顯示效果，我們使用多個(gè)`div`替代`chart`組件來(lái)實(shí)現(xiàn)圖表功能。

### 4.1 添加標(biāo)題欄

修改 `entry/src/main/js/default/pages/detail/detail.hml`

  1. <div class="container"> 
  2.     <div class="header" onclick="backMain"> 
  3.         <image class="back" src="common/ic_back.png"></image> 
  4.         <text class="title"> 
  5.             歷史記錄 
  6.         </text> 
  7.     </div> 
  8.     <list class="chart-list"> 
  9.     </list> 
  10. </div> 

### 4.2 添加圖表欄

添加城市位置到`list-item-title`，圖表到`list-item-chart`

  1. <list class="chart-list"> 
  2.     <list-item class="list-item-title"> 
  3.         <text class="location">{{location}}</text> 
  4.     </list-item> 
  5.     <list-item class="list-item-chart"> 
  6.     </list-item> 
  7. </list> 
 4.3 添加圖表
  1. <div class="chart-wrapper" style="margin-left: 128px;"> 
  2.     <text class="gas-name">CO</text> 
  3.     <div class="chart"> 
  4.         <div class="chart-item" style="height: 78px;background-color: #00ff00;"></div> 
  5.         <div class="chart-item" style="height: 52px;background-color: #00ff00;"></div> 
  6.         <div class="chart-item" style="height: 155px;background-color: #ff0000;"></div> 
  7.         <div class="chart-item" style="height: 134px;background-color: #ff0000;"></div> 
  8.         <div class="chart-item" style="height: 98px;background-color: #FF7500;"></div> 
  9.         <div class="chart-item" style="height: 88px;background-color: #FF7500;"></div> 
  10.         <div class="chart-item" style="height: 144px;background-color: #ff0000;"></div> 
  11.     </div> 
  12.     <div class="white-line"></div> 
  13.     <div class="week"></div> 
  14. </div> 
 4.4 添加樣式
  1. .location { 
  2.     text-align: center; 
  3.     color: #ffffff; 
  4.     width: 960px; 
  5.     height: 52px; 
  6.     font-size: 40px; 
  7. } 
  8. .container { 
  9.     height: 480px; 
  10.     width: 960px; 
  11.     flex-direction: column; 
  12. } 
  13.  
  14. .header { 
  15.     width: 960px; 
  16.     height: 72px; 
  17. } 
  18.  
  19. .back { 
  20.     width: 36px; 
  21.     height: 36px; 
  22.     margin-left: 39px; 
  23.     margin-top: 23px; 
  24. } 
  25.  
  26. .title { 
  27.     width: 296px; 
  28.     height: 40px; 
  29.     margin-top: 20px; 
  30.     margin-left: 21px; 
  31.     color: #e6e6e6; 
  32. } 
  33.  
  34. .chart-list { 
  35.     width: 960px; 
  36.     height: 408px; 
  37. } 
  38.  
  39. .list-item-title { 
  40.     width: 960px; 
  41.     height: 52px; 
  42. } 
  43.  
  44. .list-item-chart { 
  45.     width: 960px; 
  46.     height: 280px; 
  47. } 
  48.  
  49. .chart-wrapper { 
  50.     width: 308px; 
  51.     height: 256px; 
  52.     flex-direction: column; 
  53. } 
  54.  
  55. .gas-name { 
  56.     width: 308px; 
  57.     height: 35px; 
  58.     text-align: left; 
  59. } 
  60.  
  61. .chart { 
  62.     width: 308px; 
  63.     height: 155px; 
  64.     margin-top: 10px; 
  65.     justify-content: flex-start; 
  66.     align-items: flex-end; 
  67. } 
  68.  
  69. .chart-item { 
  70.     width: 24px; 
  71.     margin-left: 18px; 
  72.     border-radius: 3px; 
  73. } 
  74.  
  75. .white-line { 
  76.     width: 308px; 
  77.     height: 2px; 
  78.     background-color: #ffffff; 
  79.     margin-top: 22px; 
  80. } 
  81.  
  82. .week { 
  83.     width: 308px; 
  84.     height: 17px; 
  85.     margin-top: 6px; 
  86.     border-color: #ffffff; 
  87.     border-radius: 2px; 
  88.     margin-top: 6px; 
  89. } 
  90.  
  91. .day { 
  92.     width: 26px; 
  93.     height: 17px; 
  94.     font-size: 10px; 
  95.     margin-left: 16px; 
  96.     text-align: center; 
  97. } 
 ### 4.5 實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)

其中`onclick="backMain"`為返回主頁(yè)事件，根據(jù)傳遞的頁(yè)面索引，顯示不同的位置數(shù)據(jù)，`detail.js`中的代碼實(shí)現(xiàn)如下：

  1. import router from '@system.router' 
  2.  
  3. export default { 
  4.     data: { 
  5.         location: '' 
  6.     }, 
  7.     onInit() { 
  8.         if (this.selectedCityIndex === 0) { 
  9.             this.location = '杭州'; 
  10.         } else { 
  11.             this.location = '上海'; 
  12.         } 
  13.     }, 
  14.     backMain() { 
  15.         router.replace({ 
  16.             uri: 'pages/index/index', 
  17.             params: { 
  18.                 selectedCityIndex: this.selectedCityIndex 
  19.             } 
  20.         }); 
  21.     } 
  22. } 
 

5. 模擬器調(diào)試

菜單Tools->HVD Manager，可以打開(kāi)云端的模擬器

 
注冊(cè)華為開(kāi)發(fā)者賬號(hào)，授權(quán)登錄后
 
 
就能看到模擬器列表了，相比`beta`版只有`Phone`、`TV`和`Wearable`三種，增加了不少的設(shè)備。
 
 

可惜還沒(méi)有可用于`smartVision`設(shè)備的模擬器，現(xiàn)階段我們還只能燒錄到設(shè)備中調(diào)試，總體上"富鴻蒙"的進(jìn)度比較快，期待一波更新。

## 6. 編譯打包

若開(kāi)發(fā)手機(jī)端的`App`，則需要申請(qǐng)證書(shū)，對(duì)應(yīng)用程序進(jìn)行簽名。這樣才能發(fā)布到應(yīng)用市場(chǎng)，才被允許安裝到真機(jī)上運(yùn)行。

`IPCamera`應(yīng)用**暫時(shí)不支持簽名模式**，所以需要將應(yīng)用發(fā)布為未簽名的應(yīng)用安裝包。

菜單`Build->Buildo APP(s)/Hap(s)->Build Release Hap(s)`，生成`Hap`文件。

輸出文件為 `build/outputs/hap/release/smartVision/entry-release-smartVision-unsigned.hap`，改名為`MyUiApp.hap`便于安裝。

## 7. 通過(guò)sdcard安裝

### 7.1 復(fù)制安裝包和工具

將IDE編譯的未簽名應(yīng)用安裝包和安裝工具(`Z:\openharmony\out\my_hi3516dv300\dev_tools`)放在`sdcard`中，將`sdcard`插入開(kāi)發(fā)板卡槽。

### 7.2 禁用簽名校驗(yàn)

應(yīng)用安裝默認(rèn)要校驗(yàn)簽名，需要執(zhí)行以下命令，關(guān)閉簽名校驗(yàn)。

  1. ./sdcard/dev_tools/bin/bm set -s disable 
 

7.3 安裝應(yīng)用

  1. ./sdcard/dev_tools/bin/bm install -p /sdcard/MyUiApp.hap  
 

## 8. 通過(guò)NFS安裝

每次插拔`sdcard`還是蠻不方便的，這里我們安裝一個(gè)`NFS`服務(wù)器，讓鴻蒙系統(tǒng)能直接訪(fǎng)問(wèn)`Win10`的目錄，后續(xù)安裝調(diào)試就會(huì)方便很多。

### 8.1 安裝NFS服務(wù)器

我們先安裝一個(gè)`haneWIN NFS服務(wù)器`， 雙擊文末網(wǎng)盤(pán)里的`nfs1169.exe`，一路下一步即可。

 

8.2 配置目錄參數(shù)

編輯輸出表文件，定義傳輸目錄

 
  1. # exports example 
  2.  
  3. # C:\ftp -range 192.168.1.1 192.168.1.10 
  4. # c:\public -public -readonly 
  5. # c:\tools -readonly 192.168.1.4 
  6.  
  7. D:\PycharmProjects\aiLearn\Harmony\tftp -public -name:nfs 
 ### 8.3 重啟服務(wù)

右鍵管理員權(quán)限，重啟所有服務(wù)，讓配置生效。

 

### 8.4 設(shè)置防火墻

防火墻設(shè)置`111、1058、2049`這些端口的`TCP`和`UDP`，入站規(guī)則放行。

  

### 8.5 鴻蒙上掛載目錄

主電腦的`ip`地址為`192.168.1.57`，`NFS`服務(wù)的別名為`nfs`，對(duì)應(yīng)的目錄為`D:\PycharmProjects\aiLearn\Harmony\tftp`

  1. mkdir nfs 
  2. mount 192.168.1.57:/nfs /nfs nfs 
  掛載到鴻蒙的剛新建的 `/nfs`目錄下，我們可以復(fù)制安裝包和安裝工具
 
 

8.6 安裝應(yīng)用

  1. cd nfs 
  2. ./dev_tools/bin/bm set -s disable 
  3. ./dev_tools/bin/bm install -p MyUiApp.hap 

前面做了這么多的鋪墊，后續(xù)開(kāi)發(fā)只要復(fù)制`hap`安裝包，直接一條命令安裝即可，非常方便。

 

# 運(yùn)行程序

安裝完成后，點(diǎn)擊桌面上的`MyUiApp`就能看見(jiàn)界面效果了。

`Js UI框架`對(duì)開(kāi)發(fā)者還是比較友好的，有小程序或快應(yīng)用的開(kāi)發(fā)經(jīng)驗(yàn)，上手應(yīng)該都比較順滑。

不過(guò)`HarmonyOS Device`的支持庫(kù)精簡(jiǎn)的非常嚴(yán)重，例如網(wǎng)絡(luò)訪(fǎng)問(wèn)的`@system.request`和`@system.fetch`都不可用，這些功能在“富鴻蒙”的設(shè)備上開(kāi)發(fā)就會(huì)比較方便。

# 資料下載

 

# 下一篇預(yù)告

> 本期主要介紹了一下JS框架下的界面開(kāi)發(fā)，

> 下一篇我們將嘗試熟悉更多的設(shè)備能力，

> 并打通從框架用戶(hù)態(tài)到驅(qū)動(dòng)內(nèi)核態(tài)之間的聯(lián)系，

> 敬請(qǐng)期待...

 
©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請(qǐng)注明出處，否則將追究法律責(zé)任

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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

 

責(zé)任編輯：jianghua 來(lái)源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)
相關(guān)推薦

2021-01-15 11:36:16

鴻蒙HarmonyOSAI應(yīng)用

2021-01-15 09:50:06

鴻蒙HarmonyOSAI應(yīng)用

2021-01-14 12:06:22

鴻蒙HarmonyOSAI應(yīng)用

2021-01-19 12:46:45

鴻蒙HarmonyOSHelloworld

2024-06-07 13:11:44

2011-04-14 10:05:16

BlackBerry

2011-04-14 10:03:32

UI組件BlackBerry

2021-02-06 10:40:45

鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)

2021-01-21 13:27:37

鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)

2021-10-18 10:14:26

鴻蒙HarmonyOS應(yīng)用

2021-01-05 10:35:04

鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)

2020-11-09 11:56:49

HarmonyOS

2021-11-24 16:02:57

鴻蒙HarmonyOS應(yīng)用

2020-09-28 15:13:04

鴻蒙

2019-05-05 11:02:07

vscodevue前端

2009-12-09 10:48:50

ibmdwLotus

2024-11-11 16:22:15

2025-02-24 02:00:00

AIC#模型

2022-09-09 14:42:17

應(yīng)用開(kāi)發(fā)ETS

2024-11-15 11:30:58

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)