一、鸿蒙应用开发-初体验
二、鸿蒙应用开发-基础组件
三、鸿蒙应用开发-组件样式
四、鸿蒙应用开发-组件构建函数
五、鸿蒙应用开发-组件组件状态共享
六、鸿蒙应用开发-应用状态存储
目录
组件-什么是ArkTS
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。
image.png
扩展能力如下：
- 基本语法
- 定义声明式UI、自定义组件、动态扩展UI元素；
- 提供ArkUI系统组件，提供组件事件、方法、属性；
- 共同构成 UI 开发主体
- 状态管理
- 组件状态、组件数据共享、应用数据共享、设备共享；
- 渲染控制
- 条件渲染、循环渲染、数据懒加载；
声明式UI？
问题？通过一段 HTML 标签展示出对应的页面方便，还是使用 document.createElement('tag')创建标签构建页面方便？
- 显然是 HTML , 其实 HTML 本身就是声明式的，通过描述的方式去声明 UI 界面。
- 一些前端框架也是声明式UI，如
Vue使用的tempalte模板，如React使用的JSX。 - 在例如现在的
Jetpack ComposeSwiftUIFlutter等APP开发技术也是声明式。
基础-组件结构
image.png
ArkTS通过装饰器 @Component 和 @Entry 装饰 struct 关键字声明的数据结构，构成一个自定义组件。 自定义组件中提供了一个 build 函数，开发者需在该函数内以链式调用的方式进行基本的 UI 描述，UI 描述的方法请参考 UI 描述规范。
- 页面组件
@Entry
@Component
struct Index {
// 工程默认显示 `Index` 页面组件
// build 是声明UI的位置
build() {
Text('页面组件')
}
}
- 自定义组件
// 定义 `Footer` 组件
@Component
struct Footer {
build() {
Text('自定义组件')
}
}
@Entry
@Component
struct Index {
build() {
Column(){
// 使用 `Footer` 组件
Footer()
}
}
}
为了更好维护，自定义组件通常会新建一个文件 Footer.ets，通过模块化语法导出导入(默认|按需)使用。
components/Footer.ets
@Component
export default struct Footer {
build() {
Text('自定义组件')
}
}
Index.ets
import Footer from './components/Footer.ets'
@Entry
@Component
struct Index {
build() {
Column(){
// 使用 `Footer` 组件
Footer()
}
}
}
基础-系统组件(ArkUI)
常用系统组件 Text Column Row Button TextInput 更多组件
- Text 文本组件
- Column 列组件，纵向排列，Flex布局主轴是Y
- Row 行组件，横向向排列，Flex布局主轴是X
- Button 按钮组件
- InputText 输入框组件
实现一个简易登录界面：
aa.jpeg
@Entry
@Component
struct Index {
build() {
Column(){
Row(){
Text('手机号')
TextInput()
}
Row(){
Text('验证码')
TextInput()
}
Row(){
Button('重置').backgroundColor('#ccc')
Button('登录')
}
}
}
}
基础-组件状态
如何使用 @State 定义一个状态变量？
- 组件变量，不具备驱动UI更新能力。
@Entry
@Component
struct Index {
count = 100
build() {
Text(this.count.toString())
.onClick(() => this.count++)
}
}
- 状态变量，指驱动UI更新的数据，加上 @State 装饰器即可，注意：加上类型和初始值。
@Entry
@Component
struct Index {
@State
count: number = 100
build() {
Text(this.count.toString())
.onClick(() => this.count++)
}
}
TIP
- 加上类型和初始值
- 状态变量不可设置的类型有：any undefined null 与复杂类型的联合类型
其他：
- 绑定事件在系统组件后链式使用 onXxxxx 进行绑定即可
- 使用 @ohos.promptAction 可以进行轻提示 promptAction.showToast({ message: 'Tip' })
📕📕📕 练习案例→实现登录表单数据收集、重置、模拟提交。
tree.jpeg
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {
@State
mobile: string = ''
@State
code: string = ''
build() {
Column(){
Row(){
Text('手机号')
TextInput({ text: this.mobile })
.onChange((value)=>this.mobile = value)
}
Row(){
Text('验证码')
TextInput({ text: this.code })
.onChange((value)=>this.code = value)
}
Row(){
Button('重置')
.backgroundColor('#ccc')
.onClick(()=>{
this.mobile = ''
this.code = ''
})
Button('登录')
.onClick(()=>{
if (this.mobile && this.code) {
promptAction.showToast({ message: `${this.mobile} 登录成功` })
} else {
promptAction.showToast({ message: `请输入手机号或验证码` })
}
})
}
}
}
}
网友评论