1、下載與安裝DevEco Studio并運行hello world[^xr1]:1
環(huán)境搭建完成后,大家最為關心的就是這個環(huán)境是否都正確配置好了呢?為了您開發(fā)應用/服務的良好體驗,DevEco Studio提供了開發(fā)環(huán)境診斷的功能,幫助您識別開發(fā)環(huán)境是否完備。您可以在歡迎界面單擊Help > Diagnose Development Environment進行診斷。如果您已經打開了工程開發(fā)界面,也可以在菜單欄單擊Help > Diagnostic Tools > Diagnose Development Environment進行診斷。

環(huán)境檢查
如果檢查結果都是√,表示環(huán)境搭建正常,如下圖所示:

檢查結果
2、TypeScript快速入門
-
布爾值
TypeScript中可以使用boolean來表示這個變量是布爾值,可以賦值為true或者false。
let isDone: boolean = false;
-
數(shù)字
TypeScript里的所有數(shù)字都是浮點數(shù),這些浮點數(shù)的類型是 number。除了支持十進制,還支持二進制、八進制、十六進制。
let decLiteral: number = 2023;
let binaryLiteral: number = 0b11111100111;
let octalLiteral: number = 0o3747;
let hexLiteral: number = 0x7e7;
-
字符串
TypeScript里使用 string表示文本數(shù)據(jù)類型, 可以使用雙引號( ")或單引號(')表示字符串。
let name: string = "Jacky";
name = "Tom";
name = 'Mick';
-
數(shù)組
TypeScrip有兩種方式可以定義數(shù)組。 第一種,可以在元素類型后面接上 [],表示由此類型元素組成的一個數(shù)組。
let list: number[] = [1, 2, 3];
- 第二種方式是使用數(shù)組泛型,Array<元素類型>。
let list: Array<number> = [1, 2, 3];
此外還有元組、枚舉、Unknown、等請查看官方文檔
3、ArkTS的起源和演進、案例:ArkTS基礎知識、ArkTS開發(fā)實踐、案例:待辦列表
-
ArkUI完整的開發(fā)范式可參考這里:
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/arkui-overview-0000001281480754

ArkTS聲明式開發(fā)范式
4、應用程序入口—UIAbility的使用(相當于Android的Application)以及使用router.pushUrl()實現(xiàn)頁面跳轉
- 傳輸數(shù)據(jù)
router.pushUrl({
url: 'pages/Second',
params: {
src: 'Index頁面?zhèn)鱽淼臄?shù)據(jù)',
}
}, router.RouterMode.Single)
- 接收數(shù)據(jù)
@Entry
@Component
struct Second {
@State src: string = (router.getParams() as Record<string, string>)['src'];
// 頁面刷新展示
// ...
}
- 返回上一個頁面
router.back();
- 返回指定頁面
router.back({ url: 'pages/Index' });
5、基礎組件的使用、容器組件的使用、構建列表頁面、Tabs組件的使用
Button組件可以包含子組件,讓您可以開發(fā)出更豐富多樣的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代表資源命名,由開發(fā)者定義資源時確定。
6、管理組件狀態(tài)、Video組件的使用、應用彈窗
@State修飾的變量,更改其值時,ui會發(fā)生改變
@LInk和@State配合,實現(xiàn)點擊這個控件操作另一個控件
@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,
}
}
- 發(fā)起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、保存應用數(shù)據(jù)

首選項和關系型數(shù)據(jù)庫的卻別
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}`);
}
}
//保存數(shù)據(jù)
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();
}
//讀取數(shù)據(jù)
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網站開源社區(qū)獲取
在Gitee中,搜索OpenHarmony-TPC倉庫,在tpc_resource中對三方庫進行了資源匯總,可以供開發(fā)者參考。 - 通過OpenHarmony三方庫中心倉獲取
進入OpenHarmony三方庫中心倉,根據(jù)類型或者直接搜索尋找需要的三方庫。
10、使用DevEco Studio高效開發(fā)
編譯器的進一步使用方法和項目遷移方法