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

废话

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

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

相关资料

TS快速入门:TS快速入门

ArkTS基础:<HarmonyOS第一课>ArkTS开发语言介绍-华为开发者学堂 (huawei.com)

ArkTS开发实践:<HarmonyOS第一课>ArkTS开发语言介绍-华为开发者学堂 (huawei.com)

直接开搞

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%')
  }
}
相关推荐
写雨.013 小时前
鸿蒙定位开发服务
华为·harmonyos·鸿蒙
goto_w18 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
别说我什么都不会1 天前
ohos.net.http请求HttpResponse header中set-ccokie值被转成array类型
网络协议·harmonyos
码是生活1 天前
鸿蒙开发排坑:解决 resourceManager.getRawFileContent() 获取文件内容为空问题
前端·harmonyos
鸿蒙场景化示例代码技术工程师1 天前
基于Canvas实现选座功能鸿蒙示例代码
华为·harmonyos
小脑斧爱吃鱼鱼1 天前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
Debroon1 天前
应华为 AI 医疗军团之战,各方动态和反应
人工智能·华为
鸿蒙布道师1 天前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
zhang1062091 天前
HarmonyOS 基础组件和基础布局的介绍
harmonyos·基础组件·基础布局
桃子酱紫君1 天前
华为配置篇-BGP实验
开发语言·华为·php