如何用鸿蒙开发”微博“?老王手把手教你

大家好,我是老王~

大家好,我是老王~

今年鸿蒙你印象最深的发布会是哪一场?老王记得最深的的就是6月2日HarmonyOS 2及华为全场景新品发布会。

发布会上展示了HarmonyOS 2全新的系统架构、革命性的分布式技术、原子化服务、服务卡片等新技术创新,让我对鸿蒙技术的应用范围又加宽了。

其中最受我青睐的新技术是HarmonyOS服务卡片,它是FA的一种界面形式,能够将FA的重要信息或操作前置到卡片,以达到服务直达,减少体验层级目的。

那微博是大家经常使用的一款软件,其中微博热搜每分钟都会实时更新,热搜TOP新闻是大家关注非常高的事件,非常适合将这些重要新闻前置到卡片页面。

当前查看微博热搜的操作流程是:打开微博==>点击发现==>点击更多热搜==>这样才能到热搜页面,操作层级非常多。

如何用鸿蒙开发”微博“?老王手把手教你

有了服务卡片后,我们可以将TOP热搜新闻前置到服务卡片:用户在卡片中看到热搜新闻后,点击感兴趣的新闻就可以直接跳转到新闻详情页;点击查看更多,就可以直接跳转到微博热搜页面。这样就能直接将重要信息前置到卡片页面,并将减少用户的操作层级。效果如下所示:

如何用鸿蒙开发”微博“?老王手把手教你

将微博热搜新闻直接前置到服务卡片上,重要信息可以服务直达,通过卡片直接跳转对应的页面,大幅减少了用户的操作层级。

2、技术实现

本文将逐步拆解,一步步的教大家来如何实现这样一个微博热搜卡片,代码在优化完善后将会开源出来,欢迎大家下载学习。

2.1 微博热搜页面的实现

第一步:热搜页面的布局

首先要完成热搜页面的布局,代码如下所示。微博的热搜信息是利用ListContainer进行承载的,大家可以参考ListContainer组件去实现这部分的代码。

如何用鸿蒙开发”微博“?老王手把手教你

第二步:数据的定时更新

每隔N(N=10方便测试)秒,我们会请求一次微博热搜的接口,获取当前最新的微博数据并刷新到微博列表中。

如何用鸿蒙开发”微博“?老王手把手教你

2.2 微博热搜卡片的实现

第一步:卡片创建

我们是直接使用IDE中自带的模板进行卡片的创建,IDE中有丰富的卡片模板,减少我们的代码量。

如何用鸿蒙开发”微博“?老王手把手教你

第二步:卡片布局的修改

我们制作了一个2X2和2X4的卡片,布局效果如下所示。

2X2卡片布局

如何用鸿蒙开发”微博“?老王手把手教你

2X4卡片布局

如何用鸿蒙开发”微博“?老王手把手教你

第三步:卡片信息持久化

对卡片进行操作时,需要将创建的卡片信息持久化,以便在下次获取/更新该卡片实例时进行使用。我们采用对象关系型数据库来存储卡片信息,主要是在卡片创建的回调函数onCreateForm和卡片销毁的回调函数onDeleteForm中存储和删除卡片信息。卡片需要存储的信息包括:卡片ID、卡片名称、卡片大小(2X2还是4X4等),代码如下所示。

存储卡片信息:

如何用鸿蒙开发”微博“?老王手把手教你

删除卡片信息:

如何用鸿蒙开发”微博“?老王手把手教你

第四步:卡片数据的加载和更新

卡片的创建和每隔N(N=10,方便测试)秒的刷新,都是调用的下面这一段代码,重点介绍我画的3个代码片段:1是找到要更新的卡片布局,2是准备卡片更新的数据,3是完成卡片的数据更新。

如何用鸿蒙开发”微博“?老王手把手教你

这样在卡片创建阶段和卡片创建完成后,都可以实时更新数据,效果如下所示:

卡片创建阶段,可以实时更新

如何用鸿蒙开发”微博“?老王手把手教你

卡片创建完成,在桌面上,也可以实时更新

如何用鸿蒙开发”微博“?老王手把手教你

备注:如果应用后台退出后,卡片数据会停止更新。

第五步:卡片的点击跳转事件

卡片默认都是跳转到微博热搜列表页面,如果要自定义卡片的跳转,需要自己去写逻辑。比方说,热搜1跳转到热搜1页面,热搜2跳转热搜2页面,查看更多3跳转微博热搜列表页面。

如何用鸿蒙开发”微博“?老王手把手教你

要实现这个功能,重点代码如下所示,需要在代码中自定义添加卡片不同区域的点击事件。这样,卡片的三个区域就可以跳转到不同的地方。

如何用鸿蒙开发”微博“?老王手把手教你

这个案例充分说明了卡片的独特优点:能够将FA的重要信息或操作前置到卡片,以达到服务直达,减少体验层级目的。

3、总结和回顾

本文通过模仿一个微博热搜页面+微博热搜卡片,手把手的教会大家如何实现一个HarmonyOS Java卡片,你将学会以下知识点:

1)如何使用模板创建卡片

2)卡片的布局

3)卡片信息持久化

4)卡片数据的加载和更新

5)卡片的点击跳转事件

除此以外,你还会学到:

1)如何使用Https请求获取网络数据

2)如何使用ListContainer做一个列表

3)如何使用偏好型数据库,缓存网络数据

4)如果使用对象关系型数据库,缓存卡片信息

——————

原创:老王丨【公众号:鸿蒙开发者老王】华为认证讲师 / 腾讯认证讲师 / 鸿蒙开发先行者

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/103933.html

(0)

相关推荐

  • 为什么华为要弄一个仓颉汉语编程语言,用英语不行吗?

    众所周知,编程语言都用C++,Java等通用语言,为什么华为要花费非常大的精力和财力去搞另一个编程语言仓颉呢?说到底又有什么用呢?

    科技 2021年11月12日
  • 小孩子不需要梦想,他们只要像玩偶一样受大人的摆布就可以了”

    dagu:你对那个孩子做了什么?!guaishou:我把他的梦想拿了过来。dagu:不行!把梦想还给他,那个孩子的梦想只属于他自己!guaishou:小孩子不需要梦想,在他们长大之前只需要像玩具一样任大人摆布就可以了"!某剧全网下架各大视频平台均无法播放haizhijiazhanA:早就该下了,那么多好的动画片,有能量正面有意义的动画片。从来没听哪个老师推荐孩子看***的。早该下了haizhijiazhanB:*****的电视剧haizhijiazhanC:早该下了,我儿子高三了一有空就看这个。guanzhongD:有些家长,就像*****里面有一集的女巫一样,这孩子为长大成人的时候,会剥夺他们的梦想,他们就是女巫。

    生活 2021年9月26日
  • 产妇大出血抢救,胎儿宫内离奇死亡,孕妇生命告急

    #健康之星计划# #健康科学大赛# 对于女性来说,孕育新生命意味着幸福和快乐,但也有隐患。有些是假警报,有些可能是“渡劫”。 近日,有过两次剖宫产经历的孕妇李女士,前几天突然出现在...

    生活 2021年11月26日
  • 不让适龄儿童上学有什么后果,不上幼儿园会影响上小学吗

    我家闺女今年三岁3个月了,本来九月份就应该上园了,可是因为种种原因没有送她去。拉尿不能自理,而且睡觉时间和上园的时间都吻合不了,我也曾花了半年的时间在为上园打基础可是我失败了,不知道是我方法不对还是说我家这个孩子太有主意。我们俩孩子除了说话,感觉爬,走都比别人晚,我当初以为孩子有问题可是检查了说一切正常,我在想这有可能就是个干什么都比别人慢半拍的主。我感觉我家孩子不具备上乐园的条件,我很担心她上不了,希望懂的人帮我分析看看

    生活 2021年12月3日
  • 孩子的未来跟什么有关?

    1955年,美国著名的精神病医生、耶鲁大学教授彼得·纽鲍尔为了探讨"育儿差异性",验证先天和后天,哪个才是决定人类决定性的因素。于是秘密与领养机构签订协议,秘密开展被选儿童被不同家庭收养的成长轨迹。

    生活 2021年10月2日