你好 鸿蒙

下载DevEco Studio 换一个背景颜色

创建一个空项目

创建第二个ets文件

配置好文件的路由 方便后续跳转

首页代码

import { router } from '@kit.ArkUI'; //导入路由包
import { BusinessError } from '@kit.BasicServicesKit'; //导入错误信息包

@Entry
@Component
struct Index {
  @State message: string = '你好 华为';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
      Button(){
        Text('Next')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .type(ButtonType.Capsule)
      .margin({
        left:100,
        top:500
      })
      .backgroundColor('#0D9FFB')
      .width('40%')
      .height('5%')
      .onClick(()=>{       //按钮绑定点击事件
        console.info('点击跳转下一个页面')  
        router.pushUrl({ url:'pages/Second'}).then(()=>{ //配置路由跳转
          console.info('成功跳转到下一个页面')
        }).catch((err:BusinessError)=>{
          console.error('页面错误，错误代码：${err.code},错误信息：${err.message}')
        })
      })
    }
    .height('100%')
    .width('100%')
  }
}

第二个页面代码

import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@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('#0D9FFB')
        .width('40%')
        .height('5%')
        .onClick(()=>{    //点击事件
          console.info('返回首页')
          try {
            router.back()    //返回首页
            console.info('成功返回首页')
          }catch (err){
            let code=(err as BusinessError).code;
            let message=( err as BusinessError).message;
            console.info('页面错误，错误代码：${code}错误信息：${message}')
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果图