構(gòu)建第一個ArkTS應用（Stage模型）

2024-01-25 11:51 更新
說明

為確保運行效果，本文以使用DevEco Studio 3.1 Release版本為例，點擊此處獲取下載鏈接。

創(chuàng)建ArkTS工程

  1. 若首次打開DevEco Studio，請點擊Create Project創(chuàng)建工程。如果已經(jīng)打開了一個工程，請在菜單欄選擇File > New > Create Project來創(chuàng)建一個新工程。
  2. 選擇Application應用開發(fā)（本文以應用開發(fā)為例，Atomic Service對應為元服務開發(fā)），選擇模板“Empty Ability”，點擊Next進行下一步配置。

  3. 進入配置工程界面，Compile SDK選擇“3.1.0(API 9)”，Model 選擇“Stage”，其他參數(shù)保持默認設置即可。

    說明

    支持使用ArkTS低代碼開發(fā)方式。

    低代碼開發(fā)方式具有豐富的UI界面編輯功能，通過可視化界面開發(fā)方式快速構(gòu)建布局，可有效降低開發(fā)者的上手成本并提升開發(fā)者構(gòu)建UI界面的效率。

    如需使用低代碼開發(fā)方式，請打開上圖中的Enable Super Visual開關。

  4. 點擊Finish，工具會自動生成示例代碼和相關資源，等待工程創(chuàng)建完成。

ArkTS工程目錄結(jié)構(gòu)（Stage模型）

  • AppScope > app.json5：應用的全局配置信息。
  • entry：HarmonyOS工程模塊，編譯構(gòu)建生成一個HAP包。
    • src > main > ets：用于存放ArkTS源碼。
    • src > main > ets > entryability：應用/服務的入口。
    • src > main > ets > pages：應用/服務包含的頁面。
    • src > main > resources：用于存放應用/服務所用到的資源文件，如圖形、多媒體、字符串、布局文件等。關于資源文件，詳見資源分類與訪問。
    • src > main > module.json5：Stage模型模塊配置文件。主要包含HAP包的配置信息、應用/服務在具體設備上的配置信息以及應用/服務的全局配置信息。具體的配置文件說明，詳見module.json5配置文件。
    • build-profile.json5：當前的模塊信息、編譯信息配置項，包括buildOption、targets配置等。其中targets中可配置當前運行環(huán)境，默認為HarmonyOS。
    • hvigorfile.ts：模塊級編譯構(gòu)建任務腳本，開發(fā)者可以自定義相關任務和代碼實現(xiàn)。
  • oh_modules：用于存放三方庫依賴信息。關于原npm工程適配ohpm操作，請參考歷史工程遷移。

  • build-profile.json5：應用級配置信息，包括簽名、產(chǎn)品配置等。

  • hvigorfile.ts：應用級編譯構(gòu)建任務腳本。

構(gòu)建第一個頁面

  1. 使用文本組件。

    工程同步完成后，在“Project”窗口，點擊“entry > src > main > ets > pages”，打開“Index.ets”文件，可以看到頁面由Text組件組成。“Index.ets”文件的示例如下：

    1. // Index.ets
    2. @Entry
    3. @Component
    4. struct Index {
    5.   @State message: string = 'Hello World'
    6. 

    7.   build() {
    8.     Row() {
    9.       Column() {
    10.         Text(this.message)
    11.           .fontSize(50)
    12.           .fontWeight(FontWeight.Bold)
    13.       }
    14.       .width('100%')
    15.     }
    16.     .height('100%')
    17.   }
    18. }

  2. 添加按鈕。

    在默認頁面基礎上，我們添加一個Button組件，作為按鈕響應用戶點擊，從而實現(xiàn)跳轉(zhuǎn)到另一個頁面。“Index.ets”文件的示例如下：

    1. // Index.ets
    2. @Entry
    3. @Component
    4. struct Index {
    5.   @State message: string = 'Hello World'
    6. 

    7.   build() {
    8.     Row() {
    9.       Column() {
    10.         Text(this.message)
    11.           .fontSize(50)
    12.           .fontWeight(FontWeight.Bold)
    13.         // 添加按鈕，以響應用戶點擊
    14.         Button() {
    15.           Text('Next')
    16.             .fontSize(30)
    17.             .fontWeight(FontWeight.Bold)
    18.         }
    19.         .type(ButtonType.Capsule)
    20.         .margin({
    21.           top: 20
    22.         })
    23.         .backgroundColor('#0D9FFB')
    24.         .width('40%')
    25.         .height('5%')
    26.       }
    27.       .width('100%')
    28.     }
    29.     .height('100%')
    30.   }
    31. }

  3. 在編輯窗口右上角的側(cè)邊工具欄，點擊Previewer，打開預覽器。第一個頁面效果如下圖所示：

構(gòu)建第二個頁面

  1. 創(chuàng)建第二個頁面。

    • 新建第二個頁面文件。在“Project”窗口，打開“entry > src > main > ets ”，右鍵點擊“pages”文件夾，選擇“New > ArkTS File”，命名為“Second”，點擊“Finish”?？梢钥吹轿募夸浗Y(jié)構(gòu)如下：

      說明

      開發(fā)者也可以在右鍵點擊“pages”文件夾時，選擇“New > Page”，則無需手動配置相關頁面路由。

    • 配置第二個頁面的路由。在“Project”窗口，打開“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二個頁面的路由“pages/Second”。示例如下：

      1. {
      2.   "src": [
      3.     "pages/Index",
      4.     "pages/Second"
      5.   ]
      6. }

  2. 添加文本及按鈕。

    參照第一個頁面，在第二個頁面添加Text組件、Button組件等，并設置其樣式。“Second.ets”文件的示例如下：

    1. // Second.ets
    2. @Entry
    3. @Component
    4. struct Second {
    5.   @State message: string = 'Hi there'
    6. 

    7.   build() {
    8.     Row() {
    9.       Column() {
    10.         Text(this.message)
    11.           .fontSize(50)
    12.           .fontWeight(FontWeight.Bold)
    13.         Button() {
    14.           Text('Back')
    15.             .fontSize(25)
    16.             .fontWeight(FontWeight.Bold)
    17.         }
    18.         .type(ButtonType.Capsule)
    19.         .margin({
    20.           top: 20
    21.         })
    22.         .backgroundColor('#0D9FFB')
    23.         .width('40%')
    24.         .height('5%')
    25.       }
    26.       .width('100%')
    27.     }
    28.     .height('100%')
    29.   }
    30. }

實現(xiàn)頁面間的跳轉(zhuǎn)

頁面間的導航可以通過頁面路由router來實現(xiàn)。頁面路由router根據(jù)頁面url找到目標頁面，從而實現(xiàn)跳轉(zhuǎn)。使用頁面路由請導入router模塊。

  1. 第一個頁面跳轉(zhuǎn)到第二個頁面。

    在第一個頁面中，跳轉(zhuǎn)按鈕綁定onClick事件，點擊按鈕時跳轉(zhuǎn)到第二頁?！?span>Index.ets”文件的示例如下：

    1. // Index.ets
    2. // 導入頁面路由模塊
    3. import router from '@ohos.router';
    4. 

    5. @Entry
    6. @Component
    7. struct Index {
    8.   @State message: string = 'Hello World'
    9. 

    10.   build() {
    11.     Row() {
    12.       Column() {
    13.         Text(this.message)
    14.           .fontSize(50)
    15.           .fontWeight(FontWeight.Bold)
    16.         // 添加按鈕，以響應用戶點擊
    17.         Button() {
    18.           Text('Next')
    19.             .fontSize(30)
    20.             .fontWeight(FontWeight.Bold)
    21.         }
    22.         .type(ButtonType.Capsule)
    23.         .margin({
    24.           top: 20
    25.         })
    26.         .backgroundColor('#0D9FFB')
    27.         .width('40%')
    28.         .height('5%')
    29.         // 跳轉(zhuǎn)按鈕綁定onClick事件，點擊時跳轉(zhuǎn)到第二頁
    30.         .onClick(() => {
    31.           console.info(`Succeeded in clicking the 'Next' button.`)
    32.           // 跳轉(zhuǎn)到第二頁
    33.           router.pushUrl({ url: 'pages/Second' }).then(() => {
    34.             console.info('Succeeded in jumping to the second page.')
    35.           }).catch((err) => {
    36.             console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)
    37.           })
    38.         })
    39.       }
    40.       .width('100%')
    41.     }
    42.     .height('100%')
    43.   }
    44. }

  2. 第二個頁面返回到第一個頁面。

    在第二個頁面中，返回按鈕綁定onClick事件，點擊按鈕時返回到第一頁。“Second.ets”文件的示例如下：

    1. // Second.ets
    2. // 導入頁面路由模塊
    3. import router from '@ohos.router';
    4. 

    5. @Entry
    6. @Component
    7. struct Second {
    8.   @State message: string = 'Hi there'
    9. 

    10.   build() {
    11.     Row() {
    12.       Column() {
    13.         Text(this.message)
    14.           .fontSize(50)
    15.           .fontWeight(FontWeight.Bold)
    16.         Button() {
    17.           Text('Back')
    18.             .fontSize(25)
    19.             .fontWeight(FontWeight.Bold)
    20.         }
    21.         .type(ButtonType.Capsule)
    22.         .margin({
    23.           top: 20
    24.         })
    25.         .backgroundColor('#0D9FFB')
    26.         .width('40%')
    27.         .height('5%')
    28.         // 返回按鈕綁定onClick事件，點擊按鈕時返回到第一頁
    29.         .onClick(() => {
    30.           console.info(`Succeeded in clicking the 'Back' button.`)
    31.           try {
    32.             // 返回第一頁
    33.             router.back()
    34.             console.info('Succeeded in returning to the first page.')
    35.           } catch (err) {
    36.             console.error(`Failed to return to the first page.Code is ${err.code}, message is ${err.message}`)
    37.           }
    38.         })
    39.       }
    40.       .width('100%')
    41.     }
    42.     .height('100%')
    43.   }
    44. }

  3. 打開“Index.ets”文件，點擊預覽器中的按鈕進行刷新。效果如下圖所示：

使用真機運行應用

運行HarmonyOS應用可以使用遠程模擬器和物理真機設備，區(qū)別在于使用遠程模擬器運行應用不需要對應用進行簽名。接下來將以物理真機設備為例，介紹HarmonyOS應用的運行方法，關于模擬器的使用請參考使用Remote Emulator運行應用/服務。

  1. 將搭載HarmonyOS系統(tǒng)的真機與電腦連接。具體指導及要求，可查看使用本地真機運行應用/服務。
  2. 點擊File > Project Structure... > Project > SigningConfigs界面勾選“Support HarmonyOS”和“Automatically generate signature”，點擊界面提示的“Sign In”，使用華為帳號登錄。等待自動簽名完成后，點擊“OK”即可。如下圖所示：

  3. 在編輯窗口右上角的工具欄，點擊按鈕運行。效果如下圖所示：

恭喜您已經(jīng)使用ArkTS語言開發(fā)（Stage模型）完成了第一個HarmonyOS應用，快來探索更多的HarmonyOS功能吧。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號