体验鸿蒙开发第一课

Index.ets:

// 导入页面路由模块
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("Open Page")
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#ff9900')
        .width('80%')
        .height('5%')
        // 给按钮绑定点击事件
        .onClick(()=>{
          console.log("点击了按钮") // 跳转第二个页面
          router.pushUrl({url: 'pages/second' }).then(()=>{
            console.log("成功跳转了");
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

second.ets:

// Second.ets
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('Back')
            .fontSize(25)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#ff9900')
        .width('80%')
        .height('5%') // 绑定点击事件
        .onClick(()=>{
          // 返回上一页面
          router.back()
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

代码如上。

开发工具地址：

DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟