創(chuàng)建“一碼通”服務(wù)卡片工程

①安裝和配置 DevEco Studio 2.1 Release

安裝的鏈接：

https://developer.harmonyos.com/cn/develop/deveco-studio IDE 的使用指南，很詳細(xì)：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387

我的本案例使用的最新的 2.1.0.501 版本，SDK：API Version 5。

②創(chuàng)建一個(gè) Empty Java Phone 應(yīng)用

點(diǎn)擊 Next：

點(diǎn)擊 Finish 完成創(chuàng)建一碼通服務(wù)卡片工程。

③一碼通服務(wù)卡片頁(yè)面布局

首先完成一碼通服務(wù)卡片頁(yè)面的布局，代碼：

一碼通服務(wù)卡片實(shí)現(xiàn)

第一步：卡片生成

鼠標(biāo)放在項(xiàng)目的包路徑上，然后右擊，點(diǎn)擊“Service Widget”，然后就可以創(chuàng)建服務(wù)卡片：

選擇“Basic”高級(jí)模式，然后在 Template 中選擇 “Grid Pattern”模板，然后點(diǎn)擊 Next：

然后給服務(wù)卡片起名字，這里要就寫(xiě)個(gè)“OneCodePass”，選擇生成卡片的樣式，分別為 1X2、2X2、2X4 規(guī)格，然后點(diǎn)擊“Finish”完成創(chuàng)建。

然后會(huì)生成相關(guān)的模板代碼，以下是代碼的框架：

然后對(duì) OneCodePassAbility.java 和 form_grid_pattern_onecodepass_*.xml 布局文件修改，并新增準(zhǔn)備好的資源文件。

第二步：卡片布局的修改

我們制作了一個(gè) 1X2、2X2 和 2X4 的卡片，布局效果如下所示：

1X2 卡片布局：

2X2 卡片布局：

2X4 卡片布局：

第三步：卡片信息創(chuàng)建、更新、刪除

對(duì)卡片進(jìn)行操作時(shí)，需要將創(chuàng)建的卡片信息持久化，以便在下次獲取/更新該卡片實(shí)例時(shí)進(jìn)行使用。

我們采用對(duì)象關(guān)系型數(shù)據(jù)庫(kù)來(lái)存儲(chǔ)卡片信息，主要是在卡片創(chuàng)建的回調(diào)函數(shù) onCreateForm 和卡片銷(xiāo)毀的回調(diào)函數(shù) onDeleteForm 中存儲(chǔ)和刪除卡片信息。

卡片需要存儲(chǔ)的信息包括：卡片 ID、卡片名稱(chēng)、卡片大小（2X2 還是 2X4 等），代碼如下所示。

存儲(chǔ)卡片信息：

更新卡片信息：

刪除卡片信息：

卡片創(chuàng)建完成。

第四步：卡片在桌面的創(chuàng)建方式

在手機(jī)桌面上卡片的創(chuàng)建方式分為：設(shè)為上滑卡片或添加到桌面。

第五步：卡片的點(diǎn)擊跳轉(zhuǎn)

卡片默認(rèn)跳轉(zhuǎn)到個(gè)人健康碼，可以查看個(gè)人的健康碼詳情。

點(diǎn)擊個(gè)人中心：

點(diǎn)擊常住人注冊(cè)：

卡片頁(yè)面跳轉(zhuǎn)功能的重點(diǎn)代碼如下：

通過(guò)案例充分說(shuō)明了卡片的獨(dú)特優(yōu)點(diǎn)：能夠?qū)?FA 的重要信息或操作前置到卡片，以達(dá)到服務(wù)直達(dá)，減少體驗(yàn)層級(jí)目的。

總結(jié)和回顧

本文通過(guò)一碼通服務(wù)卡片，手把手的教會(huì)大家如何實(shí)現(xiàn)一個(gè) HarmonyOS Java 卡片，你將學(xué)會(huì)以下知識(shí)點(diǎn)：

如何使用模板創(chuàng)建卡片

卡片的布局

卡片信息創(chuàng)建、更新和刪除過(guò)程

卡片的點(diǎn)擊跳轉(zhuǎn)事件

除此以外，你還會(huì)學(xué)到：

①如何使用webview控件進(jìn)行網(wǎng)絡(luò)請(qǐng)求獲取數(shù)據(jù)

②如何使用偏好型數(shù)據(jù)庫(kù)，緩存卡片信息

創(chuàng)建服務(wù)卡片：

更新服務(wù)卡片：

刪除服務(wù)卡片：

責(zé)任編輯：haq