HarmonyOS 三大特性
- 硬件互助，资源共享
- 一次开发，多端部署
- 统一 OS，弹性部署
硬件互助，资源共享
- 分布式软总线
- 分布式设备虚拟化
- 分布式数据管理
- 分布式任务调度
- 分布式连接能力
一次开发，多端部署
统一 OS，弹性部署
- 组件可有可无
- 组件可大可小
- 平台可大可小
全视角了解 HarmonyOS 架构
创建 Hello World
bundle name : 会作为应用上下线的唯一标识符。需要保障唯一性
save location ：路径不能包含中文字符
model : 应用模型, 主推 Stage
TS 快速入门
类型推断
如果⼀个变量或常量的声明包含了初始值，TS 便可以根据初始值进⾏类型推断，此时我们就可以
不显式指定其类型，例如:
let c = 60;
console.log(typeof c); //number类的静态成员
Typescript 中的类中可以包含静态成员（静态属性和静态⽅法），静态成员⾪属于类本身，⽽不
属于某个对象实例。静态成员通⽤⽤于定义⼀些常量，或者⼯具⽅法。
- 声明静态成员
定义静态成员需要使⽤ static 关键字。
class Constants{
static count:number=1;
}
class Utils{
static toLowerCase(str:string){
return str.toLowerCase();
}
}
console.log(Constants.count);
console.log(Utils.toLowerCase('Hello World'));- 使⽤静态成员
静态成员⽆需通过对象实例访问，直接通过类本身访问即可。
console.log(Constants.count);
console.log(Utils.toLowerCase('Hello World'));继承
继承是⾯向对象编程中的重要机制，允许⼀个类（⼦类或派⽣类）继承另⼀个类（⽗类或基类）
的属性和⽅法。⼦类可以直接使⽤⽗类的特性，并根据需要添加新的特性或覆盖现有的特性。这
种机制赋予⾯向对象程序良好的扩展性。
下⾯通过⼀个例⼦演示继承的特性
class Student extends Person {
classNumber: string;
constructor(id: number, name: string, classNumber: string) {
super(id, name);
this.classNumber = classNumber;
}
introduce(): string {
return super.introduce()+`, and I am a student`;
}
}
let student = new Student(1,'xiaoming','三年⼆班');
console.log(student.introduce());注意：
- 类的继承需要使⽤关键字 extends
- ⼦类构造器中需使⽤ super() 调⽤⽗类构造器对继承⾃⽗类的属性进⾏初始化。
- 在⼦类中可以使⽤ this 关键字访问继承⾃⽗类的属性和⽅法。
- 在⼦类中可以使⽤ super 关键字访问⽗类定义的⽅法。
ArkTS 快速入门
声明式 UI & 组件化
声明式 UI 是一种编写用户界面的范式。
- 定义界面状态
- 描述界面显示效果
- 改变状态
语法说明
声明组件
自定义组件
- 输入 comp ( 简写 ) 回车
- 给自定义组件传参一定是个对象
条件渲染
循环渲染
ForEach(
arr: any[],
itemGenerator: (item: any, index?: number) => void,
keyGenerator?: (item: any, index?: number) => string
)keyGenerator（可选）：
-
key⽣成函数，⽤于为 arr 数组中的每个数据项⽣成唯⼀的 key。
-
key 的作⽤
ForEach 在数组发⽣变化（修改数组元素或者向数组增加或删除元素）时，需要重新渲 染组件列表，在重新渲染时，它会尽量复⽤原来的组件对象，⽽不是为每个元素都重新创 建组件对象。key 的作⽤就是辅助 ForEach 完成组件对象的复⽤。 具体逻辑如下： ForEach 在进⾏初次渲染时，会使⽤keyGenerator 为数组中的每个元素⽣成⼀个唯⼀ 的 key，并将 key 作为组件对象的标识。当数组发⽣变化导致 ForEach 需要重新渲染 时， ForEach 会再次使⽤keyGenerator 为每个元素重新⽣成⼀遍 key，然后 ForEac h 会检查新⽣成的 key 在上次渲染时是否已经存在，若存在， ForEach 就会认为这个 key 对应的数组元素没有发⽣变化，那它就会直接复⽤这个 key 所对应的组件对象；若不 存在， ForEach 就会认为这个 key 对应的元素发⽣了变化，或者该元素为新增元素，此 时，就会为该元素重新创建⼀个组件对象。 -
开发者可以通过 keyGenerator 函数⾃定义 key 的⽣成规则。如果开发者没有定义 keyGenerator 函数，则系统会使⽤默认的 key⽣成函数，即
(item: any, index: number) => { return index + '__' + JSON.stringify(ite
m); }- 在某些情况下默认的 key⽣成函数，会导致界⾯渲染效率低下，此时可考虑通过 keyGenerator 函数⾃定义⽣成逻辑，例如如下场景:
状态变量数组定义如下
@State arr:string[] = ["zhangsan","lisi","wangwu"]ForEach 语句如下
Column(){
ForEach(this.arr,(item)=>{ Text(item) })
}- 初次渲染时，每个元素对应的 key 依次为 0"zhagnsan" 、 1"lisi" 、 2"wangwu" 。若现有⼀个操作是向 arr 数组头部插⼊新的元素，例如新元素为 wanger，按照默认的 key⽣成逻辑，插⼊新元素之后每个元素的 key 就会依次变为 0"wanger" 、 1"zhagnsan" 、 2"lisi" 、 3__"wangwu" ，也就是所有元素的 key 都发⽣了变化，因此 UI 界⾯更新时需要为每个元素都重新创建组件对象，即便原有的元素没有发⽣变化也⽆法复⽤之前的组件，这样⼀来就导致了性能浪费。此时我们就可以考虑提供第三个参数，如下
Column(){
ForEach(this.arr, (item)=>{ Text(item) }, item => JSON.stringify(item))
}图片 UI 组件常用属性
1vp 相当于像素密度为 160ppi 的屏幕上的 1px
DPI 480
@Entry
@Component
struct Index {
@State message: string = 'Hello ArkTs'
build() {
Column({ space: 20 }) {
Row({ space: 20 }) {
Column() {
Image($r('app.media.icon')).width('450px').height('450px')
Text('450px')
}
Column(){
Image($r('app.media.icon'))
.width('150vp').height('150vp')
Text('150vp')
}
}
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}
}图片缩放
图片插值
Text 文本组件
@Entry
@Component
struct Index {
@State message: string = 'Hello ArkTs'
build() {
Column({ space: 20 }) {
//字符串类型
Text('您好,鸿蒙').fontSize(50)
//Resource 类型
Text($r('app.string.greeting')).fontSize(50)
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}
}- base/element/sting.json
- zh_CN/element/sting.json
- en_US/element/sting.json
{
"name": "greeting",
"value": "您好,鸿蒙"//hello harmony
}fontSize 字体大小
1fp=3px
直接写 50 则是 50fp
fontWeight 字体粗细
取值范围为 [ 100,900 ] , 默认为 400
- 字符串类型, 'bolder'
字体颜色
- Color 类型 Color.Green
- string 类型 rgb(0,128,0) 或者 ' #008000 '
- number 类型 使用 16 进制的数字设置 rgb 格式的颜色, 具体写法为 0x008000
- Resource 类型
切换按钮 Toggle
Toggle( options:{ type: ToggleType, isOn?:boolean } )- ToggleType 枚举类型：
Switch Checkbox Button - isOn 属性用于设置 Toggle 组件的状态
选中状态背景色
- selectedColor()
滑块颜色
- switchPointColor()
onChange()方法 (isOn)=>{}
文本输入 TextInput 组件
- 光标样式 caretColor()
- placeholderFont() 和 placeholderColor() 设置 placeholder 的样式,
Progress 进度条组件
Progress({value:this.value,total:this.total,type:ProgressType.ScaleRing}).style({scaleWidth:1,strokeWidth:10,scaleCount:60})弹窗
消息提示 Toast
- 简短的消息或提示
Button('提示信息').onClick(() => {
promptAction.showToast({
message: '网络连接已断开',
duration: 2000,
bottom: 50
})
})AlertDialog（警告对话框）
- ⽤于向⽤户发出警告或确认操作的提示，确保⽤户在敏感操作前进⾏确认。
Button('删除').backgroundColor(Color.Red)
.onClick(()=>{
AlertDialog.show({
title:'删除该记录?', //弹窗标题
message:'删除后无法恢复, 您确认要删除吗?',//弹窗信息
autoCancel:true,//点击遮罩层时,是否关闭弹窗
alignment:DialogAlignment.Bottom,//弹窗位置
offset:{dx:0,dy:-20},//相对于弹窗位置的偏移量
primaryButton:{//主要按钮, 位于左侧
value:'确认',//按钮内容
fontColor:Color.Red,//字体颜色
action:()=>{//点击回调
console.log('确认删除')
}
},
secondaryButton:{//次要按钮,位于右侧
value:'取消',
action:()=>{
console.log('点击取消')
}
},
cancel:()=>{//点击遮罩层取消时的回调
console.log('closed callbacks')
}
})
})操作列表弹窗
选择器弹窗
自定义弹窗
@Entry
@Component
struct Index {
@State answer: string = '?';
controller: CustomDialogController = new CustomDialogController({
builder: TextInputDialog({
confirm:(value)=>{
this.answer=value;
}
}),
alignment:DialogAlignment.Bottom,
offset:{dx:0,dy:-20}
})
build() {
Column({ space: 50 }) {
Row() {
Text('1+1=')
.fontWeight(FontWeight.Bold)
.fontSize(30)
Text(this.answer)
.fontWeight(FontWeight.Bold)
.fontSize(30)
}
Button('作答')
.onClick(() => {
this.controller.open()
// //弹窗
// TextPickerDialog.show({
// range: ['1', '2', '3', '4'],
// onAccept: (value) => {
// // this.answer=value.value;
// }
// })
})
}.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
}
}
@CustomDialog
struct TextInputDialog {
controller: CustomDialogController = new CustomDialogController({
builder: TextInputDialog()
})
confirm:(value:string)=>void=()=>{}
value:string=''
build() {
Column({space:20}) {
Text('请输入你的答案')
TextInput({ placeholder: '请输入数字' })
.type(InputType.Number)
.onChange((value=>{
this.value=value
}))
Row({space:50}) {
Button('取消')
.onClick(() => {
this.controller.close()
})
Button('确认').onClick(() => {
this.confirm(this.value)
this.controller.close()
})
}
}.padding(20)
}
}
编程技巧
样式复用
- @Extend 方法只能定义在全局,仅限当前文件
- 用于特定类型的组件, 可包含该组件的专有属性方法和专有事件方法
- 支持参数
@Extend(Button) function buttonStyleFunc(color:Color){
.backgroundColor(color)
}UI 结构复用 Builder
- 组件内, 全局 导出在 function 前面加 export
@Builder compButtonBuilder(icon:Resource,text:string,callback:()=>void){ Button(){ Row({space:10}){ Image(icon).width(25).height(25) Text(text).fontColor(Color.White).fontSize(25) } } .width(200) .height(40).onClick(callback) - 若复用的 UI 结构没有状态, 推荐使用@Builder 方法, 否则使用自定义组件
