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

大家好,我是老王~

大家好,我是老王~

今年鸿蒙你印象最深的发布会是哪一场?老王记得最深的的就是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)

相关推荐

  • 排行前十的电动车,电动汽车排行榜

    电动车的品牌很多,但领头的一直都是大家熟悉的品牌。接下来,我将按照相反的顺序向您介绍它们。文章内容丰富,不仅包括品牌排名、品牌介绍,还包括上榜车型推荐. 第五名:金箭电动车金剑成立...

    科技 2021年10月22日
  • 中医专家揭秘妙招:发热儿童常用按摩手法都在这里,记得收藏。

    今天,北京弘医堂中医专家给大家介绍几个小儿推拿手法,当家中小孩生病、不舒服了,家长可以自己为孩子解除病痛。

    生活 2021年10月21日
  • 儿童房改造全过程:1间房定制2张高低床,有了三胎业主也不用换房

    儿童房不够!估计是很多二胎家庭都会头疼的一个问题,房间就那么大,连再放一张床的空间都没了,不是谁家都能说换房就换房的!So,国外这位业主就立马对儿童房进行了大改造,一房住两娃,改完就连国内父母看了都直呼:住三胎都行,想求方案!

    生活 2021年9月28日
  • 手指传感即可测量:俄研发无创高精度血糖仪获多国专利

    据俄罗斯卫星通讯社报道,俄企研发出世界首台无创高精度血糖仪,已在美国、中国和日本完成技术专利注册,并计划明年开始进入国外市场。

    科技 2021年11月9日
  • 《望远镜》,被诅咒的望远镜

    作为父母谁不爱自己的子女?但我们过度地爱变成了望远镜里的罪恶,不知不觉再毁坏孩子的心智,或变成不劳而获的啃老族,或变成无法独立生活的寄生虫,或变成无法无天脱缰的野马......多少家长的悲剧正是看不到望远镜里的罪恶,实在值得深思。

    生活 2021年12月8日
  • 蒙氏教育语录,蒙氏教育最经典的一句话

    初次为人父母,估计新爸爸妈妈们都是看着书来教孩子。相信所有的家长都听过一种教育理念——蒙特梭利教育法。很多家长都对这种教育法趋之若鹜。我当年也是。甚至我的母亲,在从美国带完大姐的孩子回国后,更是给我推荐这种世界级的先进育儿经验。所以,蒙特梭利教育法,深深地影响了我的孩子。

    生活 2021年10月26日