鸿蒙开发【应用开发基础知识】

应用开发介绍

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模型结构

项目的目录结构:

鸿蒙开发【应用开发基础知识】_第1张图片

  • 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 = 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应用的过程中,踩了一些坑,总结下来有如下几点:

  1. 对eTS声明式范式开发自定义组件生疏,编写应用的时候,梳理清楚逻辑后,难以顺畅的编写成代码。
  2. DevEco Studio 的Previewer可能会因为缓存造成预览效果出错。
    例如:新增了一个自定义组件,并同时设置了点击跳转到新增自定义组件的事件,但在Previewer中点击后,无响应。
    鸿蒙开发【应用开发基础知识】_第2张图片

解决方案:

  1. 在gitee上搜索OpenHarmony应用,可检索到许多开发者上传的OpenHarmony应用,下载源码,模仿代码编写,
    同时查看文档,保证理解每一行代码。

  2. 检测代码是否编写正确,如果代码正确,则通过DevEco Studio的Build下的Clean Project清理缓存。

    Clean Project示意图:

鸿蒙开发【应用开发基础知识】_第3张图片

其他

  • 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的应用开发。
    鸿蒙开发【应用开发基础知识】_第4张图片

你可能感兴趣的:(鸿蒙开发,harmonyos,华为,鸿蒙开发,程序员,鸿蒙系统,openharmony,鸿蒙星空版)