当前位置:网站首页>微信小程序云开发之模糊搜索
微信小程序云开发之模糊搜索
2022-08-02 03:23:00 【爱唱歌的前端】
以前在做前后端分离的项目时,要实现一些搜索框的模糊搜索时,运气好一点,后端攻城狮会处理好逻辑,前端只需在输入框的value值发生变化时去调用接口重新渲染数据就好了。运气差点,后端攻城狮只会给你一个总的数组,然后在值发生变化时得自己动手写逻辑去筛选数据。那么在微信小程序云开发上是怎么实现的了?
微信小程序云开发之模糊搜索
好的,我们先来开看一下我录制的一个小demo,在使用代码前我们需要注意一些细节。当我们直接用api去匹配数据库时一定要注意数据库操作权限的问题,否则不管匹配什么返回都是空的,如果是间接通过云函数去操作的话就不会有这种问题,具体看gif。
主要代码
要实现模糊搜索的话直接使用构造正则表达式就好了。
*官方文档API:Database.RegExp
*直接用api调用(需要数据库操作权限,会有限制20条的局限)
const db = wx.cloud.database()
// 直接调用
//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
。
拷贝代码或者下载demo后报错的看这里,务必认真看完文章描述及录制的gif,检查自己创建的集合名字、搜索字段名是否对应得上,检查数据库的权限问题,最后别忘了上传云函数,都学云开发了,务必认真、细心,别拷了代码还不会用。 (╯°Д°)╯︵┻━┻
最后想补习云函数的可以点击这里哦!! 传送门
边栏推荐
- Phospholipid-polyethylene glycol-azide, DSPE-PEG-Azide, DSPE-PEG-N3, MW: 5000
- 骨架效果 之高级渐变,适用图片等待时
- parser = argparse.ArgumentParser()解析
- 如何查看一个现有的keil工程之前由什么版本的keil IDE编译
- 解决MySQL创建子视图并查看的时候,字符集报错问题
- AttributeError: Can't get attribute 'SPPF' on
- 小程序 van-cell 换行能左对齐问题
- 【 application 】 life many years of operations, what turned scored 12 k + annual bonus salary?
- getattr()函数解析
- 【我的创作纪念日】 3周年
猜你喜欢
知识工程作业2:知识工程相关领域介绍
Phospholipid-polyethylene glycol-thiol, DSPE-PEG-Thiol, DSPE-PEG-SH, MW: 5000
小程序 van-cell 换行能左对齐问题
Chapter 10 Clustering
AttributeError: 'Upsample' object has no attribute 'recompute_scale_factor'
Source Insight 使用教程(2)——常用功能
每天填坑,精卫填坑第二集,TX1 配置从固态启动,安装Pytorch
C语言 十六进制整数字符串转十进制整数
Error in render: “TypeError: Cannot read properties of null (reading ‘0‘)“ 报错解决方案
Debian 10 NTP 服务配置
随机推荐
URL module
pyppeteer使用样例脚本
【面试】失败的一次面试
猴子选大王
第一篇博客
解决MySQL创建子视图并查看的时候,字符集报错问题
kettle 安装与配置
A senior test engineer asked me these questions as soon as the interview came
动态代理工具类
js作用域与闭包
npm and package.json
docker 安装 sqlserver中的坑点
Chemical reagent Phospholipid-polyethylene glycol-hydroxyl, DSPE-PEG-OH, DSPE-PEG-Hydroxyl, MW: 5000
COCO数据集训练TPH-YoloV5
docker中配置mysql 5.7
啃瓜记录第一天
相对路径和绝对路径
我的小笔记 =》其他东东
The usage of json type field in mysql
require modular syntax