概述

如何快速搭建基于OpenHarmony標(biāo)準(zhǔn)系統(tǒng)（Hi3516DV300開發(fā)板）的應(yīng)用開發(fā)環(huán)境，并基于一個時鐘APP示例逐步展示應(yīng)用的創(chuàng)建、開發(fā)、調(diào)試和安裝等流程。
時鐘App是一款顯示實時時間的應(yīng)用，顯示效果如下圖所示：

圖 1 時鐘應(yīng)用顯示效果圖

開發(fā)準(zhǔn)備

首先需要下載和配置DevEco Studio，具體操作請參考[DevEco Studio 使用指南]

開發(fā)步驟

應(yīng)用的功能是通過表盤和數(shù)字顯示實時時間。

從顯示效果圖分析可知，頁面由兩個部分組成：

• 表盤欄：主要展示一個動態(tài)的鐘表，且鐘表指針能準(zhǔn)確轉(zhuǎn)動。
• 數(shù)字時間欄：主要以數(shù)字形式顯示當(dāng)前時間。
• 開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]。

綜上，我們可搭建一個縱向兩行排列的彈性頁面布局來實現(xiàn)界面的功能。具體開發(fā)步驟如下：

1. 在hml文件中添加一個根節(jié)點div，注意每個hml文件中有且只能有一個根節(jié)點，代碼如下：

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

   class="container"表示組件使用的樣式，container是index.css文件中的一個樣式類，代碼如下：

   .container {     
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 100%;
   }
   

   在這個樣式類中，我們分別設(shè)置了根組件div的高度和寬度（注意在應(yīng)用的開發(fā)過程中，除部分組件（text）外必須顯式指定組件的高度和寬度，否則可能無法顯示）、并將flex-direction屬性設(shè)置為column，該屬性表示div的子組件是垂直方向從上到下排列；這樣就可以實現(xiàn)本節(jié)開頭所說的縱向兩行排列的彈性頁面布局。

2. 實現(xiàn)時鐘轉(zhuǎn)動，需要使用“stack”組件?！皊tack”組件的功能是堆疊容器，子組件按照順序依次入棧，后一個子組件覆蓋前一個子組件。
   在根組件下添加一個stack容器，代碼片段如下：

   < div class="container" >    
       < stack class="stack" >
           < image src="/common/clock_bg.png" class="clock-bg" >< /image > < !--設(shè)置表盤圖片-- >
           < image src="/common/hour_hand.png" class="clock-hand"
                  style="transform : rotate({{ hour * 30 + minute / 2 }}deg);" >< /image > < !--設(shè)置時鐘圖片，(hour * 30)一小時旋轉(zhuǎn)30度，(minute / 2)時鐘每分鐘旋轉(zhuǎn)的角度-- >
           < image src="/common/minute_hand.png" class="clock-hand"
                  style="transform : rotate({{ minute * 6 + second / 10 }}deg);" >< /image > < !--設(shè)置分鐘圖片，(minute * 6)一分鐘旋轉(zhuǎn)6度，(second / 10)分鐘每秒鐘旋轉(zhuǎn)的角度-- >
           < image src="/common/second_hand.png" class="clock-hand"
                  style="transform : rotate({{ second * 6 }}deg);" >< /image > < !--設(shè)置秒鐘圖片，(second * 6)一秒旋轉(zhuǎn)6度-- >
      < /stack >
   < /div >
   

   style="transform : rotate({{ second * 6 }}deg) 這類代碼用來設(shè)置組件的旋轉(zhuǎn)事件。其中transform是設(shè)置動畫平移/旋轉(zhuǎn)/縮放的屬性，rotate是旋轉(zhuǎn)動畫屬性，支持設(shè)置x軸和y軸兩個維度的選中參數(shù)。

   在css文件中設(shè)置"stack"組件樣式的高度、寬度、位置等屬性，代碼如下：

   .stack {
       flex-direction: column;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 50%;
   }
   

   在css文件中設(shè)置"clock-bg"組件樣式的高度、寬度等屬性，代碼如下：

   .clock-bg {
       width: 80%;
       height: 80%;
       object-fit: scale-down;
   }
   

   在css文件中設(shè)置"clock-hand"組件為時針、分針和秒針的高度、寬度等屬性，代碼如下：

   .clock-hand {
       width: 25%;
       height: 65%;
       object-fit: contain;
   }
   

   index.js中會有一個定時器實時刷新時分秒變量，從而觸發(fā)時間界面自動更新。對應(yīng)的js代碼如下：

   export default {
       timer: undefined,
       //定義參數(shù)
       data: {
         hour: 0,   //定義小時
         minute: 0, //定義分鐘
         second: 0  //定義秒
       },
       onInit () {
           this.updateTime();
           this.timer = setInterval(this.updateTime, 1000)//設(shè)置1s的定時器
       },  
       updateTime: function () {       
           var nowTime = new Date()    
           this.hour = nowTime.getHours()    
           this.minute = nowTime.getMinutes()   
           this.second = nowTime.getSeconds()    
           if (this.hour < 10) {        
               this.hour = '0' + this.hour    
           }  
           if (this.minute < 10) {       
               this.minute = '0' + this.minute   
           }    
           if (this.second < 10) {      
               this.second = '0' + this.second   
           }
       },
   }
   

3. 顯示數(shù)字時間，在鐘表下面以數(shù)字形式顯示當(dāng)前時間。在根布局內(nèi)末尾加上text組件，頁面結(jié)構(gòu)如下：

   < text class="digit-clock" > {{ hour }}:{{ minute }}:{{ second }}< /text >
   

   class="digit-clock"設(shè)置了組件的高度和寬度以及字體大小，其代碼如下：

   .digit-clock {    
       font-size: 58px;   
       width: 100%;
       margin-top: 0px;
       text-align: center;
   }
   

4. 所有組件設(shè)置樣式、動畫效果和數(shù)據(jù)動態(tài)綁定，完整代碼如下所示：

   • index.hml文件

     < div class="container" >
         < stack class="stack" >
             < image src="/common/clock_bg.png" class="clock-bg" >< /image >
             < image src="/common/hour_hand.png" class="clock-hand"
                    style="transform : rotate({{ hour * 30 + minute / 2 }}deg);" >< /image >
             < image src="/common/minute_hand.png" class="clock-hand"
                    style="transform : rotate({{ minute * 6 + second / 10 }}deg);" >< /image >
             < image src="/common/second_hand.png" class="clock-hand"
                    style="transform : rotate({{ second * 6 }}deg);" >< /image >
         < /stack >
         < text class="digit-clock" >{{ hour }}:{{ minute }}:{{ second }}< /text >
     < /div >
     

   • index.css文件

     .container {
         flex-direction: column;
         justify-content: center;
         align-items: center;
         width: 100%;
         height: 100%;
     }
     
     .stack {
         flex-direction: column;
         justify-content: center;
         align-items: center;
         width: 100%;
         height: 50%;
     }
     
     .digit-clock {
         font-size: 58px;
         width: 100%;
         margin-top: 0px;
         text-align: center;
     }
     
     .clock-bg {
         width: 80%;
         height: 80%;
         object-fit: scale-down;
     }
     
     .clock-hand {
         width: 25%;
         height: 65%;
         object-fit: contain;
     }
     

   • index.js:
     js文件主要用于實現(xiàn)App應(yīng)用的邏輯交互。在本頁面js文件中，需要實現(xiàn)如下功能：定時獲取系統(tǒng)時間。

     export default {
         timer: undefined,
         data: {
             hour: 0,
             minute: 0,
             second: 0
         },
         onInit() {
             this.updateTime()
             this.timer = setInterval(this.updateTime, 1000)
         },
         updateTime: function () {
             var nowTime = new Date()
             this.hour = nowTime.getHours()
             this.minute = nowTime.getMinutes()
             this.second = nowTime.getSeconds()
             if (this.hour < 10) {
                 this.hour = '0' + this.hour
             }
             if (this.minute < 10) {
                 this.minute = '0' + this.minute
             }
             if (this.second < 10) {
                 this.second = '0' + this.second
             }
         },
         onDestroy() {
             clearInterval(this.timer);
         }
     }
     

簽名打包

代碼編寫完成后，在真機(jī)設(shè)備上運行應(yīng)用，需要先對應(yīng)用進(jìn)行簽名，然后再進(jìn)行打包，具體操作請參考[簽名打包指導(dǎo)]

真機(jī)運行

應(yīng)用簽名打包后即可安裝到開發(fā)板。安裝應(yīng)用前需要先完成[DevEco Device Tool的安裝配置]，然后將OpenHarmony系統(tǒng)燒錄到開發(fā)板并運行。編譯燒錄、運行鏡像的基本操作請參考快速入門手冊：[標(biāo)準(zhǔn)系統(tǒng)Hi3516快速入門]。完成鏡像運行，系統(tǒng)正常啟動后，執(zhí)行如下步驟安裝或卸載應(yīng)用。

1. 從開發(fā)者工具代碼倉路徑中獲取hdc客戶端。

   developtools/hdc_standard/prebuilt/windows/hdc_std.exe
   

   修改名稱為hdc.exe，并將工具路徑加入系統(tǒng)環(huán)境path變量中。

2. 啟動cmd命令窗口，執(zhí)行以下命令，推送hap應(yīng)用包到設(shè)備目錄下并安裝。

   hdc install clock.hap
   

3. 啟動應(yīng)用。執(zhí)行以下命令，其中ohos.samples.clock為應(yīng)用包名，MainAbility為應(yīng)用啟動的Ability。

   hdc shell aa start -d 123 -a ohos.samples.clock.MainAbility -b ohos.samples.clock
   

4. 卸載應(yīng)用（可選）。執(zhí)行以下命令，其中ohos.samples.clock為應(yīng)用包名。

   hdc shell bm uninstall -n ohos.samples.clock
   

常見問題

HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿

hdc_std連接不到設(shè)備

• 現(xiàn)象描述
  執(zhí)行 "hdc_std list targets"命令后結(jié)果為：[Empty]
• 可能原因和解決方法
  1. 設(shè)備沒有被識別：
     在設(shè)備管理器中查看是否有hdc設(shè)備，在通用串行總線設(shè)備中會有“HDC Device”信息。如果沒有，hdc無法連接。此時需要插拔設(shè)備，或者燒寫最新的鏡像。
  2. hdc_std工作異常：
     可以執(zhí)行"hdc kill"或者"hdc start -r"殺掉hdc服務(wù)或者重啟hdc服務(wù)，然后再執(zhí)行hdc list targets查看是否已經(jīng)可以獲取設(shè)備信息。
  3. hdc_std與設(shè)備不匹配：
     如果設(shè)備燒寫的是最新鏡像，hdc_std也需要使用最新版本。由于hdc_std會持續(xù)更新，請從開源倉developtools_hdc_standard中獲取，具體位置在該開源倉的prebuilt目錄。

hdc_std運行不了

• 現(xiàn)象描述
  點擊hdc_std.exe文件無法運行。
• 可能原因和解決方法
  hdc_std.exe不需要安裝，直接放到磁盤上就能使用，也可以添加到環(huán)境變量中。通過打開cmd執(zhí)行hdc_std命令直接使用。

審核編輯 黃宇