HarmonyOS原子化服務(wù)開發(fā)快速入門教程（上）

原創(chuàng)蛟龍騰飛收納專欄 :Harmonyos 28 分鐘前 2

學(xué)習說明

1.開發(fā)者具備JS與前端開發(fā)語言入門級及以上基礎(chǔ)。

2.已經(jīng)安裝好DevEco Studio。本案例用的DevEco Studio 3.0.0.800，API4-7都可以體驗。

3.開發(fā)者已經(jīng)注冊與實名認證華為開發(fā)者聯(lián)盟賬戶。

4.Empty Ability工程模板， JavaScript語言開發(fā)，支持低代碼開發(fā)，用于Phone、TV、Tablet、Wearable設(shè)備的Feature Ability模板，展示了基礎(chǔ)的Hello World功能。

5.Immersive Data（沉浸式數(shù)據(jù)模板）服務(wù)卡片模板，支持設(shè)備Phone/Tablet/Wearable，JavaScript語言開發(fā)，此類型卡片是在沉浸式圖片上呈現(xiàn)數(shù)據(jù)信息，可以使用不同的圖標搭配信息進行呈現(xiàn)，強調(diào)使用場景與數(shù)據(jù)之間的關(guān)系，開發(fā)者可以發(fā)揮圖文搭配的優(yōu)勢，創(chuàng)造出獨特風格的卡片樣式。

6.課件里提供了本案例單獨說明文檔與代碼包，可以直接引用體驗。

目錄：

• 創(chuàng)建項目
• 創(chuàng)建卡片
• 修改代碼
• 運行效果
• 多設(shè)備效果顯示
• 學(xué)習說明

一、創(chuàng)建項目

1. 創(chuàng)建工程項目

打開DevEco Studio選擇你的Ability 模板，這里我們選擇Empty Ability模板，然后點擊Next進行下一步。如圖1所示。

圖1

２．配置工程項目

配置的項目工程，如圖2和圖3所示，然后單擊Finish創(chuàng)建。

圖2

圖3

二、創(chuàng)建卡片

1. 找到entry中src->main下的js文件，右擊選擇new中的Service Widget選項，如圖4所示。

圖4

選擇immersive Data卡片模板，如圖5所示，點擊Next進行下一步。

圖5

配置卡片模板信息，如圖6，然后點擊Finish創(chuàng)建。

圖6

審核編輯：符乾江