HarmonyOS服務卡片-防疫一碼通
開發背景
“嚴”字當頭共防新冠,面對德爾塔變異毒株的氣勢洶洶,疫情防控不能有一絲松懈。軟通動力全體員工堅決貫徹國家衛生健康委對于防疫的要求,做好個人防護;風險人群要主動檢測、自覺報告,主動承擔起疫情防控的社會責任。
由于軟通動力員工基數大,在進入辦公場所、乘坐接泊車以及乘坐地鐵進入商場時掃碼測溫的過程中難免排起長隊,在排隊過程中人員密集,對于疫情防控工作有著極大的不利影響。因此,軟通動力通過使用HarmonyOS原子化卡片服務原理,將行程碼轉化為卡片服務,提高了掃碼效率。
效果展示:




一、創建“一碼通”服務卡片工程
1、安裝和配置DevEco Studio 2.1 Release
安裝的鏈接:https://developer.harmonyos.com/cn/develop/deveco-studio
IDE的使用指南,很詳細:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387
我的本案例使用的最新的 2.1.0.501版本,SDK:API Version 5
2、創建一個Empty Java Phone應用


點擊Next

點擊Finish完成創建一碼通服務卡片工程
3、一碼通服務卡片頁面布局
首先完成一碼通服務卡片頁面的布局,代碼:

二、一碼通服務卡片卡片實現
第一步:卡片生成
鼠標放在項目的包路徑上,然后右擊,點擊“Service Widget”,然后就可以創建服務卡片。

選擇“Basic”高級模式,然后再Template中選擇 “Grid Pattern”模板,然后點擊Next。

然后給服務卡片起名字,這里要就寫個“OneCodePass”,選擇生成卡片的樣式,分別為1X2、2X2、2X4規格,然后點擊“Finish”完成創建。

然后會生成相關的模板代碼,以下是代碼的框架:


然后對OneCodePassAbility.java 和form_grid_pattern_onecodepass_*.xml布局文件修改,并新增準備好的資源文件。
第二步:卡片布局的修改
我們制作了一個1X2、2X2和2X4的卡片,布局效果如下所示:
1X2卡片布局:

2X2卡片布局:

2X4卡片布局:

第三步:卡片信息創建、更新、刪除
對卡片進行操作時,需要將創建的卡片信息持久化,以便在下次獲取/更新該卡片實例時進行使用。我們采用對象關系型數據庫來存儲卡片信息,主要是在卡片創建的回調函數onCreateForm和卡片銷毀的回調函數onDeleteForm中存儲和刪除卡片信息。卡片需要存儲的信息包括:卡片ID、卡片名稱、卡片大小(2X2還是2X4等),代碼如下所示。
1、存儲卡片信息:

2、更新卡片信息:

3、刪除卡片信息:

卡片創建完成。
第四步、卡片在桌面的創建方式
在手機桌面上卡片的創建方式分為:設為上滑卡片或添加到桌面。


第五步:卡片的點擊跳轉
卡片默認跳轉到個人健康碼,可以查看個人的健康碼詳情。
1、1x2卡片:
1.1、卡片:


2、2x2卡片:
2.1、卡片:

2.2、點擊卡片跳轉結果:

3、2x4卡片:
3.1、卡片

3.2、點擊卡片跳轉結果:
3.2.1、點擊通信大數據行程卡

3.2.2、點擊個人健康打卡:

3.2.3、點擊個人中心:

3.2.5、點擊常住人注冊:

卡片頁面跳轉功能的重點代碼如下:




通過案例充分說明了卡片的獨特優點:能夠將FA的重要信息或操作前置到卡片,以達到服務直達,減少體驗層級目的。
總結和回顧
本文通過一碼通服務卡片,手把手的教會大家如何實現一個HarmonyOS Java卡片,你將學會以下知識點:
1)如何使用模板創建卡片
2)卡片的布局
3)卡片信息創建、更新和刪除過程
4)卡片的點擊跳轉事件
除此以外,你還會學到:
1)如何使用webview控件進行網絡請求獲取數據


2)如何使用偏好型數據庫,緩存卡片信息
創建服務卡片:


更新服務卡片:

刪除服務卡片:

