1. 程式人生 > 其它 >OpenHarmony標準裝置應用開發(一)——HelloWorld

OpenHarmony標準裝置應用開發(一)——HelloWorld

(以下內容來自開發者分享,不代表 OpenHarmony 專案群工作委員會觀點)

 

邢碌

本文是 OpenAtom OpenHarmony(以下簡稱“OpenHarmony”)標準裝置應用開發的第一篇文章。這一篇我們主要聚焦於如何在標準裝置上執行一個最簡單的 OpenHarmony 程式。

 

本文主要內容包括三個方面:1. 應用編譯環境準備;2. Hello Openharmony 頁面編寫;3. 安裝應用到標準裝置上面。下面就讓我們從零開始學習 OpenHarmony 標準裝置應用開發。

 

一、應用開發環境準備


1.1 下載 DevEco Studio 3.0 Beta2 版本

連結:

https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta


1.2 配置 SDK


參考配置 OpenHarmony-SDK

https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Beta/zh-cn/application-dev/quick-start/configuring-openharmony-sdk.md


二、Hello Openharmony 頁面編寫


2.1 新建 eTS 工程


2.1.1 開啟 DevEco Studio,建立一個新工程,在 DevEco Studio 中點選 File -> New Project,選擇模板 Standard:Empty Ability。

 


2.1.2 進入配置工程介面,Language 選擇 eTS 語言,Project Type 選擇 Application,其他引數根據實際需要設定即可,最後點選 Finish 即建立成功。

 


備註:建立成功的專案,包結構說明參考連結:

https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Beta/zh-cn/application-dev/quick-start/package-structure.md


2.2 編寫 Hello Openharmony 頁面


2.2.1 開啟“index.ets”檔案

 

工程建立完成後,在 Project 視窗,點選“entry > src > main > ets > MainAbility > pages”,開啟“index.ets”檔案,專案結構如下圖所示。

 


2.2.2 在“index.ets”中編寫並設定頁面元件的屬性和樣式

 

“index.ets”頁面由 Flex 容器元件、Text 元件和 Button 元件構成。示例程式碼如下所示:

 

@Entry
@Component
struct Index {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button() {
        Text('next page')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
      }.type(ButtonType.Capsule)
      .margin({
        top: 20
      })
      .backgroundColor('#0D9FFB')
      .onClick(() => {
        routePage()
      })
    }
    .width('100%')
    .height('100%')
  }
}

 

2.2.3 相關語法說明

 

• @Entry 裝飾的自定義元件用作頁面的預設入口元件,載入頁面時,將首先建立並呈現 @Entry 裝飾的自定義元件。詳細資訊可以參考官網文件:

https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Beta/zh-cn/application-dev/ui/ts-component-based-entry.md


• @Component 裝飾的 struct 表示該結構體具有元件化能力,能夠成為一個獨立的元件,這種型別的元件也稱為自定義元件。詳細資訊可以參考官網文件:

https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Beta/zh-cn/application-dev/ui/ts-component-based-component.md


• @Builder 裝飾器定義了一個如何渲染自定義元件的方法。此裝飾器提供了一個修飾方法,其目的是和 build 函式一致。@Builder 裝飾器裝飾的方法的語法規範與 build 函式也保持一致。詳細資訊可以參考官網連結:

https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Beta/zh-cn/application-dev/ui/ts-component-based-builder.md


2.2.4 預覽器執行專案

 

點選右側的 Previewer 按鈕效果,如下圖所示:

預覽器連結:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_000

 

 

三、安裝應用


3.1 配置應用簽名信息

 

配置應用簽名信息 參考連結:https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Beta/zh-cn/application-dev/quick-start/configuring-openharmony-app-signature.m0001056725592__section16523172216252

d#%E7%94%9F%E6%88%90%E5%AF%86%E9%92%A5%E5%92%8C%E8%AF%81%E4%B9%A6%E8%AF%B7%E6%B1%82%E6%96%87%E4%BB%B6

 

3.2 點選“Build Haps”


在 bulid 目錄下生成 signed 簽名後的 hap 包,hap 包生成路徑如下圖所示:

 

 

3.3 安裝應用


開啟 OpenHarmony SDK 路徑 \toolchains 資料夾下,執行如下 hdc_std 命令,其中 path 為 hap 的絕對路徑。有如下資訊,即表明安裝成功。

 

hdc_std install -r path\entry-debug-standard-ark-signed.hap


四、裝置環境編譯準備


4.1 獲取 OpenHarmony 原始碼,OpenHarmony 版本須 3.0LTS 或 3.1 Beta
參考連結:https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Beta/zh-cn/device-dev/get-code/sourcecode-acquire.md


4.2 安裝開發板環境
參考連結:https://gitee.com/openharmony/docs/blob/OpenHarmony-3.0-LTS/zh-cn/device-dev/quick-start/quickstart-standard-docker-environment.md


4.3 開發板燒錄,這裡以 3516 開發板為例
參考連結:https://gitee.com/openharmony/docs/blob/OpenHarmony_1.0.1_release/zh-cn/device-dev/quick-start/%E5%BC%80%E5%8F%91Hi3516%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E7%A4%BA%E4%BE%8B.md#section08153912587


通過完成上述操作,就可以在裝置上執行一個最簡單的 OpenHarmony 程式。

 

在接下來的兩章中,我們會在本章的基礎上講解 OpenHarmony 標準裝置應用開發進階的一些技巧,以及分散式資料管理在 OpenHarmony 中的應用。