鸿蒙开发的探索 (二)

一.ArkTS 基础

1. 简介

提供了声明式UI的规范,是ts的拓展,新增状态管理的能力

2.UI描述规范

  • 装饰器,@component,@state装饰类,结构,方法和变量,赋予特殊意义,就好比对于一些方法逻辑打上标记,在执行一些特殊操作的时候有一些特殊的附带的逻辑处理行为
  • ui描述,声明式的方式描述ui
  • 内置组件,系统提供了基础组件和容器组件
  • 属性方法,设置组件的属性
  • 事件方法,设置组件对事件的响应逻辑

3. 常用装饰器

  • @component 自定义组件,组件化的方法,
  • @entry 装饰器作为页面的默认入口组件,加载页面,首先创建@entry的自定义组件,一个页面有且只能有一个入口entry
  • @buider 装饰器是组件内部拆分组件方法,让页面结构清晰

4. 自定义组件生命周期回调函数

  • aboutToAppear() //项目初始化的时候调用类似于vue中created()
  • aboutToDisappear() //自定义组件销毁之前,释放内存资源,避免内存泄露类似于vue中的beforeDestroy()
  • onPageShow() //刚打开应用进入页面时类似于vue中的mounted()
  • onPageHide() //home健返回,页面进入后台时(移动端api)
  • onBackPress() //系统操作的返回,可设置返回状态(移动端api)

5.渲染逻辑

  • 条件渲染 if/else
  • 循环渲染 ForEach
scss 复制代码
    List(){
     ForEach(List,(item)=>{
         ListItem(){...}
     },(item)=>item.id)
    }

6. 状态管理

  • @state 装饰器的变量是组件内部的状态数据,有数据热更新的能力
  • @Link 装饰器的变量和副组件的@state变量建立双向数据绑定,任何一方数据变更都会触发另一方数据同步渲染,副组件中必须使用引用初始化$代替this
  • @Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。

二. 声明式UI

1. 声明式描述

通过标签声明页面布局和内容,行列标签代表页面的行列布局规则,<row /> <column />以及样式属性的衔接flex布局的调整,构成了页面的布局

2. 状态驱动数据视图

应用界面是动态的,根据状态的不同展示不同的ui内容,如果数据结果变化了,list数组变化了,那么页面也会同步更新展示最新的数据结果,比如list数据条数的变化,分页查询或者列表页的增删改查之类的操作

3. 开发实践总结

  • 自定义组件的声明,相同结构相同内容,可组合的ui单元
  • 配置属性,支持链式调用的方式配置style样式
  • 布局,容器组件,描述多个组件间布局关系的组件,row/column
  • 改变组件的状态,通过变量控制组件的状态展示,通过点击事件改编变量的值,通过条件语句渲染不同状态
  • 渲染数据,通过循环语句渲染相同数据UI,快速生成多个数据展示
相关推荐
我来变强了14 小时前
无法正确访问 Vue 实例的属性
前端·javascript·vue.js
qixingchao14 小时前
VUE Pinia 官方首推的数据状态管理库
前端·javascript·vue.js
汉堡黄•᷄ࡇ•᷅14 小时前
鸿蒙开发:案例集合List:多列表相互拖拽(删除/插入,偏移动效)(微暇)
华为·harmonyos·鸿蒙·鸿蒙系统
凌波粒14 小时前
CSS基础详解(2)--Grid网格布局详解
前端·css·css3·html5
飛67914 小时前
Flutter 状态管理深度实战:从零封装轻量级响应式状态管理器,告别 Provider/Bloc 的臃肿与复杂
前端·javascript·flutter
汝生淮南吾在北14 小时前
SpringBoot3+Vue3新闻动态网站
前端·javascript·vue.js·spring boot·毕业设计·毕设
LYFlied14 小时前
Vue Router 监听地址变化的核心逻辑示意
前端·javascript·vue.js·vue router·前端路由·源码理解
web守墓人14 小时前
【前端】rspack和rsbuild的关系
前端
韩曙亮14 小时前
【Web APIs】鼠标经过、离开事件 ( mouseover、mouseout 事件 | mouseenter、mouseleave 事件 )
前端·javascript·web apis·mouseover·mouseout·mouseenter·mouseleave
brzhang14 小时前
MCP A2A Skills 这三个词搞懂了 再去写你的智能体
前端·后端·架构