1、HarmonyOS原子化服務開發快速入門教程 蛟龍騰飛 HarmonyOS原子化服務開發快速入門教程 學習說明1.開發者具備JS與前端開發語言入門級及以上基礎。2.已經安裝好DevEco Studio。本案例用的DevEco Studio 00，API4-7都可以體驗。3.開發者已經注冊與實名認證華為開發者聯盟賬戶。4.Empty Ability工程模板， JavaScript語言開發，支持低代碼開發，用于Phone、TV、Tablet、Wearable設備的Feature Ability模板，展示了基礎的Hello World功能。5.Immersive Data（沉浸式數據模板）服務卡片模

2、板，支持設備Phone/Tablet/Wearable，JavaScript語言開發，此類型卡片是在沉浸式圖片上呈現數據信息，可以使用不同的圖標搭配信息進行呈現，強調使用場景與數據之間的關系，開發者可以發揮圖文搭配的優勢，創造出獨特風格的卡片樣式。6.課件里提供了本案例單獨說明文檔與代碼包，可以直接引用體驗。目錄：創建項目創建卡片修改代碼運行效果五.多設備效果顯示六學習說明一、創建項目創建工程項目打開DevEco Studio選擇你的Ability 模板，這里我們選擇Empty Ability模板，然后點擊Next進行下一步。如圖1所示。圖1配置工程項目配置的項目工程，如圖2和圖3所示，然后單

3、擊Finish創建。圖2圖3二、創建卡片找到entry中src-main下的js文件，右擊選擇new中的Service Widget選項，如圖4所示。圖4選擇immersive Data卡片模板，如圖5所示，點擊Next進行下一步。圖5配置卡片模板信息，如圖6，然后點擊Finish創建。圖6三、修改代碼查看js下剛剛創建的卡片，如圖7。如圖7打開該文件下的index.hml文件，修改代碼。 $t(strings.title_big) $t(strings.title_small) $t(strings.text) $t(strings.text1) $t(strings.text2) $t(s

4、trings.text3) $t(strings.text4) 打開該文件下的index.css文件，修改代碼（找到對應修改部分）。.container flex-direction: column; justify-content: space-between; align-items: flex-start;/*注釋代碼*/* background-color: dodgerblue;*/* background-image: url(/common/ic_default_image3x.png);*/* background-repeat: no-repeat;*/* backgroun

5、d-size: cover;*/*添加.right-img樣式*/.right-img width: 40px; height: 40px; position: absolute; right: 10px; top: 10px; border-radius: 12px;/*將.title_big中的font-size: 19px;改為16px*/.title_big font-size: 16px; font-weight: bold; color: white;/*適配wearable*/media (device-type: wearable) .right-img display: no

6、ne; 打開該文件下的i18n文件，打開.json文件，修改代碼。zh_CN.json: strings: title_big: 標題, title_small: 這里是副標題, text: 文本, text1: 文本1, text2: 文本2, text3: 文本3, text4: 文本4 en_US.json: strings: title_big: Title, title_small: Text, text: Text, text1: Text1, text2: Text2, text3: Text3, text4: Text4 打開js下的default文件，打開pages文件，點擊

7、index.hml.如圖8所示。圖8修改代碼：index.hml 你好，歡迎來到 title1 title2index.css.container flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;.title font-size: 30px; color: #000000; opacity: 0.9; margin: 4px 0px;media screen and (device-type: tablet) and (orientation: lan

8、dscape) .title font-size: 100px; media screen and (device-type: wearable) .title font-size: 28px; color: #FFFFFF; media screen and (device-type: tv) .container background-image: url(/common/images/Wallpaper.png); background-size: cover; background-repeat: no-repeat; background-position: center; .tit

9、le font-size: 100px; color: #FFFFFF; media screen and (device-type: phone) and (orientation: landscape) .title font-size: 60px; index.jsexport default data: title1: 原子化服務, title2: 新應用時代和新世界！ , onInit() 四、運行效果打開模擬器，如圖9所示圖9進行登錄，如圖10圖10輸入你的華為賬號進行登錄，如圖11圖11點擊允許，如圖12圖12登陸成功，如圖13，然后返回DevEco Studio。圖13選擇模擬

10、器，如圖14。圖14開啟成功，如圖15。圖15點擊小三角運行項目，如圖16圖16運行成功后會出現初始化頁面，如圖17圖17點擊模擬器中的home鍵，回到桌面，然后從左下角或者右下角斜向上滑動，進入服務中心，如圖18圖18進入服務中心后可以看見創建的卡片（這是項目創建初始化自身就有的卡片widget），如圖19圖19輕按卡片，添加至桌面，如圖20圖20卡片成功添加至桌面，如圖21如圖21長按桌面卡片，出現彈窗，單擊更多服務卡片，選擇我們之前新創建的卡片，并且添加至桌面，如圖22、圖23、圖24圖22 圖23圖24點擊新添加至桌面的卡片，回到頁面，如圖25圖 25這里想顯示其他模擬器效果，重復以上打開模擬器的步驟即可。其他模擬器卡片效果可用previewr快速預覽，如圖26打開previewr。圖26五、多設備效果顯示 其他卡片效果顯示，如圖27、圖28、圖29所示Phone：圖 27Tablet：圖28Wearable：圖29學習說明本教程演示了主要開發流程，便于開發者快速