五步实现 HarmonyOS 应用（ets）【鸿蒙开发 07】

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ 签约作者，阿里云专家博主，51CTO 博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括 Flutter,小程序,安卓，VUE，JavaScript。

这里大概分为五步。

第一步：创建应用工程

创建开发工程 （这里以 eTS 工程）为例

1. 打开 DevEco Studio

2.创建一个新工程，选择模板，如 Empty Ability：

3.进入配置工程界面，Project Type 选择 Application，Language 选择 eTS，其他参数根据实际需要设置即可。

修改代码文件

工程创建完成后，在 Project 窗口，点击“entry > src > main > ets > default > pages”，打开“index.ets”文件

第二步：实现用户界面

使用 UI 组件和装饰器

基础组件：Image、Text、 Video 等 容器组件：Stack、Column、 List 等

组件化装饰： @Component、@Entry、 @Builder 、@Extend 等 实现组合目标面

配套实现页面组件开发及组件 自定义 状态管理装饰： @State 、 @Link 、@Observed、 @ObjectLink、 @StorageLink、 @Watch

实现数据驱动视图自动更新

使用 UI 渲染控制语法

条件渲染：if/elseif/else

进行 UI 描述时，根据不同状 态来动态控制组件的渲染

循环渲染： ForEach/LazyForEach

进行 UI 描述时，根据数据的 多少动态控制渲染的次数， 优化代码实现

引用 UI 资源

字符串引用： $ r (‘app.s t ring.name’ )

resources 的 element 目录 下定义字符串，支持全球化 小语种

媒体资源引用： $ r (‘app.media.name’ )

resources 的 media 目录下存 放资源，支持 png、jpg、 svg 等多种格式

添加 UI 交互事件

基础手势事件：onClick / onTouch 等

定义基础用户交互，结合 TouchEvent 信息可以实现自定 义手势

高级手势事件：长按手势 / 滑 动手势 / 组合手势等

通过 gesture 属性函数配置 内置高级手势支持， GestureGroup 可支持多种 高级手势组合

第三步：完善功能逻辑

使用生命周期接口

页面生命周期接口：onPageShow、 onPageHide

UI 组件生命周期接口： aboutToAppear、aboutToDisappear

其它生命周期接口：onBackPressed、 onCreate、onDestroy 等

结合页面、UI 组件、系统状态的变化生命 周期接口添加功能逻辑

使用子系统能力接口

多个子系统提供大量系统能力接口 使用仅需两步：

一、导入依赖包。

二、直接调用系统能力接口。

调用系统能力实现具体功能逻辑

第四步：优化交互体验

实现动效

属性动画

animation ：自动监听组 件所有通用属性变化，自动增加动画 补间

显式动画 animateTo ：指定特定 属性变化，为特定的属性动画自动增 加动画补间

修改组件属性，自动生成动画补 间，优化属性变化交互体验

转场动画

组件间转场： transition 监听组件 的渲染状态变化，增加组件渲染、移除时的动画效果

页面间转场： pageTransition 指定页面间跳转的切换动画效果

组件、页面切换时，自动生成动画 补间，优化切换交互体验

动画组件

ImageAnimator：支持逐帧图片播 放动画

使用多个图片组成动画，并动态控制 动画播放

Animator：组件形式提供动画控制器 动态控制播放状态，定制补间动画， 实现深度自定义动画效果。

第五步：模拟器调试

登录

选择 p40Pro

Failure[INSTALL_PARSE_FAILED_USESDK_ERROR]    compileSdkVersion and releaseType of the app do not match the apiVersion and releaseType on the device.

源码地址：https://github.com/ITmxs/hm_ets_demo