HarmonyOS开发实战：实现第一行HarmonyOS代码

最新推荐文章于 2024-07-07 16:41:46 发布

初一十五啊

最新推荐文章于 2024-07-07 16:41:46 发布

阅读量956

点赞数 11

分类专栏：鸿蒙文章标签： harmonyos 华为 android 鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/River_ly/article/details/137295271

版权

鸿蒙专栏收录该内容

36 篇文章 1 订阅

订阅专栏

本文指导如何使用HarmonyOS的ArkUI框架构建一个带有页面跳转功能的简单应用，包括基本概念、组件使用、布局方式、页面路由和事件处理，旨在帮助有Web开发经验的开发者快速上手鸿蒙开发。

摘要由CSDN通过智能技术生成

1.目标

我们今天的目标是将构建一个简单的具有页面跳转/返回功能的应用，如下图所示：

2.基本概念

UI框架 这个在第一篇文章中有提到过，HarmonyOS提供的UI开发框架为：ArkUI(方舟开发框架)，提供了UI开发必需的能力：多种组件、布局计算、动画能力、UI交互、绘制等。

方舟开发框架针对于不同目的和技术背景的开发者提供了两种开发范式：

基于ArkTS的声明式开发范式
兼容JS的类Web开发范式

下面是对比：

截屏2024-03-17 16.14.58.png

开来移动端开发和Web开发同学都能很快上手鸿蒙开发呀。

应用模型 第二篇文章有介绍，鸿蒙提供了两种应用模型：FA、Stage，目前我们就用Stage即可。

3.构建一个简单应用

3.1 了解默认的Hello world页面

我们新创建一个工程，或者使用之前的Hello world工程。在Project窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Text组件组成。“Index.ets”文件的示例如下：

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

虽然这个代码只是实现了一个很简单的Hello World文本展示，但是如果之前有Flutter或者Web开发的经验，从这个代码中就能挖掘出更多有用的信息：

@State关键字：声明了message变量，同时上面也提到ArkUI的UI更新方式是：数据驱动更新，类比下Vue.js、Flutter开发，很熟悉吧
Row、Column：和Flutter中的组件同名，功能也是一样的。Row将子组件横向排列，Column将子组件纵向排列。都是前端Flex布局的思想
Text：就是用来展示文本内容，并且设置了文字大小和加粗，写起来很简单，跟SwiftUI一样呢，哈哈

3.2 Hello world页面添加按钮

都不用看，按钮肯定是Button()组件了。我们在这个页面上添加一个Button组件：

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加一个按钮
        Button() {
          Text("Open Page")
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#ff9900')
        .width('80%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

从添加Button，对Button布局方式来看，这个跟Web页面的布局思想是一样的。

在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器，第一个页面效果如下图所示：

截屏2024-03-17 16.34.55.png

3.3 构建第二个页面

右键点击“pages”文件夹，选择New -> ArkTS File，命名为Second，点击Finish，目录如下所示：

截屏2024-03-17 16.38.08.png

然后需要配置这个页面的路由。在entry > src > main > resources > base > profile下，打开main_page.json文件，在src下配置第二个页面的路由“pages/Second”，示例如下：

截屏2024-03-17 16.39.44.png

参考第一个页面，在第二个页面也添加Text、Button组件，并设置其样式：

// Second.ets
@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('#ff9900')
        .width('80%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

3.4 实现页面跳转

页面之间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由需要导入router模块。

我们现在在第一个Hello World页面中给按钮添加一个onClick事件，然后点击时跳转到第二页：


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

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加一个按钮
        Button() {
          Text("Open Page")
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#ff9900')
        .width('80%')
        .height('5%')
        // 给按钮绑定点击事件
        .onClick(()=>{
          console.log("点击了按钮")

          // 跳转第二个页面
          router.pushUrl({url: 'pages/Second' }).then(()=>{
            console.log("成功跳转了");
          }).catch(error=>{
            console.log("跳转失败");
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

从路由跳转的回调来看，跟Promise是不是一模一样呢！

然后，我们在第二个页面中给按钮也加一个返回到前一个页面的事件：

// 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('#ff9900')
        .width('80%')
        .height('5%')
        // 绑定点击事件
        .onClick(()=>{
          // 返回上一页面
          router.back()
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

现在打开Index.ets文件，点击预览器中的刷新按钮图标进行刷新，就可以在两个页面之间进行跳转了：

然后可以试试在本地模拟器上运行哦。

4.总结

从这个小的示例中，我们可以了解到ArkUI的布局思想跟Web是一样的，如果你有Web开发经验的话，上手鸿蒙的成本是很小的。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，

内容包含了：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料