使用ArkTS語言開發（Stage模型）

說明：
開發前請熟悉鴻蒙開發指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
請使用DevEco Studio 4.0 Beta2及更高版本。如果使用其它版本，可能存在文檔與產品功能界面、操作不一致的情況，請以實際功能界面為準。

應用介紹

通過構建一個簡單的ArkUI頁面跳轉示例，快速了解資源創建引用，路由代碼編寫和UI布局編寫等應用開發流程。

導入應用模板

• 通過Import Samples導入helloworld工程。

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

• AppScope > app.json5 ：應用的全局配置信息。
• entry ：OpenHarmony工程模塊，編譯構建生成一個HAP包。
  • build ：用于存放OpenHarmony編譯生成的hap包。
  • src > main > ets ：用于存放ArkTS源碼。
  • src > main > ets > entryability ：應用/服務的入口。
  • src > main > ets > pages ：應用/服務包含的頁面。
  • src > main > resources ：用于存放應用/服務所用到的資源文件，如圖形、多媒體、字符串、布局文件等。
  • src > main > module.json5 ：模塊配置文件。主要包含HAP包的配置信息、應用/服務在具體設備上的配置信息以及應用/服務的全局配置信息。
  • build-profile.json5 ：當前的模塊信息 、編譯信息配置項，包括buildOption、targets配置等。
  • hvigorfile.ts ：模塊級編譯構建任務腳本，開發者可以自定義相關任務和代碼實現。
• oh_modules ：用于存放三方庫依賴信息。
• build-profile.json5 ：應用級配置信息，包括簽名signingConfigs、產品配置products等。
• hvigorfile.ts ：應用級編譯構建任務腳本。

編寫代碼

在上述工程創建完成后，開發者可在項目中的entry目錄下進行代碼開發。

構建第一個頁面

創建第一個頁面。

1.在第一個頁面添加Text組件、Button組件等，并設置其樣式。

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

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

構建第二個頁面

1. 創建第二個頁面。
   • 新建第二個頁面文件。在“ Project ”窗口，打開“ entry > src > main > ets ”，右鍵點擊“ pages ”文件夾，
     
   • 新建的頁面命名為“ Second ”，點擊“ Finish ”。
     
   • 可以看到文件目錄結構如下：
     
2. 添加文本及按鈕。
   參照第一個頁面，在第二個頁面添加Text組件、Button組件等，并設置其樣式?！?Second.ets ”文件的示例如下：

   // second.ets
    @Entry
    @Component
    struct Second {
        build() {
          Row() {
            Column() {
              Text()
                .fontSize(50)
                .fontWeight(FontWeight.Bold)
              Button() {
                Text()
                  .fontSize(25)
                  .fontWeight(FontWeight.Bold)
              }
              .type(ButtonType.Capsule)
              .margin({
                top: 20
              })
              .backgroundColor()
              .width('40%')
              .height('5%')
            }
            .width('100%')
          }
          .height('100%')
        }
    }
   

引用資源

1.定義需要被引用的文字資源：在“ Project ”窗口，點擊“ entry > src > main > resources > base > element > string.json ”，打開“ string.json ”文件，加入藍框的文字資源，如下圖展示：

• 引用文字資源：在 Text() 中用 $r('app.string.xx') 的方式引用文字資源。

2.定義需要被引用的顏色資源：在“ Project ”窗口，點擊“ entry > src > main > resources > base > element > color.json ”，打開“ color.json ”文件，加入藍框的顏色資源，如下圖展示：

• 引用顏色資源：在 Button(){}.backgroundColor() 中用 $r('app.color.xx') 的方式引用顏色資源。

3.“ Index.ets ”文件的示例如下：

// index.ets
 @Entry
 @Component
 struct Index {
     build() {
       Row() {
         Column() {
           //引用文字資源
           Text($r('app.string.homePage_Text'))
             .fontSize(50)
             .fontWeight(FontWeight.Bold)
           Button() {
             //引用文字資源
             Text($r('app.string.homeClick_value'))
                 .fontSize(30)
                 .fontWeight(FontWeight.Bold)
           }
           .type(ButtonType.Capsule)
           .margin({
             top: 20
           })
           //引用顏色資源
           .backgroundColor($r('app.color.btn_background'))
           .width('40%')
           .height('5%')
         }
         .width('100%')
       }
       .height('100%')
     }
 }

4.“ Second.ets ”文件的示例如下：

// second.ets
 @Entry
 @Component
 struct Second {
     build() {
       Row() {
         Column() {
           //引用文字資源
           Text($r('app.string.secondPage_Text'))
             .fontSize(50)
             .fontWeight(FontWeight.Bold)
           Button() {
             //引用文字資源
             Text($r('app.string.secondClick_value'))
               .fontSize(25)
               .fontWeight(FontWeight.Bold)
           }
           .type(ButtonType.Capsule)
           .margin({
             top: 20
           })
           //引用顏色資源
           .backgroundColor($r('app.color.btn_background'))
           .width('40%')
           .height('5%')
         }
         .width('100%')
       }
       .height('100%')
     }
 }

實現頁面間的跳轉

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

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

   // index.ets
   import router from '@ohos.router';
   
   @Entry
   @Component
   struct Index {
     build() {
       Row() {
         Column() {
           Text($r('app.string.homePage_Text'))
             .fontSize(50)
             .fontWeight(FontWeight.Bold)
           // 添加按鈕，以響應用戶點擊
           Button() {
             Text($r('app.string.homeClick_value'))
               .fontSize(30)
               .fontWeight(FontWeight.Bold)
           }
           .type(ButtonType.Capsule)
           .margin({
             top: 20
           })
           .backgroundColor($r('app.color.btn_background'))
           .width('40%')
           .height('5%')
           // 跳轉按鈕綁定onClick事件，點擊時跳轉到第二頁
           .onClick(() = > {
             router.pushUrl({ url: 'pages/Second' })
           })
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   

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

   // second.ets
   import router from '@ohos.router';
   
   @Entry
   @Component
   struct Second {
       build() {
         Row() {
           Column() {
             Text($r('app.string.secondPage_Text'))
               .fontSize(50)
               .fontWeight(FontWeight.Bold)
             Button() {
               Text($r('app.string.secondClick_value'))
                 .fontSize(25)
                 .fontWeight(FontWeight.Bold)
             }
             .type(ButtonType.Capsule)
             .margin({
               top: 20
             })
             .backgroundColor($r('app.color.btn_background'))
             .width('40%')
             .height('5%')
             // 跳轉按鈕綁定onClick事件，點擊按鈕時返回到第一頁
             .onClick(() = > {
               router.back()
             })
           }
           .width('100%')
         }
         .height('100%')
       }
   }
   

3.無需手動配置新增的第二個頁面路由：由于我們選擇了用New >Page的方式新建頁面，路由表里會自動配置新增的頁面路由。
在“ Project ”窗口，打開“ entry > src > main > resources > base > profile ”，在main_pages.json文件中的“src”下自動配置的第二個頁面的路由“pages/Second”，示例如下：

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

使用真機運行應用

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

1. 將搭載OpenHarmony標準系統的開發板與電腦連接。
2. 點擊File > Project Structure... > Project > SigningConfigs界面勾選“ Automatically generate signature ”，等待自動簽名完成即可，點擊“ OK ”。如下圖所示：
   
3. 編譯的[詳細步驟]。
4. 效果如下圖所示：

• Android平臺展示效果

• iOS平臺展示效果

• OpenHarmomy平臺展示效果

恭喜您已經使用ArkTS語言開發（Stage模型）完成了第一個ArkUI跨平臺應用。

審核編輯 黃宇