#在HarmonyOS星河遨游# HarmonyOS卡片----喂奶记录卡片(1) 原创

pfuchenlu
发布于 2024-8-19 10:11
浏览
0收藏

楼主最近新晋为奶爸一枚,常常因喂奶问题困扰,而现有app记录喂奶需要先打开应用,再去找对应功能,略感繁琐,所以动手开发了一款喂奶卡片应用,以便日常使用。该应用采用API8版本的JS UI组件开发,功能尚存不少缺陷,将在后文简述。

效果展示

卡片上滑

卡片详情

首页



 #在HarmonyOS星河遨游# HarmonyOS卡片----喂奶记录卡片(1)-鸿蒙开发者社区 #盲盒+码# HarmonyOS卡片----喂奶记录卡片(1)-鸿蒙开发者社区





 #在HarmonyOS星河遨游# HarmonyOS卡片----喂奶记录卡片(1)-鸿蒙开发者社区 #盲盒+码# HarmonyOS卡片----喂奶记录卡片(1)-鸿蒙开发者社区





 #在HarmonyOS星河遨游# HarmonyOS卡片----喂奶记录卡片(1)-鸿蒙开发者社区 #盲盒+码# HarmonyOS卡片----喂奶记录卡片(1)-鸿蒙开发者社区





 #在HarmonyOS星河遨游# HarmonyOS卡片----喂奶记录卡片(1)-鸿蒙开发者社区 #盲盒+码# HarmonyOS卡片----喂奶记录卡片(1)-鸿蒙开发者社区



通过以上效果图我们可以看到,分别制作了数据录入及统计图表两个卡片

数据记录卡片

在喂养小朋友时,我们常常回问自己,他上次是什么时候吃的奶,上次吃奶距现在过去了多少时间;他今天总共吃了多少;他今天拉没拉粑粑;最近的粑粑是否都是正常等等问题

数据记录卡片提供记录吃奶和排便情况的数据录入及显示。可以方便的快速录入吃奶/排便情况以及提醒距上次吃奶/排便已过去时间
通过卡片内容可以看到,卡片通过文本及按钮组件进行简单的排列组合,结合对应的事件处理完成记录的任务。

统计卡片

仅仅记录数据是不够的,还不够直观展示当日喂养情况,故开发了统计卡片。
统计卡片通过chart组件对当日喂养数据进行折线图演示,并以文本的形式在底部统计出当日总共吃奶总量。

首页页面

首页页面通过两个chart组件,将当日喂养记录及当日排便记录进行展示。

排版代码将在后续文章中简单介绍,使用到的组件仅有text、div、chart、button有兴趣的小伙伴可以先自行尝试排版,数据的记录采用@ohos.data.storage(轻量级存储)

开发过程中的踩坑

  1. storage存储的on(“change”)事件不可用
  2. storage存储文件的路径最好通过context获取当前app路径,不过路径获取是异步过程,不想处理异步,可以调试时记录下存储文件路径后定义为一个常量进行使用,推断路径为:​​ "/data/user/0/{{bundleName}}/files/{{文件名}}";​
  3. storage存储的put方法只是将内容推送到内存中,还需要调用flush方法将数据存储到文件中
  4. API8的卡片serverAbility中​​onCastToNormal​​​和​​onVisibilityChange​​​未找到触发方式,根据官方文档描述​​onCastToNormal(卡片提供方接收临时卡片转常态卡片的通知接口)​​但将卡片固定到屏幕后未触发
  5. 卡片不支持主动刷新,我尝试用​​setInterval​​定时去主动刷新卡片,结果失败。所以想做实时刷新的卡片,估计得退回api6的Java做ServerAbility
  6. chart组件功能差强人意,三方库也没有好的统计图表,希望早日能有和echart一样强大的统计图表

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2024-8-19 10:11:33修改
收藏
回复
举报
回复
    相关推荐