一 ArkTS
1.1 声明(变量类型必须写,初始化必须写,末尾必须加分号)
let 是可变,const 是不可变,该常量只能被赋值一次。
const hello: string = 'hello';
let num:number = 1
// 不允许使用val
var age:number = 1;
// 以下三个不能用
// let num3:undefined
// let num4:null
// let num5:any
1.2 类型
1.2.1 string
可以使用单引号或者双引号表示,string拼接不能用+(可以用但不推荐),只能用反单引号(只有11以上才能用)
let a:string = 'Success';
let a1:string = "dddd"
let s3:string = `The result is ${a}`;
1.2.2 联合类型
union类型,即联合类型,是由多个类型组合成的引用类型。联合类型包含了变量可能的所有类型。
declare type ResourceStr = string | number;
基础类型
typeof str == 'string'
obj使用 instanceof
dog instanceof Dog
1.3 数组
let names: string[] = [‘Jack’, ‘Rose’]
遍历优先使用 forEach
//定义数组
let names: string[] = ['Jack', 'Rose']
names.forEach((value: string, index: number, array: string[]) => {
})
for (let i = 0; i < names.length; i++) {
console.log(i + ':' + names[i])
}
//for of 迭代器,直接得到元素
for (let name of names) {
}
//禁止使用 for in 迭代器,
for (let i in names) {
console.log(i + ':' + names[i])
}
1.2 方法
function 方法名:返回类型,返回类型void也最好写上,参数的类型也必须写
// 无参数
function add():void
// 有参数
function add(name:string):void{
}
// 可选参数,可以用undefined
function add(name:string,age?:number):void{
// 虽然不推荐使用 undefined 或者是 null,但是可以判断是否初始化
if(age == null)
if(age == undefined)
// 如果a没有给值,那么就用0 ,
let ageTwo = age?age:0
}
//默认参数(默认参数不可以和可选参数共同使用)
function add(name:string,age:number = 0):void{
}
// api 11 不允许
let funB = function (a: number, b: number) {
}
// 可以变长参数
function add(...numbers: number[]){
let result: number = 0;
for (let i = 0; i < numbers.length; i++) {
result = result + numbers[i]
}
// 循环
numbers.forEach((value, index, arr) => {
log(value + '--' + index + '---' + arr)
})
// for of 也可以用
for (let n of numbers) {
log(n + "")
}
return result;
}
1.4 箭头函数
相当于java中的lamalda表达式
type Handler = (s: string, no: number) => string;
(event: ClickEvent) => void//这个就是箭头函数
onClick(event: (event: ClickEvent) => void): T;
1.5 条件语句
1.5.1 if else
条件表达式可以是任何类型。但是对于boolean以外的类型,会进行隐式类型转换:是否!=null
if (condition1) {
// 语句1
} else if (condition2) {
// 语句2
} else {
// else语句
}
let s1 = 'Hello';
if (s1) {
console.log(s1); // 打印“Hello”
}
1.5.2 switch
let s1 = 'Hello';
switch (s1) {
case "label1": // 如果label1匹配,则执行
break; // 可省略
case "label2":
case "label3": // 如果label2或label3匹配,则执行
break; // 可省略
default:
}
1.5 三元表达式
condition ? expression1 : expression2
let s: string = '1';
let newS: string = s ? s : ""
let newS2: string = 1>0 ? '大于0' : "小于0"
1.6 错误处理
throw 语句用于抛出异常或错误,try catch
getName() : string {
throw new Error('this error')
return '';
}
try {
// 可能发生异常的语句块
} catch (e) {
// 异常处理
}
1.7 枚举
enum Color {
// 一般也不会写 后面的值
Red = 0xFF0000,
Green = 0xFFFF00,
Blue = 0xFFFFFF,
// 禁止用不同的类型
// Black = "0xFFFFFF",
}
1.8 类
类的属性不用let,方法不用加 function,
也是单继承,多实现,
修饰符号有public protect private,默认就是public。
类中使用属性和方法时,必须使用this.,否则找不到,访问父类属性和方法只能super.
静态方法静态属性,必须使用Class去拿,否则拿不到,
如果类或者接口只有属性,初始化的时候可以使用{}
继承属性不可以重写,方法不可以加(override) 直接写方法即可
class Person {
name: string = '';
age: number = '';
private _address:string = '';
constructor (name: string, age: number,address:string) {
this.name = n;
this.age = age;
this._address = address;
}
// get 方法
get address(): number {
// 必须使用this,否则找不到
return this._address;
}
// set 方法
set address(x: number) {
if (x < 0) {
throw Error('Invalid age argument')
}
this._address = x
}
setName(){
}
}
class Student extends Person{
// 重写setName方法 不用override
setName(){
}
}
// 如果
let person = {'小明',18,‘北京’}
1.9 接口
接口属性,不能赋值
interface Animal{
name:string;
eat():void
}
class Dog implements Animal{
name: string = "狗";
eat() {
}
}
2.0 泛型
类,接口,方法
// 类
class Stack<T>{
push(t:T){
}
pop():T{
}
}
// 函数
function last<T>(x: T[]): T {
return x[x.length - 1];
}
// 默认泛型
class DefalulType {}
interface Interface <T = DefalulType> { }
// extends
interface Interface <T extends DefalulType> { }
2.1 导入导出
变量、函数、类 在别的模块使用都需要导出或者是导入
#aaaa.ets
export class Cat{
name:string = '';
}
export function name() {
}
import { Cat , name } from '../entryability/aaaa';
let cat:Cat = {name:'小猫'}
name()
二 UI组件
2.1 Text
Text("大哥好大哥大哥大哥大哥大哥大哥")
.fontSize(50)//
// .fontWeight(FontWeight.Bold) 粗细
.fontWeight(10)// 粗细
.borderColor('red')//边框颜色
.fontColor('red')// 文本颜色
.borderWidth(2)// 边框宽度
//需配合maxFontSize以及maxline或布局大小限制使用,单独设置不生效,对子组件不生效。自适应字号生效时,fontSize设置不生效。
.maxFontSize(30)
.minFontSize(10)
.decoration({ type: TextDecorationType.LineThrough })// 控制线
.maxLines(1)// 最大行数
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 截取样式
.width('100%')
2.2 Button
// 字 // 按钮样式 默认胶囊样子,按下是否有按压态
Button('OK', {
// type: ButtonType.Circle,// 圆形
type: ButtonType.Normal,// 长方形
// type: ButtonType.Capsule,// 长方形
stateEffect: true// 是否有按压态,默认是
})
.borderRadius(8)
//.type()//也可以设置
//.stateEffect()是否有按压态
//.buttonStyle(ButtonStyleMode.NORMAL) 背景 api 11
//.controlSize(ControlSize.NORMAL) 按钮大小,稍微影响点大小 api11
// .labelStyle({'你好'}) 设置lable样式
.backgroundColor(0xffff0000)
.width(90)
.onClick(() => {
console.log('ButtonType.Normal')
})
2.3 Image
Image('https://pic4.zhimg.com/80/v2-5395048fe653a5f0fbd37b47b9713fd7_1440w.webp')
.alt($r('app.media.startIcon'))// 占位符
.objectFit(ImageFit.Fill)// 图片填充模式
.interpolation(ImageInterpolation.High)// 图片不清晰的时候可以用这个,但是耗费时间和性能
.onError((event) => { // 错误回调
console.log(`load image fail ${event.componentWidth} ${event.componentHeight}`)
})
.onComplete((event: {
width: number;// 图片大小
height: number;// 图片大小
componentWidth: number;//组件大小
componentHeight: number;//组件大小
loadingStatus: number// 返回的状态值为0时,表示图片数据加载成功。返回的状态值为1时,表示图片解码成功。
}) => {
// 所以这里会走两次,网络成功,解码成功
console.log(`load image succed ${JSON.stringify(event)}`)
})
.width(100)
.height(100)
TextInput 单行输入框 和 多行TextArea
text 就是输入框的文字,建议强绑定,和onChange
//placeholder 提示hint,text 就是输入框的文字,建议强绑定
TextInput({ placeholder: 'hint', text: this.text, controller: this.controller })
.placeholderColor(Color.Red)// hint 的颜色
.placeholderFont()// hint font
.fontSize(20)// 字体大小
.fontColor(Color.Black)// 字体颜色
// .caretColor(Color.Green)// 光标颜色
// .maxLength(10)// 最大长度
.textAlign(TextAlign.Center)// 文字对其方式
.inputFilter('[a-z]', (e) => {
// 输入错误的是什么
console.log(JSON.stringify(e))
})// 可以输入的正则表达式 ,从API version 11开始,设置inputFilter会导致设置输入框类型(即type接口)附带的文本过滤效果失效。
.onChange((value: string) => {
//建议强绑定
this.text = value
})
.onEditChange((isEditing: boolean)=>{
// 是否正在输入
})
.width(200)
.caretStyle({ width: 2, color: Color.Red })//api10 光标风格
// .caretPosition(2)//api 10 设置光标位置
// .showUnit(() => { //api10 需搭配showUnderline使用,当showUnderline为true时生效
//
// })
.showError('错了')// api10 设置错误状态下提示的错误文本或者不显示错误状态。默认不显示错误状态。
// .showUnderline(true)//api10 设置是否开启下划线模式,就不会有框框了
//.passwordIcon()//api10 密码输入模式时,设置输入框末尾的图标。
// .enableKeyboardOnFocus(false)
.selectionMenuHidden(true) // api10 设置长按输入框或者右键输入框时,是否弹出文本选择菜单。默认是false,弹出
// .maxLines(3)
//.showCounter 显示个数
// .customKeyboard()// api10 自定义键盘,如果设置了,点击就不会弹出系统键盘
2.4 Blank
填充父布局,如果父布局,不生效,但是可以使用minWidth控制
Row() {
Text('Bluetooth').fontSize(18)
Blank('160')// 因为有父有width,所以会都是他的160
Toggle({ type: ToggleType.Switch }).margin({ top: 14, bottom: 14, left: 6, right: 6 })
}
.width('100%')
.backgroundColor(0xFFFFFF)
.borderRadius(15)
.padding({ left: 12 })
2.5 Checkbox
// 不用写在一起,可以放进去,也可以不放
CheckboxGroup({ group: "sex" })
.onChange((event) => {
console.log(`CheckboxGroup onChange ${JSON.stringify(event)}`)
})
Checkbox({ name: 'male', group: "sex" })
.select(false)
.onChange((value)=>{
console.log(`Checkbox onChange ${JSON.stringify(value)}`)
})
.selectedColor('#ff9999') // 选中的颜色 整体,
.unselectedColor('#ff0000')// 未选中边框 api 10
.shape(CheckBoxShape.ROUNDED_SQUARE)// 正方形或者圆形,api11
.mark({ strokeColor: 'red', size: 20, strokeWidth: 20 })// 选中里面对号的样式 api 11
Checkbox({ name: 'female', group: "sex" })
2.6 Divider
分割线
Divider()
.strokeWidth(8)//宽度,优先级低于heigh 或者 width
.color(Color.Red)// 分割线颜色
.vertical(false)// 是否是垂直,默认是水平
.lineCap(LineCapStyle.Square) // 末尾是圆角还是直角,Square 感觉本身稍微超出去了点
.margin({ left: 20, right: 20 })
.borderWidth(2)
2.7 ImageAnimator
提供帧动画组件来实现逐帧播放图片的能力,可以配置需要播放的图片列表,每张图片可以配置时长。
完成之后 需要设置为 stop,否则下次设置成running的时候不会再执行,onFinish有可能执行多次,比如变成stop,然后变成Initial,再变成stop
ImageAnimator()
.images([
{
src: $r('app.media.img1')
},
{
src: $r('app.media.img2')
},
{
src: $r('app.media.img3')
}
])
.duration(1000)// 运行时间默认1s
//默认为初始状态,用于控制播放状态。
// 默认值:AnimationStatus.Initial
// AnimationStatus.Running 开始播放
// AnimationStatus.Paused 暂停
// AnimationStatus.Stopped 停止
.state(this.state)// 播放完毕停留在哪一帧
// FillMode.Forwards 默认就是最后一帧 相当于停留在最后一帧
// FillMode.None :相当于停留在第一帧
// FillMode.Backwards 相当于停留在第一帧
// .fillMode(FillMode.Both)
.iterations(2)// 循环次数 -1 无限循环 默认是1次
.width(40)
.height(40)
.margin({ top: 100 })
.onStart(() => {
console.info('Start')
})
.onPause(() => {
console.info('Pause')
})
.onRepeat(() => {
console.info('Repeat')
})
.onCancel(() => {
// 当设置为 AnimationStatus.Initial 触发
console.info('Cancel')
})
.onFinish(() => {
console.info('Finish')
// 完成之后 需要设置为 stop,否则下此设置成running的时候不会再执行
this.state = AnimationStatus.Stopped
})
2.8 DatePicker
日期选择器,回调并不是选中之后,而是一直再变,回调多次,并不是最后一次,api 10 加了很多定制样式
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected:new Date(Date.now())
})
// 最上面和最下面的文本样式 api10
.disappearTextStyle({color: Color.Gray, font: {size: '16', weight: FontWeight.Bold}})
// 除了最上面和最下面和选中的,其他样式 api10
.textStyle({color: '#ff182431', font: {size: '18', weight: FontWeight.Normal}})
// 选中的样式 api10
.selectedTextStyle({color: '#ff0000FF', font: {size: '26', weight: FontWeight.Regular}})
// 日期是否显示农历。 默认不是
.lunar(this.isLunar)
// api 10
.onDateChange((value: Date) => {
this.selectedDate = value
console.info('select current date is: ' + value.toString())
})
// api 8 ,10 已经废弃
.onChange((result:DatePickerResult)=>{
})
TextClock
将当前系统时间显示在设备上
typescript复制代码TextClock({controller: this.controller })
.format('yyyy/MM/dd aa hh:mm:ss.SSS')
.onDateChange((value: number) => {
this.accumulateTime = value
})
.onDateChange((value:number)=>{
console.log(`----${value}`)
})
.margin(20)
.fontSize(30)
TextPicker
滚动选择器,三级联动
// range也可以是TextCascadePickerRangeContent 多级联动
TextPicker({ range: ["北京", "上海", "深圳", "广州", "天津","成都","杭州"], selected: 0})
.onChange((value: string, index: number) => {
console.info('选择的 value: ' + value + ', index: ' + index)
})
.defaultPickerItemHeight(50)//设置Picker各选择项的高度。
.disappearTextStyle({ color: Color.Red, font: { size: 15, weight: FontWeight.Lighter } })//api 10
.textStyle({ color: Color.Black, font: { size: 20, weight: FontWeight.Normal } })//api 10
.selectedTextStyle({ color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } })//api 10
.selectedIndex(2)//api 10 设置默认选中项在数组中的索引值,优先级高于options中的选中值。
.canLoop(true) // api 10 是否可以循环
TextTimer
计时器
// isCountDown是否倒计时 ,默认false
// count 倒计时时间毫秒 10_000,就是倒计时10s
// controller 控制倒计时状态
TextTimer({ isCountDown: true, count: 30_000, controller: this.textTimerController })
.format(this.format)
.fontColor(Color.Black)
.fontSize(50)
.onTimer((utc: number, elapsedTime: number) => {
console.info('textTimer notCountDown utc is:' + utc + ', elapsedTime: ' + elapsedTime)
})
TimePicker
时间选择器,可以设置12小时 24 小时制,显示到秒
TimePicker({
// 默认当前时间
selected: this.selectedTime,
format:TimePickerFormat.HOUR_MINUTE_SECOND
})
// 是否24小时展示,默认12小时
.useMilitaryTime(this.isMilitaryTime)
.onChange((value: TimePickerResult) => {
if (value.hour) {
this.selectedTime.setHours(value.hour, value.minute,value.second)
console.info('select current date is: ' + JSON.stringify(value))
}
})
// api 10
.disappearTextStyle({ color: Color.Red, font: { size: 15, weight: FontWeight.Lighter } })
.textStyle({ color: Color.Black, font: { size: 20, weight: FontWeight.Normal } })
.selectedTextStyle({ color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } })
.loop(false)// 是否循环,api11
LoadingProgress
用于显示加载动效的组件。暂时没有看到定制
enableLoading api10 ,无论显隐,都会占位。 跟 Visibility.Hidden(不占位) 不一样
LoadingProgress()
// loading的颜色
.color(Color.Black)
// 是否展示,默认true api10 跟 Visibility.Visible
.enableLoading(true)
.width(50)
.height(50)
.borderColor(Color.Red)
.borderWidth(2)
.borderRadius(5)
Menu 和 MenuItem
从api 10。menu和menuItem 都有 fontColor 和 font属性
@Builder
MyMenu() {
Menu() {
MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项", endIcon: $r('app.media.img4') })
.selected(!this.select)
MenuItem({ content: "菜单选项2" ,startIcon:$r('app.media.img2')})
// .selectIcon(true)// 选中icon ✅
.selected(this.select)
.onChange((selected) => {
console.info("menuItem select" + selected);
})
// 颜色 api 10
.contentFontColor(Color.Black)
// 样式 api 10
.contentFont({weight:FontWeight.Bold})
}
// 设置文本颜色 api 10
.fontColor('#FFFF0000')
// 设置文本样式 api 10
.font({ size: 20, weight: 609 })
// 设置圆角 api 10
// .radius(50)
// 设置宽度,最下是64 api 10
// .width(200)
}
Progress
进度条组件,用于显示内容加载或操作处理等进度。只有圆形进度条(type: ProgressType.Ring)才有status: ProgressStatus.LOADING(api10 加载中,一只转圈圈)
Progress({ value: 10,// 当前进度
// 形状 type: ProgressType.Ring//圆形
// 形状 type: ProgressType.Linear//直角型
// 其他太多了不看了
type: ProgressType.Ring,
total: 100 })// 总进度 默认100
.width(200)
// 圆形设置了 status, value就不管用了
.style({ strokeWidth: 20, status: ProgressStatus.LOADING })
Toggle
组件提供勾选框样式、状态按钮样式及开关样式。android中 Switch,不能设置非选中的颜色
//type 可以设置 Switch button checkbox ,没啥意思,但是必须设置
Toggle({ type: ToggleType.Switch, isOn: false })
// 选择之后的颜色
.selectedColor('#007DFF')
// 小圆圈的颜色
.switchPointColor(Color.Red)
.onChange((isOn: boolean) => {
console.info('Component status:' + isOn)
})
QRCode
用于显示单个二维码的组件。
QRCode('二维码内容')
.color(0xF7CE00)// 二维码颜色,默认是黑色
.width(140).height(140)
.contentOpacity(0.5)// 二维码的透明度,api11 ,感觉没啥用
Radio
只有radio ,没有RadioGroup
group 名字相同证明是同一组
radioStyle,api10,设置选中的颜色,选中里面白点的颜色,不选中的边框颜色
Radio({ value: 'Radio3', group: 'radioGroup' })
.checked(false)
.radioStyle({
// 设置选中的颜色
checkedBackgroundColor: Color.Pink,
// 不选中的边框颜色
uncheckedBorderColor: Color.Red,
// 选中里面白点的颜色
indicatorColor: Color.Black
})
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
console.log('Radio3 status is ' + isChecked)
})
Radio({ value: 'Radio1', group: 'radioGroup' })
.checked(true)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
console.log('Radio1 status is ' + isChecked)
})
Radio({ value: 'Radio2', group: 'radioGroup' })
.checked(false)
.height(20)
.width(20)
.onChange((isChecked: boolean) => {
console.log('Radio2 status is ' + isChecked)
})
Rating
提供在给定范围内选择评分的组件。
Rating({
rating: this.rating,
// 是否可以点击,默认false 可以点击
indicator: false })
.stars(5)// 总分数
.stepSize(0.5)// step 默认0.5
.starStyle({
// common目录与pages同级,但是没出来效果
backgroundUri: '../common/img3.png',
foregroundUri: '../common/img1.png',
secondaryUri: '../common/img2.png' })
.onChange((value: number) => {
// this.rating = value
})
RichEditor
支持图文混排和文本交互式编辑的组件。
RichText
富文本组件,解析并显示HTML格式文本。 只是加载h5 片段的组件
有onStart 和 onComplete 回调
RichText(this.data)
.onStart(() => {
console.info('RichText onStart');
})
.onComplete(() => {
console.info('RichText onComplete');
})
Select
android中Spinner
提供下拉选择菜单 ,可以让用户在多个选项之间选择
Slider
android中 Slider
滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。
写在最后
有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术?也不知道鸿蒙开发的知识点重点掌握的又有哪些?自学时频繁踩坑,导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙(HarmonyOS NEXT)全栈开发资料用来跟着学习是非常有必要的。