您的位置: 首页 > 技术杂谈 > 正文

教不会你算我输系列 | 手把手教你HarmonyOS应用开发

2024-02-28 11:00 https://my.oschina.net/u/4939618/blog/11044885 百度Geek说次阅读条评论

作者 | 小狮子

导读

鸿蒙系统(HarmonyOS)是华为推出的一款面向万物互联的全场景分布式操作系统。鸿蒙支持手机、平板、智能穿戴、智慧屏和车机等多种终端设备，发展史如下：

全文13098字，预计阅读时间34分钟。

01 HarmonyOS开发简介

1.1 技术概念

在万物智联时代重要机遇期，鸿蒙系统结合移动生态发展的趋势，提出了三大技术理念：一次开发，多端部署；可分可合，自由流转；统一生态，原生智能。

1.1.1 一次开发，多端部署

一次开发，多端部署：指的是一个工程，一次开发上架，多端按需部署。目的是为了支撑开发者高效的开发多种终端设备上的应用。为了实现这一目的，鸿蒙系统提供了几个核心能力，包括多端开发环境，多端开发能力及多端分发机制。

1.1.2 可分可合，自由流转

元服务是鸿蒙系统提供的一种全新的应用形态，具有独立入口，用户可以通过点击、碰一碰，扫一扫等方式直接触发，无需显式安装，由程序框架后台静默安装使用，可为用户提供便捷服务。

可分可合：在开发态，开发者通过业务解耦，把不同的业务拆分为多个模块。在部署态，开发者可以将一个或多个模块自由组合，打包成一个 App Pack 统一上架。在分发运行态，每个 HAP 都可以单独分发满足用户单一使用场景，也可以多个 HAP 组合分发满足用户更加复杂的使用场景。

自由流转：传统应用只能在单个设备内运行，当用户有多个设备，且要完成多个任务时，则要在多个设备间来回切换。因此应用能够在设备之间流转，不间断给用户提供服务的能力就变得非常重要。鸿蒙系统提供了自由流转的能力，使得开发者可以方便的开发出跨越多个设备的应用，用户也能够方便的使用这些功能。

1.1.3 统一生态，原生智能

统一生态：移动操作系统和桌面操作系统的跨平台应用开发框架不尽相同，从渲染方式的角度可以归纳为 WebView 染原、原生渲染和自渲染这三类，鸿蒙系统对应的提供系统 WebView、ArkUI 框架和 XComponent 能力来支撑三种类型的跨平台框架的接入。

原生智能：鸿蒙系统内置强大的 AI 能力，面相鸿蒙生态应用的开发，通过不同层次的 AI 能力开放，满足开发者的不同开发场景下的诉求，降低应用的开发门槛，帮助开发者快速实现应用智能化。

1.2 开发套件

鸿蒙开发套件包含设计、开发、测试、运维套件以及 OS 开放能力集:

HarmonyOS Design：鸿蒙视觉设计套件

ArkTS：鸿蒙编程语言

ArkUI：鸿蒙声明式UI框架

ArkCompoler：鸿蒙方舟编译器

DevEco Studio：鸿蒙开发IDE

DevEco Testing：鸿蒙测试套件

AppGallery Connect：鸿蒙应用发布套件

1.2.1 开发语言 - ArkTS

ArkTS基于TypeScript（简称TS）的超集，扩展名为.ets，继承了TS的所有特性（NEXT版本有阉割）。引入了静态类型，扩展了声明式UI、状态管理等能力，让开发者以更简洁、更自然的方式开发高性能应用。

1.2.2 ArkUI框架

ArkUI框架提供开发者两种开发方式：基于ArkTS的声明式开发范式和基于JS扩展的类Web开发范式。声明式开发范式更加简洁，类 Web 开发范式对 Web 及前端开发者更友好。

（1）ArkTS的声明式开发范式：

采用声明式开发范式进行应用开发，相同场景下，对比类 Web 开发范式代码更为精简，并且在性能内存方面进一步优化提升。另外 ArkUI 框架还提供了 API 扩展机制，通过此种机制进行封装风格统一的 JS 接口。包括**状态管理、布局、组件化、装饰器、动效、事件交互、绘制能力、混合开发、跨平台。**

状态管理

声明式开发范式的核心思想是数据驱动 UI 变化，通过提供的状态进行数据管理，这里状态管理指的是，管理数据发生变化时，UI 组件更新的范围。

@State：组件拥有的状态属性，当@State 装饰的变量更改时，组件会重新渲染更新 UI。

@Link：组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。

@Prop：类似@Link，但子组件所做的更改不会同步到父组件上，属于单向传递。

@Provide：作为数据的提供方，可以更新其子节点的数据，并触发页面渲染。

@Consume：在感知到@Provide 数据更新后，会触发当前自定义组件的重新渲染。

@StorageLink ：组件通过使用@StorageLink(key)装饰的状态变量，与AppStorage 建立双向数据绑定，key为 AppStorage 中的属性键值。当创建包含@StorageLink 的状态变量的组件时，该状态变量的值将使用AppStorage 中的值进行初始化。在 UI 组件中对@StorageLink 的状态变量所做的更改将同步到AppStorage ，并从 AppStorage 同步到任何其他绑定实例中。

@StorageProp ：组件通过使用@StorageProp(key)装饰的状态变量，将与 AppStorage 建立单向数据绑定，key 标识 AppStorage 中的属性键值。当创建包含@StoageProp 的状态变量的组件时，该状态变量的值将使用 AppStorage 中的值进行初始化。AppStorage 中的属性值的更改会导致绑定的 UI 组件进行状态更新。

布局

用特定的组件或者属性来管理用户页面所放置 UI 组件的大小和位置。ArkUI 框架支持多种布局方式，如弹性布局、列表、宫格、栅格布局等。

组件化

组件是 ArkUI 框架中的基础显示单元，一切 UI 显示的内容都是组件。ArkUI 框架提供多种开箱即用的 UI 组件，如文本显示Text、Button等，并提供了向多种设备形态的多态 UI 能力。开发者可以直接使用预置组件或者自定义自己的组件。

装饰器

自定义组件的场景中，通常会遇到要动态传入不同的 UI 元素的情况，为了满足该场景 ArkUI 框架同时提供了动态构建 UI 元素的能力。

@Builder：可通过 @Builder 装器进行描述，该装器可以修饰函数，此函数可以在 build() 函数之外声明，并在 build() 函数中或其他 @Builder 修的函数中使用，在一个自定义组件内快速生成多个布局内容。

@Style：声明式范式为了避免开发者对重复样式的设置，通过@Styles 装器可以将多条样式设置提炼成一个方法，直接在组件声明的位置使用。

@Extend：@Extend 装饰器可以将新的属性函数添加到内置组件上，如Text、Column、Button 等，快速扩展原生组件。

动效

与传统开发方式不同，ArkUI动画是由数据变化驱动动画启动，而不再是直接控制动画的播放。

1、属性动画：组件的某些通用属性变化时，可以通过属性动画实现渐变效果，比如设置组件size。

2、显式动画：全局 animateTo 显式动画接口，指定由于闭包代码导致的状态变化插入过渡动效，比如组件的显示与隐藏。

3、转场动画：转场动画包括间转场、组件内过渡转场和共享元素转场三种，比如页面跳转。

事件交互

ArkUI 框架提供了很多交互事件，这些事件提供了不同的信息用于处理相关程序交互逻辑，大致分位两类：

1、UI 组件事件：比如 TextInput 输入框产生的 onEditChange 输入文本变更事件，List 列表组件产生的 onScrollIndex 列表滚动事件。

2、交互事件：点击事件，拖拽事件，焦点事件，触摸事件，按键事件，鼠标事件，手势事件等

绘制能力

ArkUI 框架提供两种 2D 自定义绘制能力。一种是通过图形组合的方式，利用布局、绝对定位和各种图形进行组合实现；另种是通过绘制 API 在 Canvas 画布上进行绘制。

混合开发

ArkUI 框架提供了XComponent 组件，支持加载应用动态库、NAPI 跨语言调用，进行 C++绘制能力的开发。

跨平台

鸿蒙生态构建了 ArkUI 跨平台框架的核心设施，将相应的能力扩展到 iOS 和 Android平台上。开发者可以通过一份代码，结合相应的工具链，同时生成多个 OS 平台的应用工程，并可编译出相应的应用程序，在相应的平台运行。

(2)类Web 开发范式：

类 Web 范式的整体接口采用与传统 Web 开发相似的设计理念，采用 HML、CSS与 JS 三种类型的文件进行页面开发，开发者可以基于此范式方便地进行 UI 构建，同时提供数据绑定机制，支持通过 JS 进行数据更新，进而更新UI。

02 第一个鸿蒙版Hello World

2.1 开发环境搭建

安装DevEco Studio（最新版为3.3.1）
下载DevEco Studio（https://developer.huawei.com/consumer/cn/deveco-studio/）并安装（如果看不到就继续往下拉...）

安装NodeJS
打开DevEco Studio，如果已经安装NodeJS会自动载入路径

△注意：最新LTS版本为18，但鸿蒙要求v14.I9.1~v17.0.0，官方IDE为v16.19.1。

手动安装NodeJS：

// 安装nvm，nvm可以管理多版本NodeJS。
npm install -g n

// 安装v16.19.1
nvm install v16.19.1

// 切换使用指定的版本node
nvm use v16.19.1

// 彻底切换版本
nvm alias default v16.19.1

安装Ohpm（Open Harmony Pack Manager）鸿蒙包管理系统，安装第三库
安装Harmony SDK

注意的是如果不小心关闭了，也不需要恐慌，因为再次打开也回不到开始的配置页面了。

此时可以打开 DevEco Studio -> Help -> Diagnose Development Environment 重新配置。

2.2 创建第一个鸿蒙应用

Create Project -> Application -> Empty Ability

Mode：ArkTS的声明式开发范式与类Web 开发范式，官方主推Stage 声明式开发范式。

2.3 项目结构（有一点点像Android Studio!!）

上部左侧为工程目录，上部中间为代码区，上部右侧为预览区，下部为调试区。

2.3.1 工程目录

AppScope -> app.json5：应用配置信息，包含报名、应用名、版本等

entry为该工程下的Module应用包
entryability -> EntryAbility.ts 为该Module的启动入口

entry -> pages 存放页面文件

entry -> resources 存放资源文件
entry -> module.json5 配置页面信息，可以用与router跳转
entry -> ohosTest 为测试模块

2.3.2 预览区

鸿蒙提供实时的页面预览，且Reload模式可以实时更新UI，终于可以不用Command+R了👍🏻。

2.4 运行

鸿蒙提供Previewer 预览模式、Local Emulator 本地模拟器、Remote Emulator 远程模拟器、Remote Device 远程真机、Local Device 本地真机等模式运行。

实测Mate30运行鸿蒙应用屏幕刷新有问题，非常卡，可以使用scrcpy投屏来解决显示问题。Mate60正常。

2.4.1 真机运行

遥遥领先连续点击 "系统版本号" 开启开发者模式。
系统 -> 更新，开启abd调试。
插入数据线，选择 "传输文件"。
证书配置：File > Project Structure > Project > Signing Configs界面，勾选“Automatically generate signature”。

03 小试牛刀 - 度加首页

3.1 底部Tab

使用Tabs组件创建底部tabbar，子page分别为CreatePage、ClassPage、MinePage。

import promptAction from '@ohos.promptAction'
import { TabbarItem } from '../Models/TabbarItem'
import { ClassPage } from './ClassPage'
import { CreatePage } from './CreatePage'
import { MinePage } from './MinePage'
@Entry
@Component
struct Index {

  // tabbar数据源
  tabList: TabbarItem[] = [
    {
      defaultIcon: $r("app.media.home"),
      activeIcon: $r("app.media.home_focus"),
      title:"创作"
    },
    {
      defaultIcon: $r("app.media.class"),
      activeIcon: $r("app.media.class_focus"),
      title:"课堂"
    },
    {
      defaultIcon: $r("app.media.my"),
      activeIcon: $r("app.media.my_focus"),
      title:"我的"
    },
  ]

  // 记录索引,index从0开始
  @State tabActivityIndex: number = 0

  // 展示tabbaritem
  @Builder
  TabbarBuilder(item: TabbarItem, index: number) {
    Column({space: 5}) {
      Image(this.tabActivityIndex == index ? item.activeIcon : item.defaultIcon)
        .width(24)
        .aspectRatio(1)
      Text(item.title)
        .fontSize(12)
        .fontColor(this.tabActivityIndex == index ? "#FFFFFF" :"#99FFFFFF")
    }
  }

  build() {
    Column() {
      // Tabs
      Tabs({index: this.tabActivityIndex}) {
        ForEach(this.tabList,(item: TabbarItem, index: number) => {
          TabContent() {
            if (index == 0) {
              CreatePage()
            } else if (index == 1) {
              ClassPage()
            } else {
              MinePage()
            }
          }
          .tabBar(this.TabbarBuilder(item,index))
        } )
      }
      .barPosition(BarPosition.End) // tab放在底部
      .onChange((index: number) => {
        this.tabActivityIndex = index
        promptAction.showToast({message:index.toString()})
      })
    }
    .height("100%")
    .width("100%")
    .backgroundColor("#16141F")
    .justifyContent(FlexAlign.Center) 
  }
}

3.2 创作page

创作页面分为5大区域：迎新年、开始创作、工具栏、热点活动tab、热点互动内容。

import { ActivityComponent } from '../Components/ActivityComponent'
import { HotComponent } from '../Components/HotComponent'

// 创作页面
@Component
export struct CreatePage {

  // 活动下标
  @State activitySelectedIndex: number = 0

  build() {
    Column() {

      // 迎新年行
      Row() {
        Row(){
          Text("🎉迎新年，瓜分万元流量券") // 新玩法！AI帮你制作专属贺岁视频🧧
            .width("178")
            .fontColor("rgba(255,255,255,0.6)")
            .fontSize(14)
          Image($r("app.media.img_home_link_arrow"))
            .width(16)
            .aspectRatio(1)
        }
        .width(194)
        .padding({left: 10})

        Row(){
          Image($r("app.media.img_reward_star"))
            .width(16)
            .height(16)
          Text("签到")
            .width("40")
            .fontColor("rgba(255,255,255,0.6)")
            .fontSize(14)
            .textAlign(TextAlign.Center)
        }
        .width(66)
      }
      .height("50")
      .width("100%")
      .justifyContent(FlexAlign.SpaceBetween)

        // 开始创作
      Row({space: 10}){
        // 开始创作
        Stack() {
          Image($r("app.media.img_home_entrance"))
            .width("100%")
            .height("100%")
            .borderRadius(8) // 圆角
          Image($r("app.media.jiandao1"))
            .width(30)
            .aspectRatio(1)
            .margin({bottom: 30})
          Text("开始创作")
            .width(56)
            .height(20)
            .fontColor("rgba(255,255,255,1)")
            .fontSize(14)
            .margin({top: 30})
        }
        .height("100%")
        .layoutWeight(1) // 告诉占满剩余
        .borderRadius(8) // 圆角

        // 草稿箱
        Column(){
          Text("2")
            .fontColor("#fff")
            .fontSize(20)
            .margin({top: 15})
          Text("草稿箱")
            .fontColor("#fff")
            .fontSize(14)
            .margin({top: 10})
        }
        .backgroundColor("#282438")
        .height("100%")
        .width(86)
        .borderRadius(8) // 圆角
      }
      .height(86)
      .width("100%")
      .justifyContent(FlexAlign.SpaceBetween)
      .padding({left: 15, right: 15})

      // AI提词器
      Row() {
        Row() {
          Column() {
            Image($r("app.media.home_prompter"))
              .width(40)
              .height(28)
            Text("AI 提词")
              .fontColor("#fff")
              .fontSize(10)
          }
          .width(70)
          .height(70)
          .justifyContent(FlexAlign.Center)
          .margin({left: 15})

          Column() {
            Image($r("app.media.home_ttv"))
              .width(40)
              .height(28)
            Text("AI 成片")
              .fontColor("#fff")
              .fontSize(10)
          }
          .width(70)
          .height(70)
          .justifyContent(FlexAlign.Center)

          Column() {
            Image($r("app.media.home_digital_human"))
              .width(40)
              .height(28)
            Text("AI 数字人")
              .fontColor("#fff")
              .fontSize(10)
          }
          .width(70)
          .height(70)
          .justifyContent(FlexAlign.Center)

          Column() {
            Image($r("app.media.home_subtitle"))
              .width(40)
              .height(28)
            Text("文字提取")
              .fontColor("#fff")
              .fontSize(10)
          }
          .width(70)
          .height(70)
          .justifyContent(FlexAlign.Center)
          .margin({right: 15})

        }
        .height("100%")
        .width("100%")
        .backgroundColor("#282438")
        .borderRadius(8)
        .justifyContent(FlexAlign.SpaceBetween)

      }
      .backgroundColor("#16141F")
      .height(76)
      .width("100%")
      .padding({left: 15, right: 15})
      .margin({top: 15}) 
      .borderRadius(8)

      // 春节活动
      Row() {
        Row() {
          Image($r("app.media.huodong1"))
            .borderRadius(8)
        }
        .height("100%")
        .width("100%")
        .backgroundColor("#282438")
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .backgroundColor("#16141F")
      .height(76)
      .width("100%")
      .padding({left: 15, right: 15})
      .margin({top: 15})
      .borderRadius(8)

      // 热点
      Row() {
        Row() {
          Image(this.activitySelectedIndex == 0 ? $r("app.media.img_hot_tab_focus") : $r("app.media.img_hot_tab"))
            .width(45)
            .height(25)
        }
        .margin({left: 20})
        .width(45)
        .height(54)
        .onClick( () => {
          this.activitySelectedIndex = 0
        })

        Text("活动")
          .fontSize(18)
          .fontColor(this.activitySelectedIndex == 0 ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,1)")
          .margin({left: 20})
          .onClick( () => {
            this.activitySelectedIndex = 1
          })
          .margin({left: 15, top: 2})
          .height(54)
      }
      .margin({top: 5})
      .height(54)

      if (this.activitySelectedIndex == 0){
        HotComponent()
      } else {
        ActivityComponent()
      }
    }
    .width("100%")
    .height("100%")
    .alignItems(HorizontalAlign.Start)
  }
}

3.3 热点Component

import { hotContentItemList, hotContentItemList2, HotContentItemModel } from '../Models/HotContentItemModel'
import { HotContentComponent } from './HotContentComponent'
import { TabItemListComponent, TabItemModel } from './TabItemListComponent'
// 热点
@Component
export struct HotComponent {

  // 定义item的数据源
  @State
  tabItemModelList: TabItemModel[] = [
    new TabItemModel({title: "全网"}),
    new TabItemModel({title: "娱乐"}),
    new TabItemModel({title: "情感"}),
    new TabItemModel({title: "历史"}),
    new TabItemModel({title: "健康"}),
    new TabItemModel({title: "社会"}),
    new TabItemModel({title: "科技"}),
    new TabItemModel({title: "春节"})
  ]

  // 选中的item下标
  @State selectedIndex: number = 0

  // 热点内容列表
  @State hotContentItemList: HotContentItemModel[] = hotContentItemList

  // 热点内容列表2.为了模拟不同tab下的数据
  @State hotContentItemList2: HotContentItemModel[] = hotContentItemList2

  build() {
    Column() {
      Text("全网热点 每分钟更新")
        .fontColor("rgba(255,255,255,0.3)")
        .fontSize(12)
        .margin({left: 15, top: 0})

      // 热点tab列表
      TabItemListComponent({itemModelList: $tabItemModelList, selectedIndex: $selectedIndex})

      if (this.selectedIndex == 0) {
        // 热点内容
        HotContentComponent({itemList: this.hotContentItemList})
      } else if (this.selectedIndex == 1) {
        // 热点内容
        HotContentComponent({itemList: this.hotContentItemList2})
      } else {
        // 热点内容
        HotContentComponent({itemList: this.hotContentItemList})
      }
    }
    .alignItems(HorizontalAlign.Start)
    .width("100%")
    .layoutWeight(1) 
    .padding({bottom: 80})
  }
}

3.4 活动Component

import { createActivityListItemList, CreateActivityListItemModel } from '../Models/CreateActivityListItemModel'
// 活动
@Component
export  struct ActivityComponent {

  @State createActivityListItemList: CreateActivityListItemModel[] = createActivityListItemList

  // 时间戳格式化
  formatDateTime(timestamp: number) {
    let dateTime = new Date(timestamp * 1000)
    const year = dateTime.getFullYear();
    const month = dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1;
    const date = dateTime.getDate() < 10 ? '0' + dateTime.getDate() : dateTime.getDate();
    const hours = dateTime.getHours() < 10 ? '0' + dateTime.getHours() : dateTime.getHours();
    const minutes = dateTime.getMinutes() < 10 ? '0' + dateTime.getMinutes() : dateTime.getMinutes();
    const seconds = dateTime.getSeconds() < 10 ? '0' + dateTime.getSeconds() : dateTime.getSeconds();
    return (month + '月' + date + '日');
  }

  build() {
    List() {
      ForEach(this.createActivityListItemList, (model: CreateActivityListItemModel, index: number) => {
        ListItem() {
          Row() {
            Image(model.pic)
              .width(114)
              .height(64)
              .margin({left: 15})
              .borderRadius(8)
            Column() {
              Text(model.name)
                .fontColor(Color.White)
                .fontWeight(14)
              Text(this.formatDateTime(model.start_time) + "-" + this.formatDateTime(model.end_time))
                .fontColor("rgba(255,255,255,0.3)")
                .fontWeight(12)
                .margin({top:10})
            }
            .alignItems(HorizontalAlign.Start)
            .margin({left: 15})
          }
        }
        .height(84)
      })
    }
    .width("100%")
    .aspectRatio(1)
  }
}