HarmonyOS--从简单页面跳转开始

hello world第一步
简单的走第二步

简单实现登录页面跳转到第二个页面，并且传递数据

页面布局简单采用多行布局，可以自行布局熟悉简单插件的使用
HarmonyOS插件使用手册
Login.ets

// @ts-nocheck
import router from '@ohos.router';
@Entry
@Component
struct TextDemo {
  @State name:string =''
  @State password:string = ''
  build(){
    Column(){
      Row(){

      }.height('100')
      Row(){
        Image($r('app.media.img'))
          .width(100)
          .height(100)
      }.height('100')
      Row(){
        Text('登录界面')
          .fontSize(25)
          .fontColor(0x000000)
      }.height('50')
      Row(){
        Text('登录账号以使用更多权限')
          .fontSize(20)
          .fontColor(0xff0000)
      }.height('50')
      //账号
      Row(){
        TextInput({placeholder:'账号'})
          .placeholderColor(0x999999)
          .placeholderFont({
            size: 20,
            weight: FontWeight.Medium,
            family: 'cursive',
            style: FontStyle.Italic
          })
          .onChange((name : string)=>{
            this.name = name
            console.log('password:'+this.name)
          })
      }.height(50)
      //密码
      Row(){
        TextInput({placeholder:'密码'})
          .placeholderColor(0x999999)
          .placeholderFont({
            size: 20,
            weight: FontWeight.Medium,
            family: 'cursive',
            style: FontStyle.Italic
          })
          .type(InputType.Password)
          .onChange((password : string)=>{
            this.password = password
            console.log('password:'+this.password)
          })
      }.height(50)
      //登录按钮
      Row(){
        Button('登录',{
          type:ButtonType.Normal,
          stateEffect:true
        })
          .width('100')
          .height('50')
          .fontSize(18)
          .onClick((event : ClickEvent)=>{
            if(this.name === '123456' && this.password === '123456'){
              router.pushUrl({
                url:'pages/LoginSuccess',
                params:{
                  name : this.name,
                  password : this.password
                }
              },
              router.RouterMode.Standard)
              console.log('登录成功'+this.name+this.password)
            }else {
              console.log('登录失败'+this.name+this.password)
            }
          })
      }.height('100')
    }.width('100%')

  }
}

LoginSuccess.ets

import router from '@ohos.router';
@Entry
@Component
struct LoginSuccess {
  @State message: string = 'Hello World'
  @State name: string = router.getParams()?.['name']
  @State password: string = router.getParams()?.['password']

  build() {
    Column(){
        Row(){
          Text('登录成功')
            .fontSize(30)
            .fontColor(0x000000)
        }.height('100')
      Row(){
        Text('用户名:'+this.name)
          .fontSize(30)
          .fontColor(0x000000)
      }.height('100')
      Row(){
        Text('密码:'+this.password)
          .fontSize(30)
          .fontColor(0x000000)
      }.height('100')
      Button('返回')
        .height('50')
        .width('100')
        .fontSize(20)
        .onClick((event: ClickEvent)=>{
            router.back({
              url:'pages/Login'
            })
        })
    }.width('100%')
  }
}

页面之间数据的传递

import router from ‘@ohos.router’;

router.pushUrl({
                url:'pages/LoginSuccess',
                params:{
                  name : this.name,
                  password : this.password
                }
              },
              router.RouterMode.Standard)

 @State name: string = router.getParams()?.['name']
 @State password: string = router.getParams()?.['password']

华为gitee案例：UIAbility内页面间的跳转下载地址