一文看懂ArkUI框架：开启鸿蒙应用开发新时代

最新推荐文章于 2025-06-23 09:23:56 发布

大雨淅淅

最新推荐文章于 2025-06-23 09:23:56 发布

阅读量1.1k

点赞数 14

CC 4.0 BY-SA版权

分类专栏： # HarmonyOS开发文章标签： harmonyos 华为

本文链接：https://blog.youkuaiyun.com/xiaoyingxixi1989/article/details/148473469

（三）小试牛刀：开发第一个 ArkUI 应用

六、总结与展望

一、走进 ArkUI：鸿蒙背后的神秘框架

在科技飞速发展的今天，操作系统的竞争日益激烈，华为鸿蒙系统凭借其独特的分布式理念和全场景覆盖的能力，异军突起，成为了全球瞩目的焦点。而在鸿蒙系统的众多黑科技中，ArkUI 框架无疑是一颗璀璨的明星，它为鸿蒙应用的开发注入了强大的活力，让开发者能够更加高效地构建出美观、流畅、功能强大的应用程序。那么，ArkUI 框架究竟是什么？它又有着怎样的独特魅力呢？接下来，就让我们一起揭开 ArkUI 框架的神秘面纱。

二、ArkUI 框架基础概念全解析

（一）UI 与组件：构建界面的基石

在深入了解 ArkUI 框架之前，我们首先需要明确两个重要的概念：UI（User Interface）和组件（Component）。UI，即用户界面，是应用程序与用户进行交互的桥梁，它涵盖了界面的布局、样式、交互方式等多个方面，直接影响着用户对应用的第一印象和使用体验。而组件，则是构建 UI 的基本单元，它们就像是一个个积木块，开发者可以通过将各种组件进行组合、排列，搭建出丰富多彩、功能各异的界面。

在 ArkUI 框架中，组件的种类繁多，包括基础组件如 Text（文本）、Image（图片）、Button（按钮），容器组件如 Column（垂直布局容器）、Row（水平布局容器）、Stack（层叠布局容器），以及各种功能组件如 Slider（滑块）、Picker（选择器）等。以一个简单的登录界面为例，我们可以使用 Text 组件来显示提示信息，如 “用户名”“密码”；使用 TextInput 组件来接收用户输入的账号和密码；使用 Button 组件来实现登录操作的触发。通过将这些组件合理地组合在 Column 或 Row 容器组件中，我们就能构建出一个简洁明了的登录界面。

（二）两种开发范式：各有千秋的编程之道

ArkUI 框架为开发者提供了两种强大的开发范式，分别是基于 ArkTS 的声明式开发范式和兼容 JS 的类 Web 开发范式。这两种开发范式各有特点，适用于不同的开发场景和开发者群体。

基于 ArkTS 的声明式开发范式，采用了基于 TypeScript 声明式 UI 语法扩展而来的 ArkTS 语言，从组件、动画和状态管理三个维度提供了强大的 UI 绘制能力。在这种开发范式下，开发者只需通过简洁的代码声明式地描述界面的结构和状态，而无需关心具体的 UI 绘制和渲染过程，大大提高了开发效率和代码的可读性。例如，我们可以使用以下代码创建一个简单的按钮组件：

@Entry

@Component

struct ButtonExample {

@State message: string = '点击我'

build() {

Button(this.message)

.fontSize(16)

.width(120)

.height(40)

.backgroundColor(Color.Blue)

.onClick(() => {

this.message = '已点击'

})

}

}

上述代码中，我们通过 @Entry 和 @Component 装饰器定义了一个组件，在 build 方法中使用 Button 组件，并通过链式调用设置了按钮的文本、字体大小、宽度、高度、背景颜色以及点击事件的处理逻辑。整个过程简洁直观，代码结构清晰。

而兼容 JS 的类 Web 开发范式，则采用了经典的 HML（Harmony Markup Language）、CSS（Cascading Style Sheets）、JavaScript 三段式开发方式。其中，HML 用于搭建页面的布局结构，类似于 HTML；CSS 用于描述页面的样式，控制组件的外观；JavaScript 则用于处理页面的交互逻辑，响应用户的操作。这种开发范式对于熟悉 Web 前端开发的开发者来说，上手门槛较低，能够快速将已有的 Web 应用改造成方舟 UI 框架应用。例如，一个简单的 HML 页面代码如下：

<!-- xxx.hml -->

<div class="container">

<text class="title">{
  
  {message}}</text>

<input type="button" class="btn" value="点击我" onclick="changeMessage" />

</div>

对应的 CSS 样式文件（xxx.css）：

.container {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

width: 100%;

height: 100%;

}

.title {

font-size: 20px;

color: #333;

}

.btn {

width: 120px;

height: 40px;

background-color: #007DFF;

color: white;

border: none;

margin-top: 20px;

}

以及 JavaScript 逻辑文件（xxx.js）：

export default {

data: {

message: '点击我'

},

changeMessage: function() {

this.message = '已点击'

}

}

对比这两种开发范式，基于 ArkTS 的声明式开发范式在开发效率上更具优势，它的代码更加简洁、直观，能够让开发者更专注于业务逻辑的实现；在性能方面，由于无需 JS 框架进行页面 DOM 管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。而兼容 JS 的类 Web 开发范式则更适合那些对 Web 前端开发技术栈较为熟悉，希望能够快速将 Web 应用迁移到鸿蒙平台的开发者。在实际开发中，开发者可以根据项目的具体需求、团队的技术栈以及个人的编程习惯来选择合适的开发范式。