鸿蒙简单入门（一）

路由切换

// Index.ets
import router from '@ohos.router'
@Entry
@Component
struct Index {
  @State message: string = 'Hello World 123466788'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        // .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳转按钮绑定onClick事件，点击时跳转到第二页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Next' button.`)
          // 跳转到第二页
          router.pushUrl({ url: 'pages/Second' }).then(() => {
            console.info('Succeeded in jumping to the second page.')
            console.log("123456789")

          }).catch((err) => {
            console.log("123456789")
          })
        })
      }
      .width('100%')

    }
    .height('100%')
  }
}

// Second.ets
// 导入页面路由模块
import router from '@ohos.router'

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  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事件，点击按钮时返回到第一页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Back' button.`)
          try {
            // 返回第一页
            router.back()
            console.info('Succeeded in returning to the first page.')
          } catch (err) {
            console.log(err,'this is error')
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

组件的使用

// Index.ets
import router from '@ohos.router'
import { otherView } from  '../view/otherView'
@Entry
@Component
struct Index {
  @State message: string = 'Hello World 123466788'

  build() {
    Row() {
      Column() {
        
        otherView()
      }
      .width('100%')

    }
    .height('100%')
  }
}

@Component
export struct otherView {
  otherHeight:number = 150;
  build() {
    Column() {
      Text("对未来的真正慷慨，是把一切都献给现在。")
        .width('100%')
        .fontColor(Color.White)
        .padding({ top: 18, bottom: 10 })
      Text("IP 归属：北京 >")
        .width('100%')
        .fontColor('#C2BFC7')
        .padding({ bottom: 10 })
      Text("+添加年龄、学校标签")
        .fontColor(Color.White)
        .fontSize(14)
        .backgroundColor('#555A596A')
        .borderRadius(5)
        .padding(3)

      Row({ space: 10 }) {
        Button('申请认证', { type: ButtonType.Normal })
          .borderRadius(5)
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#555A596A')
          .height(30)
          .width(90)
          .onClick(() => {
          })
        Button('编辑资料', { type: ButtonType.Normal })
          .borderRadius(5)
          .fontWeight(FontWeight.Bold)
          .backgroundColor('#555A596A')
          .height(30)
          .width(90)
          .onClick(() => {
          })
        Button({ type: ButtonType.Normal }) {
          // Image($r('app.media.share_btn_Normal'))
          //   .margin(2)

        }
        .backgroundColor('#555A596A')
        .borderRadius(5)
        .height(30)
        .width(30)
      }
      .width('100%')
      .padding({ bottom: 18, top: 10 })
    }
    .height(this.otherHeight)
    .alignItems(HorizontalAlign.Start)
    .padding({ left: 15 })
    .backgroundColor(0x282350)
    .width('100%')
  }
}