#打卡不停更# OpenHarmony - 应用开发入门指南

Posted 2022-11-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#打卡不停更# OpenHarmony - 应用开发入门指南相关的知识，希望对你有一定的参考价值。

作者：余香鑫

前言

了解OpenHarmony
能够开发一些简单的OpenHarmony应用

一、了解OpenHarmony

OpenHarmony是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的开源项目, 目标是面向全场景、全连接、全智能时代, 搭建一个智能终端设备操作系统的框架和平台, 促进万物互联产业的繁荣发展.

开放原子开源基金会:
由阿里巴巴、百度、华为、浪潮、360、腾讯、招商银行联合发起, 于 2020 年 6 月成立的非营利机构. 为各类开源项目提供各种支持

(1）开放原子开源基金会是中国内地首个开源领域的基金会, 成立于2020年6月, 由阿里巴巴、百度、华为、浪潮、360、腾讯、招商银行等企业联合发起, 是在中华人民共和国民政部注册的非营利性独立法人机构. 基金会涵盖OpenHarmony、TecentOS Tiny、Alioshings、UBLM、TKEstack、XuperChain等项目. )

和HarmonyOS有什么关系

华为的说法HarmonyOS是基于OpenHarmony开发的商用版本, 如下方右图所示

二、ArkUI框架

ArkUI框架也称方舟开发框架, 框架提供了应用UI开发所必需的能力，如多种组件、布局计算、动画能力、UI交互、绘制等。

框架提供了基于TS扩展的声明式开发范式(简称eTS)和基于JS扩展的类Web开发范式(简称JS), 以下是两种范式的简单对比

开发范式名称	简介
类Web开发范式	采用经典的HML、CSS、javascript三段式开发方式. 使用HML标签文件进行布局搭建, 使用CSS文件进行样式描述, 使用JavaScript文件进行逻辑处理.
声明式开发范式	采用TS语言并进行声明式UI语法扩展, 从组件、动效和状态管理三个维度提供了UI绘制能力. 选用有类型标注的TS语言, 引入编译期的类型校验.

框架结构

对比JS的类Web开发范式 eTS无需JS Framework进行页面DOM管理, 渲染更新链路更为精简, 性能更好, 在进行大型应用开发时, 更推荐使用eTS进行开发

TypeScript

TypeScript是在JavaScript的一个超集并支持 ECMAScript 6 标准, 本节会简单介绍TS和JS的主要不同点, 更多内容可自行前往 TypeScript官网

类型提示

TypeScript 的核心功能是它的类型系统. 在 TypeScript 中, 可以使用类型提示来识别变量或参数的数据类型. 使用类型提示, 可以描述对象的形状, 这样可提供更好的文档, 使 TypeScript能够验证代码是否正常工作。通过静态类型检查, TypeScript 在开发初期就能发现 JavaScript 通常直到代码在浏览器中运行才会发现的代码问题.

let name: string = Sanmu // 申明一个String类型的变量name, 初始化值为 Sanmu
let isVisible = false // 申明一个布偶类型的变量isVisible, 初始化值为 false

// 联合类型
function(param: string | number): boolean
    return true


function(param: number): void


// 定义一个枚举
enum Type 
  WALK,
  SUBWAY,
  CAR

Class

TS是面对对象语言, 使用class关键字申明一个类, class内部可以包含变量, 构造和方法, 示例如下

class Person 
  name: string
  private age: number

  constructor(name: string, age: number | string) 
    this.name = name
    if (typeof age === string) 
      this.age = Number.parseInt(age)
     else 
      this.age = age
    
  

  sayAge() 
    console.log(Age:  + this.age)

三、开发环境搭建

安装DevEco Studio. IDE 3.0 Beta4支持 HarmonyOS和OpenHarmonOS应用开发, 且提供了信息中心InfoCenterView->ToolWindows->InfoCenter方便快速查阅应用开发资源
使用IDE Beta4打开旧版本创建的项目存在白屏问题, 推测是因为新版本编译器版本变更导致的, 所以仅建议使用Beta4开发新项目
配置SDK
配置hdc环境变量, HarmonyOS hdc和OpenHarmony hdc不兼容(可选)

四、使用JS语言开发

创建一个OpenHarmony工程项目, 选择JS语言, 从下面目录结构可以看出OpenHarmony应用项目和HarmonyOS应用项目差别不大, 主要有两个区别:

构建工具从gradle变为了hvigor, 这个对于我们应用开发基本无影响
OpenHarmony应用项目src/main目录下没有了java目录

JS.Project.tree
│  build-profile.json5      # 项目的配置文件, 申明编译API版本, 签名信息, 包含的module等配置
│  hvigorfile.js            # 项目级编译构建任务脚本
│  local.properties         # 本地配置文件
│  package-lock.json
│  package.json
├─.hvigor                   # 编译构建脚本生成目录
├─entry                     # 主module
│  │  build-profile.json5
│  │  hvigorfile.js         # 模块级编译构建任务脚本
│  │  package-lock.json
│  │  package.json
│  └─src                    # 源码目录
│      ├─main               # 源码入口
│      │  ├─js
│      │  │  └─MainAbility              # Ability
│      │  │      │  app.js              # Ability入口
│      │  │      ├─i18n                 # 国际化语言目录
│      │  │      │      en-US.json
│      │  │      │      zh-CN.json
│      │  │      └─pages                # jsPage目录
│      │  │          └─index            # 首页
│      │  │                  index.css
│      │  │                  index.hml
│      │  │                  index.js
│      │  │  config.json    # module配置文件, 申明Ability的属性, 使用的隐私权限等配置
│      │  └─resources       # module资源目录, 存放config.json中引用的资源文件
│      └─ohosTest           # 单元测试
└─node_modules              # node模块依赖

配置签名, 打开项目配置页面, 选择Project->Signing COnfig->OK, 完成自动签名
编写逻辑代码, JS语法和Web网页类似, 可参考示例
运行调试, 先连接设备(需要先开启开发者模式), 点击Run->Run entry将自动编译安装启动hap到设备上

五、使用eTS语言开发

eTS项目目录结构

eTs.Project.tree
│  build-profile.json5      # 项目级配置文件, 申明编译API版本, 签名信息, 包含的module等配置
│  hvigorfile.js            # 项目级编译构建任务脚本
│  local.properties         # 本地配置文件
│  package-lock.json
│  package.json
├─.hvigor                   # 编译构建脚本生成目录
├─AppScope                  # 应用的全局配置信息
├─entry                     # 主module
│  │  .gitignore
│  │  build-profile.json5
│  │  hvigorfile.js         # 模块级编译构建任务脚本
│  │  package-lock.json
│  │  package.json
│  └─src                    # 源码目录
│      ├─main               # 源码入口
│      │  ├─ets             # ets源码入口
│      │  │  ├─Application  # Stage目录, 一个module仅存在一个
│      │  │  │      MyAbilityStage.ts   # module运行的入口, 继承自AbilityStage, 持有AbilityStageContext对象 
│      │  │  ├─MainAbility  # Ability目录
│      │  │  │      MainAbility.ts
│      │  │  └─pages        # Ability包含的页面
│      │  │         index.ets  # 具体的页面
│      │  │  module.json5   # module配置文件, 同HarmonyOS FA项目config.json文件, 申明Ability的属性, 使用的隐私权限等配置
│      │  └─resources       # module资源目录, 存放图片 颜色 字符串等资源
│      └─ohosTest       # 单元测试
└─node_modules          # node模块依赖

UI组件生命周期

UI组件的生命周期, 通常包括创建销毁可见不可见,为满足UI开发需求, UI框架会在页面的创建和销毁前通过回调函数将事件通知给UI组件 eTS UI组件生命周期函数如下

回调函数	描述
aboutToAppear	创建UI组件时回调, 一般在此函数下初始化数据
build	申明UI结构, 函数会在初始渲染时执行, 此外, 当组件中的状态发生变化时, build方法会再次执行.
aboutToDisappear	UI组件销毁前调用, 常再次函数下处理资源释放
onPageShow	页面显示回调, 仅@Entry修饰的组件有效
onPageHide	页面不可见回调, 仅@Entry修饰的组件有效
onBackPress	当点击系统的返回键时, 会回调此函数, 仅@Entry修饰的组件有效

装饰器

装饰器	作用对象	描述
@Component	struct	表示该结构体具有UI组件化能力, 申明了该装饰器必须实现build方法, 以描述UI效果
@Entry	UI组件	表示页面入口
@Extend	UI内置组件	Extend装饰器将新的属性函数添加到内置组件上
@State	UI组件内的变量	修饰的对象数据发生改变时, 会触发所在组件回调build方法进行刷新
@Link	UI组件内的变量	子组件依赖其父组件的某些属性, 支持双向绑定
@Prop	UI组件内的变量	与@Link作用相同, 但不支持双向绑定, 且仅支持基本数据类型