正文

#打卡不停更#-openharmony/docs开发入门(代码片段)

author  author  2022-12-04  629

关键词：

作者：朱子道杨成

前言

不管是作为软件开发的爱好者还是已经从事软件开发这个行业的从业者，对于接触一种全新的系统 OpenHarmony。学习OpenHarmony，需要清楚OpenHarmony这个系统是什么，能干什么，今日分享从设备开发和应用开发两个方向学习OpenHarmony/docs文档。

一、设备开发介绍

1. 环境搭建与源码获取

环境搭建

搭建OpenHarmony 的系统环境，需要Windows系统与Ubuntu系统结合使用。

Windows系统负责烧录、测试、与OpenHarmony在windows系统cmd模式下交互。

Ubuntu系统负责源码管理、阅读、开发、编译。Ubuntu系统，通过在Windows系统安装虚拟机，配置初始化虚拟机（内存推荐16GB及以上、CPU推荐4核及以上），虚拟机运行安装Ubuntu系统。

详细请参考：搭建轻量与小型系统环境

源码获取

Ubuntu环境下，更新软件源命令sudo apt-get update。通过sudo apt_get install git git-lfs，安装git客户端与git-lfs，命令 git --version 查看git是否成功。配置git客户端。

安装码云repo工具，通过mkdir命令，在固定目录下创建存放repo的文件目录。通过命令 curl https://gitee.com/oschina/repo/raw/fork_flow/repo-py3 -o 目录，获取到repo工具。安装配置完成之后，通过一下命令步骤进行OpenHarmony源码获取。

详细请参考：源码获取

2. HarmonyOs源码编译

编译环境搭建

Ubuntu环境下，编译OpenHarmony源码之前，必须进行编译环境搭建。通过apt_get和pip3 install命令安装配置编译环境。通过 apt-get update -y 更新软件源。更新成功之后，通过apt-get命令进行OpenHarmony源码编译之前安装配置。

详情请参考：环境配置

编译命令

成功配置编译环境，Ubuntu环境下，打开CMD命令行窗口，通过cd命令进入HarmonyOs目录下，目录结构如下。

OpenHarmony源码根目录下，通过执行命令 bash build/prebuilts_download.sh 脚本进行预编译，安装编译器及二进制工具，成功提示。

接着执行命令 ./build.sh system_size=standard product_name=harmonyos 编译OpenHarmony源码。./build.sh 同时也支持其他多种参数。

--source-root-dir=SOURCE_ROOT_DIR                 # 指定路径
--product-name=PRODUCT_NAME                       # 指定产品名
--device-name=DEVICE_NAME                         # 指定装置名称
--target-os=TARGET_OS                             # 指定操作系统
-T BUILD_TARGET, --build-target=BUILD_TARGET      # 指定编译目标，可以指定多个

OpenHarmony源码编译成功，OpenHarmony源码根目录下 out/harmonyos/packages/phone/images， Ubuntu环境的终端显示。

详情请参考：编译构建

编译出错

编译OpenHarmony源码的过程中，可能出现各类问题。以下枚举一些异常情况。

解决方法，通过执行命令 sudo apt install openjdk-11.0.16 修复这个问题。

解决方法，通过执行命令 sudo apt install libtinfo5 修复这个问题。

其它遇到的问题请参考：常见编译问题和解决方法

3. OpenHarmony烧录简介

Ubuntu环境下，编译OpenHarmony源码成功，OpenHarmony镜像文件存放的路径，OpenHarmony源码存放路径/out/harmony/packages/phone/images。Windows环境下使用烧录工具瑞芯微开发工具 v2.84（RKDevTool.exe），烧录OpenHarmony文件到开发版3568。

windows环境下，使用瑞芯微开发工具之前需要安装瑞芯微驱动，打开瑞芯微开发工具，同时通电开发板，插入USB。烧录工具会显示发现一个MASKROM设备。开发板MASKROM模式无法成功烧录系统。开发板需要进入LOADER模式才能成功烧录OpenHarmony系统。如何进入LOADER模式？需要先通过一个牙签按住3568开关，再进行通电，通电之后继续按住3568开关。

烧录工具页面会显示发现一个LOADER设备，放开按住3568的开关。

瑞芯微开发工具里面选择编译成功后生成的OpenHarmony镜像，每一个镜像文件顺序都不能有任何的颠倒。一旦选择镜像文件出现颠倒，烧录的时候很大概率会将3568开发板直接烧坏，导致3568开发板无法使用。正确选择OpenHarmony镜像文件，执行3568开发板烧录。烧录工具会提示烧录是否成功。

4. OpenHarmony测试用例

OpenHarmony为开发者提供了一套全面的自测试框架，开发者可根据测试需求开发相关测试用例。同时开发者也能开发单独测试函数功能的可执行程序。

window模块功能，创建一个cpp文件，内部编写main函数。main函数编写业务逻辑流程。测试用例在源码路径（foundation/windowmanager/snapshot）。

编写BUILD.gn增加编译配置。

cpp目录上层目录下，bundle.json文件增加需要编译的模块。

执行如下命令

./build.sh system_size=standard product_name=harmonyos

生成 snapshot_display，存放目录 out/harmonyos/window/window_manager。

在 snapshot_display 目录下，执行如下命令

hdc file send snapshot_display /system/bin

推送开发板 /system/bin目录。

出现异常提示 [Fail]Error opening file: read-only file system, path:/system/bin/snapshot_display，权限不够。执行命令

hdc shell mount -o remount,rw /

解决权限问题。

设置执行权限，执行命令

hdc shell chmod a+x /system/bin/snapshot_display

执行推送到开发板程序snapshot_display。

文件存放开发板的实际路径

更多测试信息请参考：测试子系统

5. OpenHarmony源码阅读

推荐使用DevEco Studio项目管理工具管理OpenHarmony源码，学习OpenHarmony项目工程的整体目录结构及进行代码阅读，其他项目管理工具请自行选择适合的个人学习的工具。

二、应用开发介绍

1. 项目说明

通过OpenHarmony提供的Stage模型和ArkUI的eTS声明式开发规范，结合简单的Demo，分享学习OpenHarmony/docs/application-dev（应用开发文档）。

2. 主要功能

目录标题展示，目录列表展示
点击目录列表，查看列表内容
点击目录标题的返回箭头，返回之前的内容
页面内容溢出，可上下滑动查看内容

3. 效果展示

4. 开发环境搭建

首先需要搭建好开发环境。

参阅应用开发文档—工具：

下载HUAWEI DevEco Studio For OpenHarmony（简称DevEco Studio）
配置开发环境

5. 创建项目

搭建开发环境后，创建项目，了解项目结构。

参阅应用开发文档—快速开始：

掌握OpenHarmony应用的一些基本概念：

UI框架的简单说明（方舟开发框架（ArkUI框架））
——类Web开发范式（JS）
——声明式开发范式（eTS）
Ability的基本概念（应用所具备能力的抽象）
——FA模型
——Stage模型

应用包结构：FA模型结构、Stage模型结构

项目的目录结构:

AppScope > app.json5：应用的全局配置信息。
entry：OpenHarmony工程模块，编译构建生成一个HAP包。
- src > main > ets：用于存放ets源码。
- src > main > ets > Application > AbilityStage.ts：实现AbilityStage接口。
- src > main > ets > MainAbility：应用/服务的入口。
- src > main > ets > MainAbility > MainAbility.ts：承载Ability生命周期。
- src > main > ets > pages：MainAbility包含的页面。
- src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源文件的分类。
- src > main > module.json5：模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，详见应用包结构配置文件的说明（Stage模型）。
- build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。
- hvigorfile.js：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
build-profile.json5：应用级配置信息，包括签名、产品配置等。
hvigorfile.js：应用级编译构建任务脚本。

6. 编写应用

本文所编写的应用是特别基础的内容，所以在接下来的内容更主要是对开发的步骤的说明：

参阅应用开发文档—开发—UI开发
参阅应用开发文档—API参考—组件参考（基于TS扩展的声明式开发范式）

6.1 定义组件结构

创建好项目后，开始编写自定义组件，引入需要的文件，定义需要使用的变量，再添加上组件会使用到的生命周期函数和build方法。

// 引用需要的组件和API
import TitleBar from ./components/titleBar
import router from @ohos.router;

// @Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现@Entry装饰的自定义组件。
@Entry
// @Component装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件
@Component
struct Index 
  // @State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法进行UI刷新
  @State title: string = UI组件
  @State isShowReturn: boolean = false
  items: Array<Item> = []
  
  // 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。  
  aboutToAppear() 
      ...
  
   
  // build方法里描述UI结构
  build() 
      ...

6.2 绘制组件UI

组件结构编写完成，根据需求开始绘制组件UI界面

build() 
    // Columns沿垂直方向布局的容器
    Column() 
      // 引入的自定义组件  
      TitleBar( title: this.title, isShowReturn: this.isShowReturn )
      // List包含一系列相同宽度的列表项。适合连续、多行呈现同类数据 
      List() 
        // ForEach渲染控制语法,循环渲染  
        ForEach(this.items, (each) => 
          ListItem() 
            Row() 
              // 基础文本组件，显示一段文本的组件  
              Text(each.name)
                .fontSize(20)
                
              // 基础图片组件，支持本地图片和网络图片的渲染展示 
              Image($r(app.media.arrow))
                .padding(8)
                .width(40)
            
            .width(100%)
            .justifyContent(FlexAlign.SpaceBetween)
            .padding(10)
          
          // 绑定通用点击事件  
          .onClick(() => 
            ...
          )
        )
      
    
    // 设置通用属性，宽(width)高(height)            
    .width(100%)
    .height(100%)

6.3 添加交互逻辑

界面UI绘制完善后，接下来使用自定义组件的生命周期aboutToAppear回调函数，编写界面数据初始化的逻辑，并把界面上的交互逻辑编写完整。

// 编写界面数据初始化的逻辑，aboutToAppear函数在创建自定义组件的新实例后，在执行其build函数之前执行
aboutToAppear() 
    let routerParams = router.getParams();
    // 条件判断： routerParams==undefined为一级目录界面
    if (routerParams == undefined) 
    ...
    // 条件判断： routerParams!==undefined则为二级目录界面    
     else 
    ...
    

     
build()
  ...
   Row() 
      ...
      
  // 编写点击事件的逻辑  
  .onClick(() => 
    // 条件判断： each.children === undefined，点击的目录列表无子目录
    if (each.children === undefined) 
         router.push(
         url: each.path,
         params: 
         title: each.name
           
         )
        // 条件判断： each.children === undefined，点击的目录列表有子目录
         else 
         router.push(
         url: each.path,
         params: 
             title: each.name,
             items: each.children
           
         )
       
    )
   ...

6.4 测试效果

完成应用编写后，利用DevEco Studio 的Previewer提供的预览效果，测试应用的运行效果是否符合预期效果。

7. 项目复盘

在编写OpenHarmony应用的过程中，踩了一些坑，总结下来有如下几点：

对eTS声明式范式开发自定义组件生疏，编写应用的时候，梳理清楚逻辑后，难以顺畅的编写成代码。
DevEco Studio 的Previewer可能会因为缓存造成预览效果出错。例如：新增了一个自定义组件，并同时设置了点击跳转到新增自定义组件的事件，但在Previewer中点击后，无响应。

解决方案：

在gitee上搜索OpenHarmony应用，可检索到许多开发者上传的OpenHarmony应用，下载源码，模仿代码编写，同时查看文档，保证理解每一行代码。
检测代码是否编写正确，如果代码正确，则通过DevEco Studio的Build下的Clean Project清理缓存。

Clean Project示意图：

项目源码

https://gitee.com/chucheng42/simple-project

其他

third-party-components

第三方库文件存放目录。该目录统一管理第三方库的文件，例如：头文件（.h），实现文件（.cpp），库链接文件（.so）等。针对不同的第三方库功能创建同名文件夹来实现单独库功能的管理。OpenHarmony如何将引入的第三方库，融合，编译，链接。

总结

OpenHarmony设备开发，保持了C++面向对象的特性及语言的特点:

1. 面向对象三大原则（封装、继承、多态）

2. C++语言API（智能指针、lambda、类型推导等）

熟悉OpenHarmony设备开发的整体逻辑和C++语言后，了解进程间的通信技术，远程调用等技术，可以更容易的上手OpenHarmony的设备开发。

OpenHarmony应用开发，虽然和前端开发在写法上有了相当大的变化，前端是运用（HTML CSS JS），但仍旧有同样的三个过程:

1. 搭建页面结构

2. 绘制页面样式

3. 添加事件交互

明白程序开发的流程后，在熟悉OpenHarmony应用开发的语法和本地API后，能在较短的时间内掌握OpenHarmony的应用开发。

更多原创内容请关注：中软国际 HarmonyOS 技术团队

入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com/#bkwz

#打卡不停更#openharmony-应用开发入门指南(代码片段)

作者：余香鑫前言了解OpenHarmony能够开发一些简单的OpenHarmony应用一、了解OpenHarmonyOpenHarmony是由开放原子开源基金会(OpenAtomFoundation)孵化及运营的开源项目,目标是面向全场景、全连接、全智能时代,搭建一个智能终端设备操作系统... 查看详情

#打卡不停更#家庭健康管理平台(代码片段)

0.项目简介身体健康是一切生产生活的硬性基础。健康是福，一切安好，未来才可期。为什么经常跑步体重缺还在往上飘？突发紧急情况怎么处理？在数字时代，如何更好的为人们提供健康福祉、普及健康知识？如何进一步驱动... 查看详情

#打卡不停更#ffh浅析ability框架中stage模型与fa模型的差异(代码片段)

...应用所具备能力的抽象，也是应用程序的基本组成单元。OpenHarmony与HarmonyOS的应用程序APP由一个或多个Hap包组成，每个Hap可以包含一个或多个Ability。Ability框架模型具有两种形态，FA模型以及Stage模型：FA模型：OpenHarmonyAPI8 查看详情

#打卡不停更#[图文并茂]packstack部署train版openstack(代码片段)

Packstack部署openstack-train介绍如何在centos7.9中使用packstack部署openstack-train。首先需要安装一个最小化安装的centos7.9，按照你的网络环境配置好网络，然后重启。这里我的环境是VMware虚拟机，ip是192.168.10.30.首先我们需要关闭防火墙... 查看详情

#打卡不停更#harmonyos基于arkui(ets)实现雷达扫描(代码片段)

作者：杨尚晓前言雷达扫描是一个比较有科技感的东西，对于科幻迷来说，科幻电影里基本都能看到的画面，一个大大的屏幕上,可以看到雷达扫描的绿幕效果。下面我们使用三种方式来实现这样的雷达效果。项目说明工具版本... 查看详情

#打卡不停更#harmonyos-基于arkui（js）实现虚拟摇杆组件(代码片段)

作者：杨尚晓前言虚拟摇杆在移动端游戏中是最常见看的，用来实现游戏中的精灵移动。本案例中使用jspai中的div和image组件来实现的虚拟摇杆组件，然后监听touch事件获取滑动的方向和位置x，y。开发环境说明工具版本：OpenHarmon... 查看详情

#打卡不停更#openharmony数据转码应用开发实战（上）(代码片段)

背景OpenHarmony的应用开发支持C++、JS、eTS，从已有版本的演进路线来看，eTS是未来重点的技术路线。对于刚入门OpenHarmony应用开发的小伙伴来说，eTS可能比较陌生，如果有一个合适的实战项目来练手，那么对技术能力提升是非常有... 查看详情

基于stm32的串口收发讲解（hal库）#打卡不停更#(代码片段)

(基于STM32的串口收发程序（HAL库）)介绍串口（UART通用异步收发器，TTL）通讯是一种设备间的串行全双工通讯方式。由于UART是异步传输，没有传输同步时钟，为了保证数据的正确性，UART采用16倍数据波特率的时钟进行采样。因为... 查看详情

#打卡不停更#harmonyos-基于arkui(ets)实现心电图组件(代码片段)

作者：杨尚晓前言随着大家生活水平的提升，越来越多的人注重自身身心健康，养生成了目前比较热门的活动。心电图是检测心脏活动状态的直观表现，可以通过心电图来观察人提的健康状况。响应鸿蒙万物互联的口号，肯定少... 查看详情

#打卡不停更#三方库移植之napi开发[4]异步调用:callback&promise(代码片段)

三方库移植之NAPI开发系列文章《HelloOpenHarmonyNAPI》、《C/C++与JS的数据类型转换》其接口都是同步的。对IO、CPU密集型任务需要异步处理。NAPI支持异步模型，提供了Promise、Callback2种方式。往期回顾：三方库移植之NAPI开发[1]—HelloO... 查看详情

#打卡不停更#编译效率快三倍,使用wsl2编译openharmony嘎嘎得劲!!(代码片段)

...wsl（WindowsSubsystemforLinux，适用于Linux的Windows子系统）编译openharmony镜像比传统虚拟机快3倍以上。编译环境换成wsl后，编译ohos只需要传统虚拟机上三分之一的时间。下面分享使用经验如下：(目录)为什么使用WSL2比传统虚拟机编译Op... 查看详情

#打卡不停更#openharmony-arkui（ts）声明式开发之列表拖动排列(代码片段)

作者：梁青松项目介绍本项目基于OpenHarmony的ArkUI框架：TS扩展的声明式开发范式，关于语法和概念直接看官网官方文档地址：基于TS扩展的声明式开发范式，因为OpenHarmony的API相对于HarmonyOS的API，功能上比较完善和成熟的，有些... 查看详情

#打卡不停更#ffhopenharmony学生挑战赛分享-少儿语言教育app(代码片段)

Openharmony学生挑战赛经验分享前言本次参赛的项目是基于openHarmony开发的北向应用-少儿语言文化教育APP。从项目成立到初版成型再到参加比赛，这一路上遇到了不少困难，我也从团队协作、产品迭代、技术等方面学到了很多宝贵... 查看详情

#打卡不停更#简单的js鸿蒙小游戏——飞行棋之游戏逻辑(代码片段)

前言我们之前完成了游戏的基本布局，今天我们接着来讲下如何实现飞行棋的游戏逻辑。游戏逻辑掷骰子：随机地掷出点数1~6，根据骰子点数和当前阵营的棋子状态改变对应棋子的disabled属性，以控制该棋子是否可交互移动，若... 查看详情

#打卡不停更#三方库移植之napi开发[3]通过ide开发napi工程(代码片段)

在三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI一文中，笔者开发的是一个rom包的napi工程。该工程需要编译烧录固件，C++的动态库会集成到开发板的ROM中。在本篇文章中，笔者使用三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI中一样的he... 查看详情

#打卡不停更#elt.zip啃论文俱乐部——统计压缩编码机理分析(代码片段)

...滨工程大学大一学生我们是来自7个地方的同学，我们在OpenHarmony成长计划啃论文俱乐部里，与华为、软通动力、润和软件、拓维信息、深开鸿等查看详情

#打卡不停更#简单的js鸿蒙小游戏——飞行棋之页面构建(代码片段)

前言飞行棋大家应该都玩过吧，红、绿、黄、蓝四名玩家轮流掷骰子移动棋子，争先到达终点，期间还要提防己方棋子不被击落。今天就先带大家学习下如何完成飞行棋游戏的简单布局。项目结构页面构建游戏的布局并不复杂，... 查看详情

#打卡不停更#三方库移植之napi开发[2]c/c++与js的数据类型转换(代码片段)

在《三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI》通过一个HelloOpenHarmonyNAPI样例讲述了NPAI接口开发基础知识。本文在其基础上修改hellonapi.cpp文件，介绍JS类型和C/C++数据类型之间的转换。开发基于最新的OpenHarmony3.2Beta3版本及其对应... 查看详情