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

it2023-05-28  67

以前在做前后端分离的项目时,要实现一些搜索框的模糊搜索时,运气好一点,后端攻城狮会处理好逻辑,前端只需在输入框的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


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

最新回复(0)