鸿蒙开发笔记

sniper清影
115 阅读3分钟

编辑器操作

  • 自动导包：鼠标悬浮，点击弹框中的update import或者alt+shift+enter进行快速导包
  • 自动删除未使用的impot：文件右键选择optimize imports来快速清除
  • 全局搜索内容：敲击两次shift
  • 快速调取文档：随便找个函数在弹框右下角点击show in API进行快速查阅
  • 快速抽离代码：选中代码右键重构，选择抽离成方法，自动定义方法并调用

ArkTS

  • 声明：关键字+变量/常量名:类型注释 = 值
let count: number = 0;
count = 40;
const MAX_COUNT:number = 100;
  • 类型:
    • 基本类型:string、number、boolean
let name: string = 'xiaoming';
let age: number = 20;
let isMale: boolean = true;
console.log(name);
//console.log输出需要字符串类型
console.log(age.toString());
console.log(`My nae is ${name},and I am ${age} years old`);
    • 引用类型：Object、Array、自定义类
let students: Array<string> = ['Xiaoming', 'Zhangsan'];
let students: string[] =  ['Xiaoming', 'Zhangsan'];

class User {...}
let user:User = new User();
    • 枚举类型：Enum
enum Color {
    Red,
    Blue,
    Green
}
let favouriteColor: Color = Color.Red;
    • 联合类型：Union
let luckyNum: number | string = 7;
luckyNum = 'seven';
    • 类型别名：Aliases
type Matrix = number[][];
type NullableObject = Object | null;
  • 空安全：有时存在声明变量时不确定初始值。这种情况下通常使用联合类型包含null

let name: string | null = null;

    • 空安全机制的三种方式
1.使用if/else进行判断
if(name != null)
2.使用空值合并表达式,??左边的值为null或者undefined时会返回表达式右边的值
let name: string | null = null;
const res = name ?? '';
3.使用?可选链，如果是null,运算符会返回undefined
let name: string | null = 'aa';
let len = name?.length;

ArkTS支持自动类型推导，没有指定类型时，支持使用类型推断自动选择合适的类型

let meaningOfLife = 42;//会被推测为number类型

  • 函数的声明和使用:
    • function 函数名( 参数列表 ): 返回类型 { 函数体 }
    • 箭头函数/lambda表达式: （参数列表）:返回类型 => { 函数体 }
    • 闭包函数:一个函数可以将另一个函数当作返回值，保留对内部作用域的访问
function outerFunc(): () => string {
    let count = 0l
    return (): string => {
        count++;
        return count.toString()
    }
}
let invoker = outerFunc();
console.log(invoker())
console.log(invoker())
  • 类的声明和使用
    • 类的声明
class Person {
    name: string = 'xiaoming';
    age: number = 20;
    isMale: boolean = true;
}
    • 类的创建
const person = new Person();
console.log(person.name);

const person: Person = { name: 'xiaoming', age: 29, isMale: true};
console.log(person.name);

class Person {
    public name: string = 'xiaoming';
    private _age: number = 20;
    isMale : boolean = true;
    
    constructor(name: string, age: number,isMale: boolean){
        this.name = name;
        this._age = age;
        this.isMale = isMale;
    }
    //私有变量通过getter和setter方法控制，通过person.age实际访问到的就是get方法
    get age(): number {
        return this._age;
    }
    set age(age:number){
        this._age = age;
    }
}
    • 多态和继承
class Emplyee extends Person {
    department: string;
    
    constructor(name: string, age: number, isMale: boolean, department: string){
        super(name, age, isMale);
        this.departmet = department;
    }
    //重写父类方法
    public printInfo(): string {
        //调用父类方法
        super.printInfo();
        console.log(`working in ${this.department}`);
    }
}
  • 接口声明和使用
interface AreaSize {
    width: number;
    height: number;
}
let area: AreaSize = { width: 100, height: 100 };

interface AreaSize {
    width: number;
    height: number;
    
    calculateAreaSize(): number;// 方法的声明
    someMethod(): void;
}

//对应有方法声明的接口，实现需要用implements
class RectangleSize implements AreaSize {
    width: number = 0;
    height: number = 0;
    
    somMethod(): void {
        console.log( 'someMethod called' );
    }
    
    calculateAreaSize(): number {
        return this.width * this.height'
    }
}
  • 模块的导入导出: export和import
  • 声明式UI
//对于需要驱动视图更新的变量，用@State定义
@State isComplete: Boolean = false;

Row() {
    if(this.isComplete) {
        Image($r('app.media.ic_ok'))
    } else {
        Image($r('app.media.ic_default'))
    }
    Text('学习ArkTS')
}
.onClick( () => {
    this.isComplete = !this.isComplete;
})
    • 自定义组件的声明
@Component   //定义为一个组件部分
struct ToDoItem {
    private content ?: string;
    ...
    build() {
    //build函数内部进行相应的声明式UI描述
        Row() {
            Image($r('app.media.ic_default'))
            ...
            Text(this.content)
        }
        .borderRadius(24)
    }
}

@Entry
@Component
struct ToDoListPage {
    ...
    build() {
        Column() {
            Text('待办')
            ...
            TodoItem({ content : '学习arkTS' })
        }
    }
}
    • 组件的生命周期
// Index.ets
import { router } from '@kit.ArkUI';

@Entry
@Component
struct MyComponent {
  @State showChild: boolean = true;
  @State btnColor:string = "#FF007DFF"

  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageShow() {
    console.info('Index onPageShow');
  }
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageHide() {
    console.info('Index onPageHide');
  }

  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onBackPress() {
    console.info('Index onBackPress');
    this.btnColor ="#FFEE0606"
    return true // 返回true表示页面自己处理返回逻辑，不进行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理
  }

  // 组件生命周期
  aboutToAppear() {
    console.info('MyComponent aboutToAppear');
  }

  // 组件生命周期
  onDidBuild() {
    console.info('MyComponent onDidBuild');
  }

  // 组件生命周期
  aboutToDisappear() {
    console.info('MyComponent aboutToDisappear');
  }

  build() {
    Column() {
      // this.showChild为true，创建Child子组件，执行Child aboutToAppear
      if (this.showChild) {
        Child()
      }
      // this.showChild为false，删除Child子组件，执行Child aboutToDisappear
      Button('delete Child')
      .margin(20)
      .backgroundColor(this.btnColor)
      .onClick(() => {
        this.showChild = false;
      })
      // push到page页面，执行onPageHide
      Button('push to next page')
        .onClick(() => {
          router.pushUrl({ url: 'pages/page' });
        })
    }

  }
}

@Component
struct Child {
  @State title: string = 'Hello World';
  // 组件生命周期
  aboutToDisappear() {
    console.info('[lifeCycle] Child aboutToDisappear')
  }

  // 组件生命周期
  onDidBuild() {
    console.info('[lifeCycle] Child onDidBuild');
  }

  // 组件生命周期
  aboutToAppear() {
    console.info('[lifeCycle] Child aboutToAppear')
  }

  build() {
    Text(this.title)
      .fontSize(50)
      .margin(20)
      .onClick(() => {
        this.title = 'Hello ArkUI';
      })
  }
}
avatar
文章
阅读
粉丝