鴻蒙前端開發-構建第一個ArkTS應用（Stage模型）

創建ArkTS工程

若首次打開DevEco Studio，請點擊Create Project創建工程。如果已經打開了一個工程，請在菜單欄選擇File?>?New?>?Create Project來創建一個新工程。
選擇Application應用開發（本文以應用開發為例，Atomic Service對應為元服務開發），選擇模板“Empty Ability”，點擊Next進行下一步配置。
進入配置工程界面，Compile SDK選擇“3.1.0(API 9) ”，Model?選擇“Stage”，其他參數保持默認設置即可。

說明

支持使用ArkTS低代碼開發方式。

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

如需使用低代碼開發方式，請打開上圖中的Enable Super Visual開關。
點擊Finish，工具會自動生成示例代碼和相關資源，等待工程創建完成。

ArkTS工程目錄結構（Stage模型）

AppScope > app.json5：應用的全局配置信息。
entry：HarmonyOS工程模塊，編譯構建生成一個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中可配置當前運行環境，默認為HarmonyOS。
- hvigorfile.ts：模塊級編譯構建任務腳本，開發者可以自定義相關任務和代碼實現。
oh_modules：用于存放三方庫依賴信息。關于原npm工程適配ohpm操作，請參考歷史工程遷移。
build-profile.json5：應用級配置信息，包括簽名、產品配置等。
hvigorfile.ts：應用級編譯構建任務腳本。

構建第一個頁面

使用文本組件。

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

// Index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')
}
}

添加按鈕。

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

 // Index.ets
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按鈕，以響應用戶點擊Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')}.width('100%')}.height('100%')}
}

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

構建第二個頁面

創建第二個頁面。
- 新建第二個頁面文件。在“Project”窗口，打開“entry > src > main > ets ”，右鍵點擊“pages”文件夾，選擇“New > ArkTS File”，命名為“Second”，點擊“Finish”。可以看到文件目錄結構如下：
  
  說明
  
  開發者也可以在右鍵點擊“pages”文件夾時，選擇“New > Page”，則無需手動配置相關頁面路由。
- 配置第二個頁面的路由。在“Project”窗口，打開“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二個頁面的路由“pages/Second”。示例如下：

       {  "src": [    "pages/Index",    "pages/Second"  ]}

添加文本及按鈕。

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

// Second.ets
@Entry
@Component
struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')}.width('100%')}.height('100%')}
}

實現頁面間的跳轉

頁面間的導航可以通過頁面路由router來實現。頁面路由router根據頁面url找到目標頁面，從而實現跳轉。使用頁面路由請導入router模塊。

第一個頁面跳轉到第二個頁面。

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

 // Index.ets
// 導入頁面路由模塊
import router from '@ohos.router';@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按鈕，以響應用戶點擊Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')// 跳轉按鈕綁定onClick事件，點擊時跳轉到第二頁.onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)// 跳轉到第二頁router.pushUrl({ url: 'pages/Second' }).then(() => {console.info('Succeeded in jumping to the second page.')}).catch((err) => {console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)})})}.width('100%')}.height('100%')}
}

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

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

// Second.ets
// 導入頁面路由模塊
import router from '@ohos.router';@Entry
@Component
struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')// 返回按鈕綁定onClick事件，點擊按鈕時返回到第一頁.onClick(() => {console.info(`Succeeded in clicking the 'Back' button.`)try {// 返回第一頁router.back()console.info('Succeeded in returning to the first page.')} catch (err) {console.error(`Failed to return to the first page.Code is ${err.code}, message is ${err.message}`)}})}.width('100%')}.height('100%')}
}

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

使用真機運行應用

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

將搭載HarmonyOS系統的真機與電腦連接。具體指導及要求，可查看使用本地真機運行應用/服務。
點擊File?>?Project Structure… ?>?Project?>?SigningConfigs界面勾選“Support HarmonyOS”和“Automatically generate signature”，點擊界面提示的“Sign In”，使用華為帳號登錄。等待自動簽名完成后，點擊“OK”即可。如下圖所示：
在編輯窗口右上角的工具欄，點擊按鈕運行。效果如下圖所示：