HarmonyOS Next应用开发：构建第一个应用

本文通过构建一个简单的具有页面跳转、返回功能的应用，快速了解HarmonyOS应用，以下我们基于Stage模型构建第一个ArkTS应用。

创建项目

这里认为你已经配置好了开发环境，下面我们开始创建项目：
1.若首次打开DevEco Studio，请点击Create Project创建工程。

如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。

2.选择Application应用开发，选择模板“Empty Ability”，点击Next进行下一步配置。

4.点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

编写代码

在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，进行页面的编写：

@Entry
@Component
struct Index {
  @State message: string = '你好，鸿蒙'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('第二个页面')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('50%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器可以进行页面预览。

新建第二个页面文件。在“Project”窗口，打开“entry > src > main > ets”，右键点击“pages”文件夹，选择“New > ArkTS File”，创建名为“Next”的文件：

@Entry
@Component
struct Second {
  @State message: string = '我是第二个页面'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('返回')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Next”：

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

也可以在右键点击“pages”文件夹时，选择“New > Page >New Page”，命名为“Next”，点击“Finish”完成第二个页面的创建。使用此种方式则无需再进行下文中第二个页面路由的手动配置。

简单地实现下页面之间的跳转及返回，下面是第一个页面跳转到第二个页面：

import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State message: string = '你好，鸿蒙'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('第二个页面')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('50%')
        .height('5%')
        .onClick(()=>{
          console.info(`成功点击'第二个页面'按钮.`)
          router.pushUrl({ url:'pages/Next'})
            .then(() => {
              console.info(`成功跳转到第二个页面.`)
            })
            .catch((err) => {
              console.info(`没能跳转到第二个页面.code is ${err.code}, message is ${err.message}`)
            })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

第二个页面返回到第一个页面：

import router from '@ohos.router'

@Entry
@Component
struct Second {
  @State message: string = '我是第二个页面'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('返回')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(()=>{
          console.info(`成功点击'返回'按钮.`)
          try {
            router.back()
            console.info(`成功返回到第一页.`)
          } catch (err) {
            console.info(`没能返回到第一页.code is ${err.code}, message is ${err.message}`)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

使用模拟器运行

没有真机，安装了个模拟器运行，不大好用，对比Android或者iOS的模拟器差太远了。

总结

通过构建第一个HarmonyOS应用，可以发现DevEco Studio和Android Studio使用起来很像，本文中使用的ArkTS语言是声明式的，嗯，很容易又想到Flutter，如果你有Android，或者Flutter，或者前端相关开发经验，相信上手这门新技术会非常容易。