鸿蒙元服务项目实战:终结篇之备忘录搜索功能实现

程序员一鸣
• 阅读 11

前言

本文基于Api12

其实前边三篇文章,我们已经把要实现的功能都进行实现了,无论是列表展示,还是数据编辑,样式修改,换肤等等,已经达到了可交付的状态,当然了,目前的这个小项目也已经上架到了鸿蒙系统的应用商店,名字是随心记,大家可以边做项目边进行体验,本篇文章,会把最后一点的搜索功能实现,另外再总结一下这个小项目用到的知识点。

我们可以简单看下,目前已经完成的效果。

备忘录首页,条目颜色跟着皮肤联动。

鸿蒙元服务项目实战:终结篇之备忘录搜索功能实现

内容编辑页面,可以设置样式和换肤。

鸿蒙元服务项目实战:终结篇之备忘录搜索功能实现

搜索功能实现

目前,搜索功能是和列表页绑定在一起的,一是共用组件,减少页面和代码,二是,本身功能并不复杂,合并在一个页面也更加直观表达。

点击搜索框,输入内容进行搜索后,过滤出和搜索内容匹配的数据进行展示,点击搜索框右边的叉号,就还原所有的数据。

针对之前的列表数据加载,我们只需要改造一番即可,增加关键搜索词,搜索时传递,其它调用时不传,并使用filter函数进行过滤和搜索匹配的数据。

doData(keyWord?: string) {
    try {
      this.doContentEmpty()
      this.mListContentBean = []
      DataPreferences.getInstance().getAllSync().allKeys?.forEach((key) => {
        let content = DataPreferences.getInstance().getSync<string>(key)
        let bean = JSON.parse(content) as ListContentBean
        this.mListContentBean.push(bean)
        if (DataPreferences.getInstance().getAllSync().allKeys?.length == this.mListContentBean.length) {
          //排序
          this.mListContentBean.sort((a, b) => b.timeValue! - a.timeValue!)

          if (keyWord != undefined) {
            this.mListContentBean = this.mListContentBean.filter(item => item.title?.indexOf(keyWord) != -1);
          }
        }
      })
    } catch (e) {
    }
  }

UI组件

Search({ placeholder: "搜索……" })
        .margin({ left: 10, right: 10, top: 10 })
        .onSubmit((value) => {
          //搜索
          this.doData(value)
        })
        .onChange((value: string, _?: PreviewText) => {
          if (value == "") {
            //清空
            this.doData()
          }
        })

备忘录项目知识点

这个备忘录小项目包含的知识点并不算很多,可以练习到的知识点有两个方面,第一个方面,就是UI组件相关的,比如列表组件List的使用,搜索组件Search的使用,以及富文本组件RichEditor的使用,除了,这几个典型的组件之外,基础组件也有很多。

第二个方面就是功能方面,我们可以练习到用户首选项DataPreferences数据的增删改查,输入框和软键盘之间的避让,以及页面数据的保存和页面数据的回显。

相关总结

开发元服务,有很多的限制性因素,比如包的大小限制,相关API限制,所以,我们在实际开发的时候,具体Api能否使用,还需要去官网查看一下,目前,针对当前这个小项目,总结了几个小问题,大家在开发的过程中可以作为参考。

如何实现底部按钮,在软键盘弹出后,显示在软键盘上面?

答:获取软键盘的高度,根据软键盘的弹出和隐藏,动态设置需要改变的组件即可。

元服务,使用用户首选项DataPreferences进行数据存储,如何按照列表形式存储?

答:只需要设置不同的key即可,获取的时候,可以遍历所有的key,以key再获取对应的数据。

RichEditor应该如何正确回显数据?

答:在RichEditor初始化完成之后 ,比如onReady方法中。

点赞
收藏
评论区
推荐文章
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
HarmonyOS应用开发项目实战
鸿蒙2.0已经发布了有段时间了,目前网上也有些小demo了,但是缺乏稍微大点的项目代码。我准备计划开发一个稍微正式点的项目,我写了个初略的项目需求清单,来体验鸿蒙应用开发。目前我已经着手实现了其中的一些重要功能,某些功能发现鸿蒙暂时不支持,但是还是先写上吧,后面慢慢摸索。我会陆续更新连载此贴,一步步从0基础讲解项目开发过程,然后巩固鸿蒙应用开发知识点。有错误
少湖说 少湖说
7个月前
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter实战:混合开发鸿蒙Flutter混合开发主要有两种形式。1.基于har将fluttermodule打包成har包,在原生鸿蒙项目中,以har包的方式引入。其优点是主项目开发者可以不关注Flutter实现,不需要安装配置Flutter开发环
程序员一鸣 程序员一鸣
2天前
鸿蒙元服务项目实战:备忘录UI页面开发
UI页面绘制没什么好说的,就是组件的位置摆放,和组件的显示逻辑,有很多的属性并没有文章记录,大家可以去仓库中查看即可,文章中用到了我的一个标题栏组件,如果大家不想用,可以使用自己写的即可。
程序员一鸣 程序员一鸣
2天前
鸿蒙元服务项目实战:备忘录内容编辑开发
编辑页面还有一些其他的注意事项,比如换肤功能,底部的样式设置等等,都是比较的简单,就不做赘述了。
布局王 布局王
22小时前
Uniapp开发鸿蒙应用时如何运行和调试项目
经过前几天的分享,大家应该应该对uniapp开发鸿蒙应用的开发语法有了一定的了解,可以进行一些简单的应用开发,今天分享一下在使用uniapp开发鸿蒙应用时怎么运行到鸿蒙设备,并且在开发中怎么调试程序。运行Uniapp项目支持运行到鸿蒙真机和模拟器,不过在这
程序员一鸣 程序员一鸣
22小时前
鸿蒙开发:一文了解桌面卡片
在鸿蒙开发中,服务卡片虽然功能丰富,但也存在一些限制。例如,它不支持极速预览、断点调试和HotReload热重载等功能,同时也无法使用setTimeOut。此外,开发过程中还面临其他约束,如不支持导入动态共享包、使用native语言开发或加载nativeso。目前,服务卡片仅支持基于ArkUI的开发方式,且不支持跨平台开发,仅能使用声明式范式的部分组件、事件、动效、数据管理、状态管理和API能力。
GeorgeGcs GeorgeGcs
13小时前
【HarmonyOS NEXT】一键扫码功能
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财前言鸿蒙在api10之后,对系统api的基础上,封装了较为复杂功能的开发工具包,统一称之为Kit。这些Kit根据功能定义的不同,划分为不同的种类Kit。如下图所示:其实可以理解为集成在系统
GeorgeGcs GeorgeGcs
12小时前
【HarmonyOS 5】鸿蒙用户头像编辑功能实践
鸿蒙开发能力HarmonyOSSDK应用服务鸿蒙金融类应用(金融理财一、前言1、应用背景在鸿蒙化开发过程中,我们发现最基本常见的功能用户头像的编辑,实现方式和Android与IOS有极大的不同。在实际开发和调研的过程中,我们发现并总结了鸿蒙隐私处理与业内A
元宇宙将影响人类的生产和生活方式|广州华锐互动
在元宇宙开发过程中,企业、创作者、普通用户、投资者和整个社会都会不同程度地参与元宇宙开发建设。  作为技术开发人员的企业,以开放的态度研究元宇宙平台的相关技术,技术的发展永远不会等待后来者。目前,许多互联网公司都对元宇宙开发开始布局。在元宇宙快速发展起来的时候,参与制定标准可以在元宇宙开发中拥有更大的发言权。从长远来看,元宇宙发展所需的超大计算能力和交互技术