统计
  • 建站日期:2021-03-10
  • 文章总数:699 篇
  • 评论总数:733 条
  • 分类总数:10 个
  • 最后更新:12月4日
文章 前端知识

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

程序员阿鑫
首页 前端知识 正文

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

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

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

微信小程序云开发之模糊搜索
-程序员阿鑫-带你一起秃头!
-第1
张图片
主要代码
要实现模糊搜索的话直接使用构造正则表达式就好了。

☞官方文档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()
}

这样就好了,是不是非常简单

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!

-- 展开阅读全文 --
网易云LOOK直播场控机器人(国庆版)
« 上一篇
装机神器Ventoy v1.0.80U盘启动制作工具
下一篇 »
为了防止灌水评论,登录后即可评论!
注册登录

HI ! 请登录
注册会员,享受下载全站资源特权。
登陆 注册
上号,带你一起秃头!

IP地址

热门文章

1
抖音无限礼物模拟小工具分享
2
QQ假红包引流QQ群教程及代码
4
卡QQ永久大会员方法

最新文章

标签