隨著HarmonyOS發(fā)布,服務(wù)卡片這一功能也走進了人們的視線。它以其直觀可視的展現(xiàn)形式,流暢的運行速度,刷新了人們對以往APP的認識。
正值黨的百年華誕,我們在學(xué)習(xí)黨史的時候,利用服務(wù)卡片功能,開發(fā)出可以快速學(xué)習(xí)黨史的這款卡片,并取名為“薪火”。
一
創(chuàng)建“薪火”app工程1安裝和配置DevEco Studio 2.1 Release
安裝的鏈接:https://developer.harmonyos.com/cn/develop/deveco-studioIDE的使用指南,很詳細:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387我的本案例使用的最新的 2.1.0.501版本,SDK:API Version 5
2創(chuàng)建一個Empty Java Phone應(yīng)用
點擊Next
點擊Finish完成創(chuàng)建薪火app工程
3薪火app頁面布局
首先完成薪火app頁面的布局,代碼如下:

二
薪火app卡片實現(xiàn)
第一步:卡片生成
鼠標(biāo)放在項目的包路徑上,然后右擊,點擊“Service Widget”,然后就可以創(chuàng)建服務(wù)卡片
選擇“Basic”高級模式,然后再Template中選擇 “Grid Pattern”模板,然后點擊Next
然后給服務(wù)卡片起名字,這里要就寫個“FireWoodCard”,選擇生成卡片的樣式,分別為2X2、2X4、4X4規(guī)格,然后點擊“Finish”完成創(chuàng)建。
然后會生成相關(guān)的模板代碼,如下是代碼的框架:


然后對FireWoodCardAbility.java 和form_grid_pattern_firewoodcard_*.xml布局文件修改,并新增準(zhǔn)備好的資源文件。
第二步:卡片布局的修改
我們制作了一個規(guī)格分別為2X2、2X4和4X4三種類型的服務(wù)卡片
第三步:卡片信息創(chuàng)建、更新、刪除
對卡片進行操作時,需要將創(chuàng)建的卡片信息持久化,以便在下次獲取/更新該卡片實例時進行使用。我們采用對象關(guān)系型數(shù)據(jù)庫來存儲卡片信息,主要是在卡片創(chuàng)建的回調(diào)函數(shù)onCreateForm和卡片銷毀的回調(diào)函數(shù)onDeleteForm中存儲和刪除卡片信息??ㄆ枰鎯Φ男畔ǎ嚎ㄆ琁D、卡片名稱、卡片大小(2X2還是4X4等),代碼如下所示。
1、存儲卡片信息:

2、更新卡片信息:

3、刪除卡片信息:

卡片創(chuàng)建完成。
第四步:卡片在桌面的創(chuàng)建方式
在手機桌面上卡片的創(chuàng)建方式分為:設(shè)為上滑卡片或添加到桌面。
注:手動在桌面上上滑時,卡片會自動撤銷。
注:手動長按卡片可以進行移除卡片和添加其他規(guī)格的卡片。
第五步:卡片的點擊跳轉(zhuǎn)
卡片默認跳轉(zhuǎn)到薪火app主頁,可以查看到當(dāng)前app上的熱搜新聞,點擊新聞會自動跳轉(zhuǎn)到對應(yīng)新聞的詳細內(nèi)容頁面。
卡片頁面跳轉(zhuǎn)到APP新聞頁面功能的重點代碼如下:

新聞列表頁面跳轉(zhuǎn)到新聞詳情頁面功能的重點代碼如下:



通過案例充分說明了卡片的獨特優(yōu)點:能夠?qū)A的重要信息或操作前置到卡片,以達到服務(wù)直達,減少體驗層級目的。
總結(jié)和回顧
本文通過薪火+薪火服務(wù)卡片,手把手的教會大家如何實現(xiàn)一個HarmonyOS Java卡片,你將學(xué)會以下知識點:1)如何使用模板創(chuàng)建卡片2)卡片的布局3)卡片信息創(chuàng)建、更新和刪除過程4)卡片的點擊跳轉(zhuǎn)事件
除此以外,你還會學(xué)到:
1)如何使用webview控件進行網(wǎng)絡(luò)請求獲取數(shù)據(jù)


2)如何使用ListContainer做一個列表
參考HarmonyOS開發(fā)者技術(shù)文檔:
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-listcontainer-0000001060007847
3)如何使用偏好型數(shù)據(jù)庫,緩存卡片信息
創(chuàng)建服務(wù)卡片:


更新服務(wù)卡片:

刪除服務(wù)卡片:


責(zé)任編輯:haq
-
操作系統(tǒng)
+關(guān)注
關(guān)注
37文章
7402瀏覽量
129365 -
鴻蒙系統(tǒng)
+關(guān)注
關(guān)注
183文章
2642瀏覽量
69892 -
HarmonyOS
+關(guān)注
關(guān)注
80文章
2154瀏覽量
36090
原文標(biāo)題:如何開發(fā)一款黨史學(xué)習(xí)服務(wù)卡片
文章出處:【微信號:gh_019562b5fb4b,微信公眾號:gh_019562b5fb4b】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。
發(fā)布評論請先 登錄
想體驗鴻蒙生態(tài),該怎么獲取鴻蒙開發(fā)板?有哪些途徑?
【HarmonyOS 5】金融應(yīng)用開發(fā)鴻蒙組件實踐
開鴻開發(fā)板深度體驗:從開源鴻蒙開發(fā)到AI場景實踐
鴻蒙5開發(fā)寶藏案例分享---一多開發(fā)實例(音樂)
鴻蒙開發(fā)API9 到 API12,有哪些不同
鴻蒙5開發(fā)寶藏案例分享---點擊響應(yīng)時延分析
鴻蒙5開發(fā)寶藏案例分享---一多開發(fā)實例(游戲)
鴻蒙5開發(fā)案例分享揭秘---一多開發(fā)實例(商務(wù)辦公)
鴻蒙5開發(fā)寶藏案例分享---一多開發(fā)實例(地圖導(dǎo)航)
鴻蒙5開發(fā)寶藏案例分享---一多開發(fā)實例(社區(qū)評論)
開源鴻蒙開發(fā)新體驗,開鴻Bot系列今日開啟預(yù)售!
DevEco Studio AI輔助開發(fā)工具兩大升級功能 鴻蒙應(yīng)用開發(fā)效率再提升
鴻蒙北向開發(fā)OpenHarmony5.0 DevEco Studio開發(fā)工具安裝與配置
如何開發(fā)鴻蒙快速學(xué)習(xí)黨史卡片
評論