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高效开发
编译器的进一步使用方法和项目迁移方法
网友评论