前言：之前两篇文章主要是学习鸿蒙相关的一些基础理论知识，这篇文章就开始上手敲代码了。通过实例来学习鸿蒙开发，加油！

1.目标

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

2.基本概念

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

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

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

下面是对比：

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

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

3.构建一个简单应用

3.1 了解默认的Hello world页面

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

less 复制代码

// 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组件：

scss 复制代码

@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，打开预览器，第一个页面效果如下图所示：

3.3 构建第二个页面

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

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

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

scss 复制代码

// 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事件，然后点击时跳转到第二页：

typescript 复制代码

// 导入页面路由模块
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是不是一模一样呢！

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

typescript 复制代码

// 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开发经验的话，上手鸿蒙的成本是很小的。

[鸿蒙开发] 3 - 开始写第一行HarmonyOS代码吧