鸿蒙开发一个简单的页面跳转

她叫我小渝2024-03-22 6:06

废话

刚从Java切过来，确实是不太习惯，有点无从下手的感觉。（原谅我菜，不会VUE不会TS相关的任何东西）。

基础的Entry Component State 这三个最基础的标签还有一些基础的语法，就不废话了，详细可以看地下的相关资料，有视频有文档。

直接开搞

Hello Word 步骤就省略了，我这里新建的是 3.1.0 （API 9）Stage的项目。

1.直接在Hello Word项目的基础上，在主页pages/Index.ets的下方新建一个Login.ets类。然后给这个Login页面加一个简单的逻辑，点击一下改变一下状态（觉得没意思可忽略）。

复制代码

@Entry
@Component
struct Login {
  @State message1: string = '登录页面'

  @State test:boolean=true;

  build() {
    Row() {
      Column() {
        Text(this.message1+":"+this.test)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            //点击修改状态，触发刷新
            this.test=!this.test
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.找到/src/main/resources/base/profile包下的main_pages.json文件，把新创建的这个Login页面的路径加上去。（特别重要，不然你就知道什么叫头痛）

复制代码

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

3.万事俱备，给Index.ets中原来用来展示"Hello 吗喽"的Text控件加上一个点击事件，然后通过router.pushUrl直接跳转到Login页面即可。

复制代码

import router from '@ohos.router';

@Entry
@Component
struct Index {
  @State message: string = 'Hello 吗喽'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            router.pushUrl({
              //跳转的页面的路径
              url: 'pages/Login',
              params: {
                //用来传参数的，留着吧，虽然用不上
                id: 1
              }
            });
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

鸿蒙开发 一个简单的页面跳转

废话

相关资料

直接开搞

鸿蒙开发一个简单的页面跳转