大家好我是牛牛，一名软件开发从业者，无意中接触到了鸿蒙移动端开发，对鸿蒙操作系统产生了极大的兴趣，作者将从无到有开发出一款鸿蒙原生APP。每天写一篇关于鸿蒙开发的技术文章。欢迎大家踊跃订阅➕关注，文章中有什么不妥之处可以在评论区中指出。

注意：最好是有开发经验的伙伴来阅读系列文章。零基础的同学可以先去了解一下TypeScript从最基本的开发语言进行学起

前言

继上一篇文章中一百天挑战学会HarmanyOS——初识鸿蒙 HarmanyOS，我们已经创建出了最基本的 HelloWorld 工程，在之前的工程结构，就是现在主推的 Stage 模型的项目结构。

1.什么是 Stage 模型

通过目录结构分析出如下关系。

Stage

Module(模块-对应Hap包) 项目结构中的 entry 就是一个 Module
ability(应用服务入口) 项目结构中的 entryability 就是一个应用服务入口（界面能力组件）
pages(页面) 项目中的所有页面的存放位置
component(自定义组件) 项目中可以自定义组件进行功能的扩展与实现
resources(资源) 项目中存放一些图标，字体，声音文件的目录

如上图所示，在一个 APP 项目当中，可以一个或者多个 Module（模块），在 Module 可以包含一个或多个 UIAbility（界面能力组件），在UIAbility中既可以包含页面单独的Page(页面)，在Page中也可以包含 Component（组件），

2.应用模型 Stage & FA

关于 FA 模型鸿蒙已经不再主推

官方介绍：Stage模型

应用模型是HarmonyOS为开发者提供的应用程序所需能力的抽象提炼，它提供了应用程序必备的组件和运行机制。有了应用模型，开发者可以基于一套统一的模型进行应用开发，使应用开发更简单、高效。

换言之——模型的基础，因为只有基于该应用模型我们才可以开发对应的应用和业务。

HarmonyOS Next也将Stage模型作为主推模型，所以我们本次将学习Stage模型相关的应用开发能力。

官方 Stage 概念图 文档地址

应用模型是开发鸿蒙应用的基础底座，但是鸿蒙先后推出了FA和Stage，鸿蒙4.0和鸿蒙Next都将Stage作为主推方向，所以我们主要基于Stage模型来学习和开发我们目前的应用。

3.什么是UIAbility-(界面能力组件)

UIAbility组件是一种包含UI界面的应用组件，主要用于和用户交互。

官网介绍：UIAbility是系统调度的基本单元，可以给应用提供绘制界面的窗口。

UIAbility的设计理念：

原生支持应用组件级的跨端迁移和多端协同。
持多设备和多窗口形态。

UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口。一个应用可以包含一个或多个UIAbility组件。例如，在支付应用中，可以将入口功能和收付款功能分别配置为独立的UIAbility。

每一个UIAbility组件实例都会在最近任务列表中显示一个对应的任务。

对于开发者而言，可以根据具体场景选择单个还是多个UIAbility，划分建议如下：

如果开发者希望在任务视图中看到一个任务，则建议使用一个UIAbility，多个页面的方式。
如果开发者希望在任务视图中看到多个任务，或者需要同时开启多个窗口，则建议使用多个UIAbility开发不同的模块功能。
场景- 支付场景-携程/智行火车票付款的时候- 调用了微信支付/支付宝支付

为使应用能够正常使用UIAbility，需要在module.json5配置文件的abilities标签中声明UIAbility的名称、入口、标签等相关信息。

{
  "module": {
    ...
    "abilities": [
      {
        "name": "EntryAbility", // UIAbility组件的名称
        "srcEntry": "./ets/entryability/EntryAbility.ets", // UIAbility组件的代码路径
        "description": "$string:EntryAbility_desc", // UIAbility组件的描述信息
        "icon": "$media:icon", // UIAbility组件的图标
        "label": "$string:EntryAbility_label", // UIAbility组件的标签
        "startWindowIcon": "$media:icon", // UIAbility组件启动页面图标资源文件的索引
        "startWindowBackground": "$color:start_window_background", // UIAbility组件启动页面背景颜色资源文件的索引
        ...
      }
    ]
  }
}

4.基础- UI组件结构

上一篇文章中创建的 HelloWorld 工程中，分析一下 UI 的结构

ArkTS通过装饰器 @Component 和 @Entry 装饰 struct 关键字声明的数据结构，构成一个自定义组件。自定义组件中提供了一个 build 函数，开发者需在该函数内以链式调用的方式进行基本的 UI 描述，UI 描述的方法请参考 UI 描述规范。官方地址

struct-自定义组件基于struct实现

要想实现一段UI的描述，必须使用struct关键字来声明- 注意不能有继承关系-组件名不能系统组件名重名

语法： struct 组件名 {}

@Component
struct Index {
  
}
@CustomDialog 
struct Index2 {
  
}

struct关键字声明的UI描述-必须被@Component或者@CustomDialog修饰

@Component修饰符

Component装饰器只能修饰struct关键字声明的结构，被修饰后的struct具备组件的描述(渲染)能力

build函数

用于定义组件的UI描述，一个struct结构必须实现build函数

@Component
struct MyComponent {
  build() {
  }
}

build函数是组件(Component)必须提供以及实现的一个函数，build函数可以没有内容，如果有的话，必须有且只有一个容器组件(可以放置子组件的组件)- 只有entry里面有限制- component里面没有限制 Component的组件build函数可以放没有子组件的组件

@Entry修饰符

Entry将自定义组件定义为UI页面的入口，也就是我们原来前端常说的一个页面，最多可以使用Entry装饰一个自定义组件(在一个ets文件中)-如下面的代码就是不被允许的.

错误示例：

@Entry
@Component
struct Index {

  build() {
  
  }
}
@Entry
@Component
struct Index2 {
  build() {

  }
}

Entry修饰的组件，最终会被注册，具体文件位置-main/resources/base/profile/main_pages.json

自动注册-新建组件时，采用新建Page的方式
手动注册-新建一个ets文件，自己在main_pages.json中手动添加路径

注意： 如果你手动删除了某一个带entry的组件，你需要手动去main_page中去删除该路径，否则编译会报错

组件复用

在很多情况下，由于业务的复杂度，我们经常会将一个大的业务拆成若干个组件，进行组装，这里我们非常灵活的复用组件，比如

我们可以把上图抽象成三个组件- Header- Main- Footer 真实情况可能比这个还要多

在项目中创建 view 文件夹在文件夹中创建 ShanMu 文件夹，新建 ShanMuHeader.ets文件

@Preview
@Component
struct ShanMuHeader {
  build() {
    Row () {
      Text("山姆头部")
        .width('100%')
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height(60)
    .backgroundColor(Color.Pink)
  }
}
export { ShanMuHeader }

在项目中创建 view 文件夹在文件夹中创建 ShanMu 文件夹，新建 ShanMuMain.ets文件

@Component
struct ShanMuMain {
  build() {
    Row(){
      Text('山姆中部')
        .fontColor(Color.Red)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
  }
}

export {
  ShanMuMain
}

在项目中创建 view 文件夹在文件夹中创建 ShanMu 文件夹，新建 ShanMuFooter.ets文件

@Component
struct ShanMuFooter {
  build() {
    Row(){
      Text("山姆底部").fontColor(Color.White)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(60)
    .backgroundColor(Color.Blue)
  }
}

export {
  ShanMuFooter
}

在项目中右键 Pages, 创建新的页面 ShanMu.ets

import { ShanMuFooter } from '../view/ShanMu/ShanMuFooter';
import {ShanMuHeader} from '../view/ShanMu/ShanMuHeader';
import { ShanMuMain } from '../view/ShanMu/ShanMuMain';

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

  build() {
    Column(){
      ShanMuHeader()
      ShanMuMain()
        .layoutWeight(1)
        .backgroundColor (Color.Green)
      ShanMuFooter()
    }
  }
}

编译运行

模拟器运行

这一期就到这里啦！下一期带大家认识一下ArkUI 里面的基本组件。有想去了解的小伙伴也可以自行安装和创建进行研究一下。

一百天挑战学会HarmanyOS——HarmanyOS 的开发模型与组件结构

前言