给 Web 开发者的 HarmonyOS 指南 01-文本样式
本系列教程适合 HarmonyOS 初学者，为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。
本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。
页面结构 HTML 与 ArkUI
在 Web 开发中，HTML 文档结构由<html>、<head>和<body>等标签组成，其中<body>标签包含了页面中所有可见的内容。
而在 HarmonyOS 的 ArkUI 框架中，使用@Entry和@Component装饰器定义组件，并通过build()方法定义页面内容。
基本结构对比
HTML 文档结构：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题</title></head><body> <!-- 页面内容放这里 --></body></html>
复制代码
ArkUI 组件结构：
@Entry@Componentstruct MyComponent { build() { // 页面内容放这里 }}
复制代码
文本处理对比
在 Web 开发中，我们习惯使用各种 HTML 标签来表示不同语义的文本内容，例如标题、段落、强调等。
而在 HarmonyOS 的 ArkUI 中，文本处理方式有所不同，主要依赖 Text 组件和 Span 组件。
基本概念对比
文本显示对比
下面通过具体示例对比 HTML 和 ArkUI 的文本显示方式：
1. 标题和段落
HTML 代码：
<h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><h4>我是四级标题</h4><h5>我是五级标题</h5><h6>我是六级标题</h6><p>我是一个段落<br>我被换行了</p>
复制代码
ArkUI 代码：
// 鸿蒙系统中没有语义化标签的概念// 所有文本都使用Text组件，通过样式区分不同级别Text('我是一级标题') .fontSize(32) // 通过字体大小区分标题级别 .fontWeight(FontWeight.Bold)
Text('我是二级标题') .fontSize(24) .fontWeight(FontWeight.Bold)
// 以此类推...
// 段落和换行Text('我是一个段落\n我被换行了')// 注意：在ArkUI中使用\n实现换行，而不是<br>标签
复制代码
2. 文本样式
HTML 代码：
<p>我是<strong>加粗</strong>的</p><p>我是<em>倾斜</em>的</p><p>我是<del>删除线</del>的</p><p>我是<ins>下划线</ins>的</p>
复制代码
ArkUI 代码：
// 在ArkUI中，样式化的文本使用Text和Span组合实现Text() { Span('我是') Span('加粗') .fontWeight(FontWeight.Bold) // 对应HTML的<strong> Span('的文本')}
Text() { Span('我是') Span('倾斜') .fontStyle(FontStyle.Italic) // 对应HTML的<em> Span('的文本')}
Text() { Span('我是') Span('删除线') .decoration({ type: TextDecorationType.LineThrough }) // 对应HTML的<del> Span('的文本')}
Text() { Span('我是') Span('下划线') .decoration({ type: TextDecorationType.Underline }) // 对应HTML的<ins> Span('的文本')}
复制代码
布局容器
在 HTML 中，我们使用 <div> 作为通用容器来组织内容。
在 ArkUI 中，主要使用 Column 和 Row 等容器。
HTML 代码：
<div class="column"> <!-- 内容放这里 --></div>
<style> * { margin: 0; padding: 0; /* 为了与 ArkUI 盒子模型保持一致，所有 HTML 元素的 CSS 盒模型被设置为 border-box */ box-sizing: border-box; } .column{ display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; align-items: center; }</style>
复制代码
ArkUI 代码：
// 默认为纵向排列的容器，类似于CSS的flex-direction: columnColumn({ space: 10 }) { // space参数设置子组件之间的间距，类似CSS的gap // 内容放这里}.width('100%') // 设置宽度，链式API调用.height('100%') // 设置高度.alignItems(HorizontalAlign.Center) // 水平对齐方式，类似CSS的align-items
复制代码
关键区别总结
组件化思维：
HTML 使用标签表示不同语义
ArkUI 使用组件表示 UI 元素，不强调语义
样式应用方式：
HTML/CSS 分离内容和样式
ArkUI 使用链式 API 直接在组件上设置样式
布局方式：
HTML 依赖 CSS 盒模型和 Flexbox
ArkUI 内置容器组件如 Column、Row 实现布局
语法结构：
HTML 使用开闭标签和属性
ArkUI 使用 TypeScript 语法和方法链
学习建议
理解组件化思维：将 HTML 标签概念转变为组件概念
掌握 ArkUI 基础组件：
Text：文本组件
Span：文本片段
Column：纵向容器
Row：横向容器
链式 API 调用习惯：样式设置通过链式方法调用而非 CSS 属性
布局思维转变：使用容器组件的嵌套来实现复杂布局
总结
作为 Web 开发者，迁移到 HarmonyOS 开发需要转变思维模式，从标签和 CSS 的分离到组件和链式 API 的结合。虽然语法不同，但概念是相通的。只要掌握了基本对应关系，Web 开发者能够快速适应 HarmonyOS 开发。
希望这篇 HarmonyOS Next 教程对你有所帮助，期待您的 👍点赞、💬评论、🌟收藏 支持。
评论