欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

微信小程序云开发之模糊搜索

程序员文章站 2022-03-27 16:01:56
以前在做前后端分离的项目时,要实现一些搜索框的模糊搜索时,运气好一点,后端攻城狮会处理好逻辑,前端只需在输入框的value值发生变化时去调用接口重新渲染数据就好了。运气差点,后端攻城狮只会给你一个总的数组,然后在值发生变化时得自己动手写逻辑去筛选数据。那么在微信小程序云开发上是怎么实现的了?微信小程序云开发之模糊搜索可以重下面的例子看到......

以前在做前后端分离的项目时,要实现一些搜索框的模糊搜索时,运气好一点,后端攻城狮会处理好逻辑,前端只需在输入框的value值发生变化时去调用接口重新渲染数据就好了。运气差点,后端攻城狮只会给你一个总的数组,然后在值发生变化时得自己动手写逻辑去筛选数据。那么在微信小程序云开发上是怎么实现的了?

微信小程序云开发之模糊搜索

好的,我们先来开看一下我录制的一个小demo,在使用代码前我们需要注意一些细节。当我们直接用api去匹配数据库时一定要注意数据库操作权限的问题,否则不管匹配什么返回都是空的,如果是间接通过云函数去操作的话就不会有这种问题。

微信小程序云开发之模糊搜索


主要代码

要实现模糊搜索的话直接使用构造正则表达式就好了。

☞官方文档API:Database.RegExp

❀直接用api调用(需要数据库操作权限,会有限制20条的局限)

  // 直接调用
  //msg为要搜索的集合,可以自己定义
  db.collection('msg').where({
    //text为要搜索的对象名,务必对应集合里面的名字
    text: db.RegExp({
      //inputValue为输入框的值,也是就要查询内容,可以自己定义
      regexp: inputValue,
      //大小写不区分
      options: 'i',
    })
  }).get().then(res => {
    console.log(res)
  })

❀通过云函数调用

/*------------------------小程序端代码---------------------------*/
//fuzzySearch为云函数的名字,可以自己定义
  wx.cloud.callFunction({
    name: 'fuzzySearch',
    data: {
      inputValue: inputValue
    }
  }).then(res => {
    // console.log(res)
    this.setData({
      resultArr: res.result.data
    })
  })

/*------------------------云函数端代码---------------------------*/
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()

// 云函数入口函数
exports.main = async (event, context) => {
  //输入框的值
  let inputValue = event.inputValue;
  return await db.collection('msg').where({
    //text为要搜索的对象名,务必对应集合里面的名字
    text: db.RegExp({
      //从搜索栏中获取的value作为规则进行匹配。
      regexp: inputValue,
      //大小写不区分
      options: 'i',

    })
  }).get()
}

需要源代码的可以点这下载,把代码拷贝到你项目的对应位置,记得上传云函数,另外在你的云数据库中创建相应集合,这样基本就没问题了==》百度网盘 ——提取码6w4m


最后想学补习云函数的可以点击这里哦!! 传送门

本文地址:https://blog.csdn.net/weixin_42063951/article/details/109183792