v001-HarmonyOS基础知识

2024-06-11 本文已影响0人刘坤林

1、下载与安装DevEco Studio并运行hello world[^xr1]:1

环境搭建完成后，大家最为关心的就是这个环境是否都正确配置好了呢？为了您开发应用/服务的良好体验，DevEco Studio提供了开发环境诊断的功能，帮助您识别开发环境是否完备。您可以在欢迎界面单击Help > Diagnose Development Environment进行诊断。如果您已经打开了工程开发界面，也可以在菜单栏单击Help > Diagnostic Tools > Diagnose Development Environment进行诊断。

环境检查

如果检查结果都是√，表示环境搭建正常，如下图所示：

检查结果

2、TypeScript快速入门

布尔值
TypeScript中可以使用boolean来表示这个变量是布尔值，可以赋值为true或者false。

let isDone: boolean = false;

数字
TypeScript里的所有数字都是浮点数，这些浮点数的类型是 number。除了支持十进制，还支持二进制、八进制、十六进制。

let decLiteral: number = 2023;
let binaryLiteral: number = 0b11111100111;
let octalLiteral: number = 0o3747;
let hexLiteral: number = 0x7e7;

字符串
TypeScript里使用 string表示文本数据类型，可以使用双引号（ "）或单引号（'）表示字符串。

let name: string = "Jacky";
name = "Tom";
name = 'Mick';

数组
TypeScrip有两种方式可以定义数组。第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组。

let list: number[] = [1, 2, 3];

第二种方式是使用数组泛型，Array<元素类型>。

let list: Array<number> = [1, 2, 3];

此外还有元组、枚举、Unknown、等请查看官方文档

3、ArkTS的起源和演进、案例：ArkTS基础知识、ArkTS开发实践、案例：待办列表

ArkUI完整的开发范式可参考这里：
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/arkui-overview-0000001281480754

ArkTS声明式开发范式

4、应用程序入口—UIAbility的使用（相当于Android的Application）以及使用router.pushUrl()实现页面跳转

传输数据

router.pushUrl({
  url: 'pages/Second',
  params: {
    src: 'Index页面传来的数据',
  }
}, router.RouterMode.Single)

接收数据

@Entry
@Component
struct Second {
  @State src: string = (router.getParams() as Record<string, string>)['src'];
  // 页面刷新展示
  // ...
}

返回上一个页面

router.back();

返回指定页面

router.back({ url: 'pages/Index' });

5、基础组件的使用、容器组件的使用、构建列表页面、Tabs组件的使用

Button组件可以包含子组件，让您可以开发出更丰富多样的Button，下面的示例代码中Button组件包含了一个Image组件：

Button({ type: ButtonType.Circle, stateEffect: true }) {
  Image($r('app.media.icon_delete'))
    .width(30)
    .height(30)
}
.width(55)
.height(55)
.backgroundColor(0x317aff)

效果如图

子组件

资源取值
app代表应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”；name代表资源命名，由开发者定义资源时确定。

6、管理组件状态、Video组件的使用、应用弹窗

@State修饰的变量，更改其值时，ui会发生改变
@LInk和@State配合，实现点击这个控件操作另一个控件
@Entry 页面默认入口，一个页面有且仅有一个@Entry装饰的组件

7、动画

8、web组件的使用、http网络请求

在进行网络请求前，您需要在module.json5文件中申明网络访问权限。

{
    "module" : {
        "requestPermissions":[
           {
             "name": "ohos.permission.INTERNET"
           }
        ]
    }
}

声明实体类

interface UserInfo {
  code: number,
  message: string,
  data: {
    id: number,
    name: string,
  }
}

发起get请求

  test(): void {
    axios.get('http://www.wxylkl.cn/api/sysuser/info')
      .then((response: AxiosResponse<UserInfo>) => {
        this.message = JSON.stringify(response.data);
      })
      .catch((error) => {
        this.message = JSON.stringify(error);
      })
  }

8、保存应用数据

首选项和关系型数据库的却别

import dataPreferences from '@ohos.data.preferences';
import promptAction from '@ohos.promptAction';

let context = getContext(this);
let preference: dataPreferences.Preferences;
let preferenceTemp: dataPreferences.Preferences;

class ShareUtils {
  LuckDataBase = 'MyDataBase';
  KEY_TOKEN = "KEY_TOKEN";
  //获取首选项实例
  async getPreferencesFromStorage() {
    try {
      preference = await dataPreferences.getPreferences(getContext(), this.LuckDataBase);
    } catch (err) {
      console.error(`Failed to get preferences, Cause: ${err}`);
    }
  }
  //保存数据
  async save(key: string, value: string) {
    if (!preference) {
      await this.getPreferencesFromStorage();
    }
    try {
      await preference.put(key, value);
    } catch (err) {
      console.error(`Failed to put value, Cause: ${err}`);
    }
    await preference.flush();
  }
  //读取数据
  async getValue(key: string) {
    if (!preference) {
      await this.getPreferencesFromStorage();
    }
    try {
      return preference.get(key, '');
    } catch (err) {
      console.error(`Failed to get value, Cause: ${err}`);
      return null;
    }
  }
  //吐司方法
  toast(message: Resource | string) {
    promptAction.showToast({
      message: message,
      duration: 1500
    });
  };
}
export default new ShareUtils();

使用方法

ShareUtils.getValue(ShareUtils.KEY_TOKEN)

9、第三方库

目前提供了两种途径获取开源三方库：

通过访问Gitee网站开源社区获取
在Gitee中，搜索OpenHarmony-TPC仓库，在tpc_resource中对三方库进行了资源汇总，可以供开发者参考。
通过OpenHarmony三方库中心仓获取
进入OpenHarmony三方库中心仓，根据类型或者直接搜索寻找需要的三方库。

10、使用DevEco Studio高效开发

编译器的进一步使用方法和项目迁移方法