鸿蒙开发【应用开发基础知识】
应用开发介绍
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包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
- build-profile.json5：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。
- hvigorfile.js：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
- build-profile.json5：应用级配置信息，包括签名、产品配置等。
- hvigorfile.js：应用级编译构建任务脚本。
6. 编写应用
本文所编写的应用是特别基础的内容
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 = falseitems: 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示意图：
其他
- 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的应用开发。
