bmob Harmony鸿蒙快速开发搜索功能

搜索功能是很多应用都需要的功能。在很多平台上,要开发一个兼容性较好的搜索功能都还是需要添加比较多的视图代码的。

为了解决这个问题,鸿蒙ArkUI提供了一个快速添加搜索功能的视图组件给我们,结合Bmob Harmony鸿蒙SDK的搜索能力,我们可以在非常短的时间内,给应用添加搜索功能。这就是本文给大家带来的案例,界面效果如下:

创建鸿蒙项目,选择Stage模型,API9.0,然后在DevEco Studio 开发工具的命令行(Terminal)中执行下面的命令,安装Bmob Harmony SDK:

shell 复制代码
ohpm install @bmob/bmob

如果一切顺利,你会在当前项目下的oh_modules目录下看到@bmob/bmob的包已经成功下载,如下图所示:

二、获取密钥

登录 Bmob后端云 ,创建应用,获取Secret Key和Secret Code,如下图所示:

三、初始化应用

在你创建的鸿蒙应用中,entry/src/main/ets 下面新建一个ArkTS File,名为BmobApp。代码如下:

js 复制代码
import { Bmob } from '@bmob/bmob';
import AbilityStage from '@ohos.app.ability.AbilityStage';
export default class BmobApp extends AbilityStage {
    onCreate() {
        super.onCreate();
        Bmob.initialize('你的Secret Key', '你的Secret Code')
    }
}

四、配置网络权限和设置应用入口

打开 entry/src/main/module.json5 文件,在module节点下面新增 srcEntryrequestPermissions 子节点,配置如下:

复制代码
{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "srcEntry": "./ets/BmobApp.ets",
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],
    ...省略更多
  }
}

五、编写ArkUI布局文件

这里使用到了鸿蒙的Search组件和List组件,其中Search组件主要是用来呈现搜索的界面效果,List组件主要用来呈现搜索结果。

为了保存搜索结果和搜索框的输入内容,我们首先需要定义两个@State变量,其中,changeValue是存储用户输入的搜索内容,lists是Bmob后端云中返回的搜索结果。代码如下:

js 复制代码
@State changeValue: string = ''
@State lists:any = []

布局文件如下:

js 复制代码
build() {
  Stack({alignContent:Alignment.Top}){
    Column() {
      Search({value:this.changeValue,placeholder:'请输入你的搜索内容'})
        .searchButton('搜索')
        .width('95%')
        .height(40)
        .align(Alignment.TopStart)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Gray)
        .placeholderFont({size:14,weight:400})
        .textFont({size:14,weight:400})
        .onSubmit((value)=>{
          this.search(value)
        })
        .onChange((value)=>{
          this.changeValue = value
        })

      List({space:10}){
        ForEach(this.lists,item=>{
          ListItem(){
            Column(){
              Text(item.messages)
                .maxLines(3)
                .margin({bottom:5})

              Divider()
                .strokeWidth(8)
                .color('#f5f5f5')
            }

          }
        })
      }

    }
    .width('100%')
  }
  .height('100%')
}

六、执行搜索任务

这里执行搜索的内容Bmob后端云ai_log表中的messages字段。这是Bmob后端云推出来的AI对话服务的对话日志表,表的结构如下:

整个搜索执行代码非常简单,主要是调用Bmob.Querywhere查询,用到了LIKE这个模糊查询方法,具体代码如下:

复制代码
search(value){
  if(value==''){
    Prompt.showToast({message:'请输入搜索内容'})
    return
  }

  let query = Bmob.Query('ai_log')
  query.where(LIKE('messages',value)).find()
    .then((res)=>{
      if(res.length<=0){
        this.lists = []
        Prompt.showToast({message:'没有找到对应的内容'})
      }
      else{
        res.forEach((r)=>{
          this.lists.push(r)
        })
      }
    })
    .catch((err)=>{
      Prompt.showToast({message:err.error})
    })
}

七、源码分享

本案例的源码下载地址:https://gitee.com/zhang-ming-123/bmob-harmony-demo/tree/master/bmobsearch

相关推荐
HarmonyOS_SDK18 小时前
打破场景边界,支付宝联合实况窗提供全新出行服务体验
harmonyos
安卓开发者18 小时前
鸿蒙NEXT应用数据持久化全面解析:从用户首选项到分布式数据库
数据库·分布式·harmonyos
森之鸟19 小时前
开发中使用——鸿蒙播放本地mp3文件
华为·harmonyos
不是三毛没有半19 小时前
华为USG6000v2 NAT模式下IPSEC IKE V1 实验
网络·网络安全·华为
前端世界20 小时前
HarmonyOS 数据处理性能优化:算法 + 异步 + 分布式实战
算法·性能优化·harmonyos
HarmonyOS小助手21 小时前
【案例+1】HarmonyOS官方模板优秀案例 第7期:金融理财 · 记账应用
harmonyos·鸿蒙·鸿蒙生态
爱笑的眼睛111 天前
HarmonyOS 应用开发深入浅出:基于 Stage 模型与声明式 UI 的现代化状态管理实践
华为·harmonyos
爱笑的眼睛111 天前
HarmonyOS 应用开发深度解析:掌握 ArkTS 声明式 UI 与现代化状态管理
华为·harmonyos
爱笑的眼睛111 天前
HarmonyOS 应用开发深度解析:基于 ArkTS 的跨组件状态管理最佳实践
华为·harmonyos
前端世界1 天前
鸿蒙系统下的智能设备故障检测实战:从监控到自愈的全流程实现
华为·harmonyos