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

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

應(yīng)用介紹

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

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

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

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

zh-cn_image_0000001364054489

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 ：模塊級編譯構(gòu)建任務(wù)腳本，開發(fā)者可以自定義相關(guān)任務(wù)和代碼實(shí)現(xiàn)。
oh_modules ：用于存放三方庫依賴信息。
build-profile.json5 ：應(yīng)用級配置信息，包括簽名signingConfigs、產(chǎn)品配置products等。
hvigorfile.ts ：應(yīng)用級編譯構(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è)頁面

創(chuàng)建第二個(gè)頁面。
- 新建第二個(gè)頁面文件。在“ Project ”窗口，打開“ entry > src > main > ets ”，右鍵點(diǎn)擊“ pages ”文件夾，
- 新建的頁面命名為“ Second ”，點(diǎn)擊“ Finish ”。
- 可以看到文件目錄結(jié)構(gòu)如下：

添加文本及按鈕。
參照第一個(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)框的文字資源，如下圖展示：

ResourceStringReference

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

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

ResourceColorReference

引用顏色資源：在 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)。使用頁面路由請導(dǎo)入router模塊。

第一個(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%')
  }
}

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

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

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

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

搜狗高速瀏覽器截圖20240326151547.png

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

Android平臺展示效果

iOS平臺展示效果

OpenHarmomy平臺展示效果

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

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。舉報(bào)投訴