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

1、HarmonyOS原子化服務(wù)開發(fā)快速入門教程 蛟龍騰飛 HarmonyOS原子化服務(wù)開發(fā)快速入門教程 學(xué)習(xí)說明1.開發(fā)者具備JS與前端開發(fā)語言入門級及以上基礎(chǔ)。2.已經(jīng)安裝好DevEco Studio。本案例用的DevEco Studio 00，API4-7都可以體驗(yàn)。3.開發(fā)者已經(jīng)注冊與實(shí)名認(rèn)證華為開發(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ù)卡片模

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

3、擊Finish創(chuàng)建。圖2圖3二、創(chuàng)建卡片找到entry中src-main下的js文件，右擊選擇new中的Service Widget選項(xiàng)，如圖4所示。圖4選擇immersive Data卡片模板，如圖5所示，點(diǎn)擊Next進(jìn)行下一步。圖5配置卡片模板信息，如圖6，然后點(diǎn)擊Finish創(chuàng)建。圖6三、修改代碼查看js下剛剛創(chuàng)建的卡片，如圖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文件，修改代碼（找到對應(yīng)修改部分）。.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: 標(biāo)題, title_small: 這里是副標(biāo)題, 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文件，點(diǎn)擊

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: 原子化服務(wù), title2: 新應(yīng)用時(shí)代和新世界！ , onInit() 四、運(yùn)行效果打開模擬器，如圖9所示圖9進(jìn)行登錄，如圖10圖10輸入你的華為賬號(hào)進(jìn)行登錄，如圖11圖11點(diǎn)擊允許，如圖12圖12登陸成功，如圖13，然后返回DevEco Studio。圖13選擇模擬

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