使用ArkTS語言開發(fā)（Stage模型）

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

應(yīng)用介紹

通過構(gòu)建一個(gè)簡(jiǎn)單的ArkUI頁面跳轉(zhuǎn)示例，快速了解資源創(chuàng)建引用，路由代碼編寫和UI布局編寫等應(yīng)用開發(fā)流程。

導(dǎo)入應(yīng)用模板

• 通過Import Samples導(dǎo)入helloworld工程。

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

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

編寫代碼

在上述工程創(chuàng)建完成后，開發(fā)者可在項(xiàng)目中的entry目錄下進(jìn)行代碼開發(fā)。

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

創(chuàng)建第一個(gè)頁面。

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

• 工程同步完成后，在“ Project ”窗口，點(diǎn)擊“ 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)
           // 添加按鈕，以響應(yīng)用戶點(diǎn)擊
           Button() {
             Text()
               .fontSize(30)
               .fontWeight(FontWeight.Bold)
           }
           .type(ButtonType.Capsule)
           .margin({
             top: 20
           })
           .backgroundColor()
           .width('40%')
           .height('5%')
         }
         .width('100%')
       }
       .height('100%')
     }
   }
  

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

1. 創(chuàng)建第二個(gè)頁面。
   • 新建第二個(gè)頁面文件。在“ Project ”窗口，打開“ entry > src > main > ets ”，右鍵點(diǎn)擊“ pages ”文件夾，
     
   • 新建的頁面命名為“ Second ”，點(diǎn)擊“ Finish ”。
     
   • 可以看到文件目錄結(jié)構(gòu)如下：
     
2. 添加文本及按鈕。
   參照第一個(gè)頁面，在第二個(gè)頁面添加Text組件、Button組件等，并設(shè)置其樣式?！?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 ”窗口，點(diǎn)擊“ entry > src > main > resources > base > element > string.json ”，打開“ string.json ”文件，加入藍(lán)框的文字資源，如下圖展示：

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

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

• 引用顏色資源：在 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%')
     }
 }

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

頁面間的導(dǎo)航可以通過[頁面路由router]接口來實(shí)現(xiàn)。頁面路由router根據(jù)頁面url找到目標(biāo)頁面，從而實(shí)現(xiàn)跳轉(zhuǎn)。使用頁面路由請(qǐng)導(dǎo)入router模塊。

1. 第一個(gè)頁面跳轉(zhuǎn)到第二個(gè)頁面。
   在第一個(gè)頁面中，跳轉(zhuǎn)按鈕綁定onClick事件，點(diǎn)擊按鈕時(shí)跳轉(zhuǎn)到第二頁?！?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)
           // 添加按鈕，以響應(yīng)用戶點(diǎn)擊
           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%')
           // 跳轉(zhuǎn)按鈕綁定onClick事件，點(diǎn)擊時(shí)跳轉(zhuǎn)到第二頁
           .onClick(() = > {
             router.pushUrl({ url: 'pages/Second' })
           })
         }
         .width('100%')
       }
       .height('100%')
     }
   }
   

2. 第二個(gè)頁面返回到第一個(gè)頁面。
   在第二個(gè)頁面中，返回按鈕綁定onClick事件，點(diǎn)擊按鈕時(shí)返回到第一頁?！?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%')
             // 跳轉(zhuǎn)按鈕綁定onClick事件，點(diǎn)擊按鈕時(shí)返回到第一頁
             .onClick(() = > {
               router.back()
             })
           }
           .width('100%')
         }
         .height('100%')
       }
   }
   

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

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

使用真機(jī)運(yùn)行應(yīng)用

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

1. 將搭載OpenHarmony標(biāo)準(zhǔn)系統(tǒng)的開發(fā)板與電腦連接。
2. 點(diǎn)擊File > Project Structure... > Project > SigningConfigs界面勾選“ Automatically generate signature ”，等待自動(dòng)簽名完成即可，點(diǎn)擊“ OK ”。如下圖所示：
   
3. 編譯的[詳細(xì)步驟]。
4. 效果如下圖所示：

• Android平臺(tái)展示效果

• iOS平臺(tái)展示效果

• OpenHarmomy平臺(tái)展示效果

恭喜您已經(jīng)使用ArkTS語言開發(fā)（Stage模型）完成了第一個(gè)ArkUI跨平臺(tái)應(yīng)用。

審核編輯 黃宇