【软通动力】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）如何使用偏好型数据库，缓存卡片信息

创建服务卡片：

更新服务卡片：

删除服务卡片：

更多原创内容请关注：软通动力HarmonyOS学院