精华内容
下载资源
问答
  • 所以我们搜索的时候就要借助云开发来实现。 一,需求 比如我这里有如下的一些数据 我们想实现如下搜索需求 1,搜索标题(title)包含‘小石头’的数据 2,搜索标题(title)或者描述(desc)包含‘小石头’的数据 3,...

    今天来给大家讲讲小程序的搜索功能。我这里后台数据库用的是小程序云开发的云数据库。所以我们搜索的时候就要借助云开发来实现。

    一,需求

    比如我这里有如下的一些数据

    我们想实现如下搜索需求

    • 1,搜索标题(title)包含‘小石头’的数据
    • 2,搜索标题(title)或者描述(desc)包含‘小石头’的数据
    • 3,搜索标题(title)描述(desc)都包含‘小石头’的数据

    我们知道数据库查询的时候有个where语句,但是where语句是查询某个字段全部包含你输入的内容时才可以,所以单纯用where语句来做搜索的话,结果太单一。所以我们今天就来学习下模糊搜索功能的实现。我们以上面三个需求为例,来一个个讲解。

    二,实现原理

    我们做模糊搜索的时候,其实就是查询某个字段里是否包含我们的搜索词。而模糊搜索需要借助RegExp,来看看RegExp是什么。

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Database.RegExp.html

    • 再来看看官方示例

      可能看官方示例会有点糊涂,那么我们接下来就结合具体代码来给大家做下讲解。

    三,模糊搜索的代码实现

    3-1,模糊搜索单个字段

    • 需求:搜索标题(title)包含‘小石头’的数据

    代码如下

    查询结果如下:

    可以看到我们成功的查询到了标题里包含‘小石头的数据’

    3-2,模糊搜索多个字段(满足一个即可)

    • 需求:搜索标题(title)或者描述(desc)包含‘小石头’的数据

    由于我们要查询多个字段,所以我们这里用到了command高级操作符里的or

    代码如下:

    查询结果:

    我们来分析下这两条数据

    • 1,标题和描述都包含‘小石头’,符合
    • 2,虽然标题里没有‘小石头’,但是描述里有,所以也符合。
    • 3,title和desc里都没有‘小石头’,所以不符合。

    3-3,模糊搜索多个字段(要同时满足)

    • 需求:搜索标题(title)描述(desc)都包含‘小石头’的数据

    由于我们要查询多个字段,所以我们这里用到了command高级操作符里的and

    代码如下:

    查询结果:

    我们来分析下这两条数据

    • 1,标题和描述都包含‘小石头’,符合
    • 2,虽然desc里没有‘小石头’,但是title里没有,所以也不符合。
    • 3,title和desc里都没有‘小石头’,所以也不符合。

    四,源码

    为例方便大家使用,我把完整的代码贴到这里,后面大家使用时,直接复制这里的代码,略微改造下就可以了。

        //我这里简单起见就把搜索词写死,正常应该用户输入的
        let searchKey = '小石头'
        let db = wx.cloud.database()
        let _ = db.command
    
        db.collection('news')
          .where(_.or([
            {//标题
              title: db.RegExp({ //使用正则查询,实现对搜索的模糊查询
                regexp: searchKey,
                options: 'i', //大小写不区分
              }),
            },
            {//描述
              desc: db.RegExp({
                regexp: searchKey,
                options: 'i',
              }),
            }
          ])).get()
          .then(res => {
            console.log('查询成功', res)
          })
          .catch(res => {
            console.log('查询失败', res)
          })
    

    到这里就讲完了,我后面会专门在云开发入门的课程里作为实战案例录制视频给到大家的:
    https://edu.csdn.net/course/detail/26572

    展开全文
  • 最近微信小程序需要做个搜索的功能,但是微信小程序的云开发中的数据库的查询语句中没有模糊查询这个功能【小声BB:真垃圾】,神奇的是有正则表达式这个功能,正则表达式提供以下方法 wx.cloud.init() var that=...

    最近微信小程序需要做个搜索的功能,但是微信小程序的云开发中的数据库的查询语句中没有模糊查询这个功能【小声BB:真垃圾】,神奇的是有正则表达式这个功能,正则表达式提供以下方法

     	wx.cloud.init()
        var that=this
        const db = wx.cloud.database()
        const _ = db.command
        db.collection('passage_list')
        .where(_.or([{
          title: db.RegExp({
            regexp: '.*' + '关键字',
            options: 'i',
          })
         }
        ]))
        .limit(20)
        .get({
          success:function(res){
            console.log(res.data);
          }
        })
    

    由于我这里只需要从文章标题这里搜索数据库,如果需要多字段搜索的话可以这样使用多字段

     .where(_.or([{
          title: db.RegExp({
            regexp: '.*' + '关键字',
            options: 'i',
          }),
          passage: db.RegExp({
            regexp: '.*' + '关键字',
            options: 'i',
          })
         }
     ]))
    

    展开全文
  • //连接数据库 const db = wx.cloud.database() var that = this db.collection('book').where({ //使用正则查询,实现对搜索模糊查询 name: db.RegExp({ regexp: e.detail.value, //从搜索栏中获取的value作为...

    这是效果图:在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    话不多说,上代码,js、wxml采用的是weui里的模板
    js:

    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        inputVal: '',
        inputShowed: false,
        search_list1: [],
      },
      showInput: function () {
        this.setData({
          inputShowed: true
        });
      },
      hideInput: function () {
        this.setData({
          inputVal: "",
          inputShowed: false
        });
      },
      clearInput: function () {
        this.setData({
          inputVal: ""
        });
      },
      inputTyping: function (e) {
        this.setData({
          inputVal: e.detail.value
        });
        //连接数据库
        const db = wx.cloud.database()
        var that = this
        db.collection('book').where({
          //使用正则查询,实现对搜索的模糊查询
          name: db.RegExp({
            regexp: e.detail.value,
            //从搜索栏中获取的value作为规则进行匹配。
            options: 'i',
            //大小写不区分
          }),
          
        }).limit(10).get({
          success: res => {
            console.log(res)
            that.setData({
              search_list1: res.data
            })
          }
        })
      }
      })
    

    wxml:

    <view class="page">
      <view class="page__bd">
        <view class="weui-search-bar">
          <view class="weui-search-bar__form">
            <view class="weui-search-bar__box">
              <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
              <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
              <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
                <icon type="clear" size="14"></icon>
              </view>
            </view>
            <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
              <icon class="weui-icon-search" type="search" size="14"></icon>
              <view class="weui-search-bar__text">搜索</view>
            </label>
          </view>
          <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
        </view>
        <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}" wx:for="{{search_list1}}">
          <navigator url="./book?whatbook={{item.sx}}" class="weui-cell" hover-class="weui-cell_active">
            <view class="weui-cell__bd">
              <view>书本名:{{item.name}}</view>
            </view>
          </navigator>
        </view>
      </view>
    </view>
    
    展开全文
  • 微信小程序之模糊搜索功能(云开发

    千次阅读 多人点赞 2019-07-29 13:40:22
    在此我对微信云开发模糊搜索进行了研究。搜索功能基本就是通过输入关键字查询与之相匹配的内容,并展示在页面上。目前小程序云开发还未提供模糊查询机制,因此我们只有通过正则表达式来完成云开发的模糊查询。 name:...

    一、简介:

    最近一直在通过自学,用云开发做一个二手商城项目,现在做到搜索功能了。在此我对微信云开发模糊搜索进行了研究。搜索功能基本就是通过输入关键字查询与之相匹配的内容,并展示在页面上。目前小程序云开发还未提供模糊查询机制,因此我们只有通过正则表达式来完成云开发的模糊查询。

    二、db.RegExp为正则表达式查询:

    开发文档链接:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/database/db.regexp.html
    关键代码:

    // 数据库正则对象
    db.collection('todos').where({
      description: db.RegExp({
        regexp: 'miniprogram',//miniprogram做为关键字进行匹配
        options: 'i',//不区分大小写
      })
    })
    

    三、效果图:

    在这里插入图片描述在这里插入图片描述

    四、素材图片:

    在这里插入图片描述在这里插入图片描述

    五、云数据库及项目目录:

    在这里插入图片描述在这里插入图片描述

    六、商品的模糊搜索的实现代码(云开发)

    wxml:

    <!--pages/search/search.wxml-->
    <view class="container">
      <view class="search">
        <view class="search_input">
          <input class="search_input2" placeholder='搜索商品' value='{{searchVal}}' bindconfirm="search" bindinput="input"></input>
          <image class="search_clear"  wx:if="{{ searchVal != '' }}" catchtap="clear" src="../../images/clear.png"></image>
        </view>
        <image class="search_image" src="../../images/search.png" catchtap="search"></image>
      </view>
      <scroll-view class="search_scroll" scroll-y="true">
          <view class="search_kuangjia"> 
            <view class="search_items" wx:for="{{goodList.length}}" wx:key="index">
              <view>
                <image class="search_images" src="{{goodList[index].image}}"></image>
              </view>
              <view class="wenzi">
                <view>{{goodList[index].title}}</view>
                <text class="contnet">{{goodList[index].content}}</text>
                <view class="rmb">¥{{goodList[index].rmb}}元</view>
                <view class="xiangqing">查看详情>></view>
              </view>
            </view>
          </view>
      </scroll-view>
    </view>
    

    wxss:

    /* pages/search/search.wxss */
    page{
      background: #f5f5f5;
    }
    .container {
      position: relative;
      width: 100%;
      height: 100vh;
      background-color: #fff;
      color: #939393;
    }
    .search{
      width: 100%;
      height: 10vh;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .search_input{
      position:relative;
      width: 85%;
      height: 5vh;
      background-color: white;
      border: 1px solid #dedede;
    }
    .search_input2{
      width: 90%;
      color: black;
    }
    .search_clear{
      position: absolute;
      top: 0;
      right: 5rpx;
      width: 50rpx;
      height: 50rpx;
    }
    .search_image{
      width: 50rpx;
      height: 50rpx;
    }
    .search_scroll{
      width: 100%;
      height: 90vh;
    }
    .search_kuangjia{
      width: 100%;
      padding: 3%;
    }
    .search_items{
      border-radius: 2%;
      overflow: hidden;
      width: 94%;
      height: 250rpx;
      background-color: forestgreen;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .search_images{
      height: 250rpx;
      width: 250rpx;
    }
    .wenzi{
      width: 65%;
      position: relative;
      font-size: 50rpx;
      background-color: rgb(224, 222, 224);
      height: 250rpx;
      color: black;
      text-align: center;
    }
    .contnet{
    
      height: 80rpx;
      font-size: 30rpx;
      padding-right: 30rpx;
      padding-left: 30rpx;
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      white-space: normal !important;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .rmb{
      color: red;
      position: absolute;
      bottom: 10rpx;
      left: 0;
      font-size: 40rpx;
    }
    .xiangqing{
      color: blue;
      position: absolute;
      bottom: 10rpx;
      right: 0;
      font-size: 40rpx;
    }
    

    js:

    // pages/search/search.js
    const db = wx.cloud.database();//初始化数据库
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        searchVal: "",
        //搜索过后商品列表
        goodList:[]
      },
      input(e) {
        this.setData({
          searchVal: e.detail.value
        })
        console.log(e.detail.value)
      },
      clear: function () {
        this.setData({
          searchVal: ""
        })
      },
      //商品关键字模糊搜索
      search: function () {
        wx: wx.showLoading({
          title: '加载中',
          mask: true,
          success: function (res) { },
          fail: function (res) { },
          complete: function (res) { },
        })
        //重新给数组赋值为空
        this.setData({
          'goodList': []
        })
        // 数据库正则对象
        db.collection('shoop').where({
          title: db.RegExp({
            regexp: this.data.searchVal,//做为关键字进行匹配
            options: 'i',//不区分大小写
          })
        })
        .get().then(res => {
          console.log(res.data)
          for (var i = 0; i < res.data.length; i++) {
            var title = "goodList[" + i + "].title"
            var id = "goodList[" + i + "].id"
            var image = "goodList[" + i + "].image"
            var rmb = "goodList[" + i + "].rmb"
            var content = "goodList["+ i +"].content"
            this.setData({
              [title]: res.data[i].title,
              [id]: res.data[i]._id,
              [image]: res.data[i].fileIDs[0],
              [rmb]: res.data[i].rmb,
              [content]: res.data[i].contnet,
            })
            console.log(this.data.goodList[i].content)
            wx.hideLoading();
          }
        }).catch(err => {
          console.error(err)
          wx.hideLoading();
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this
        console.log(options.searchVal)//输出其他页面传来的值
        if (options.searchVal != '') {
          console.log("不为空")
          this.setData({
            searchVal: options.searchVal
          })
          this.search();
        }else{
          console.log("为空")
          that.search();
        }
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    })
    
    展开全文
  • 最近做小程序云开发时,用到了一个数据库的模糊搜索功能,并且是要求多字段的模糊搜索。 网上也有一大堆资源,但是都是单个字段的搜索。如下图 上图只可以实现time字段的模糊搜索。但是我们如果相对数据表里的多个...
  • 微信小程序云开发模糊搜索

    千次阅读 2020-10-24 17:28:42
    以前在做前后端分离的项目时,要实现一些搜索框的模糊搜索时,运气好一点,后端攻城狮会处理好逻辑,前端只需在输入框的value值发生变化时去调用接口重新渲染...微信小程序云开发模糊搜索 可以重下面的例子看到 ...
  • 代码说明:模糊查询数据库集合(birthday),模糊匹配查询生日是否为今天 用户的生日日期格式为 1994-07-06 , 当前日期格式为 07-06 , 匹配数据库的月和日,数据库集合如图: 函数代码: // 函数入口...
  • 小程序云开发模糊查询

    万次阅读 多人点赞 2019-03-18 21:27:49
    小程序云开发模糊查询 尝试小程序云开发的时候发现小程序不能模糊查询,搜索得到如下办法; const db = wx.cloud.database(); //初始化数据库 db.collection("all").where({ // name: _name, name:{ $regex:'...
  • 比如想要在数据库中查找Java 相关书籍, 输入java ,书名中有JAVA,xxxjavaxxx,...但是小程序没有提供这种模糊搜索的封装,请问怎么实现 全部查询下来再提取的方式就不要说了,数据量没那么小。
  • // 首先是对数据库中单个字段进行模糊搜索 db.collection('user').where({ //knowledgelabel 是集合user中数据所有的字段 knowledgelabel: { //此处拿的是写在函数中的代码,event.knowledgelabel是前端页面...
  • 最近做小程序云开发,做一个多字段搜索功能; 本人不会,然后找了一个很牛笔的回答!特此做笔记,以备他日所用! 看完后清楚明了! 下面是对应的跳转链接 ...小石头牛笔!...下面是我改后的代码!...先给大家看看我做出的效果...
  • 小程序云开发实现搜索功能

    千次阅读 2020-05-14 10:46:00
    云开发数据库的模糊搜索,根据记录的字段字符串模糊搜索实现。 代码: 先在app.js初始化: //app.js App({ onLaunch: function () { wx.cloud.init({ env:'school-5k17122' }) }, globalData: { userInfo...
  • //连接数据库 const db = wx.cloud.database() ...//使用正则查询,实现对搜索模糊查询 _name: db.RegExp({ regexp: value, //从搜索栏中获取的value作为规则进行匹配。 options: ‘i’, //大小写不区分 }) }).get...
  • 微信小程序开发——云开发如何实现模糊查询

    万次阅读 多人点赞 2019-02-19 20:36:07
    最近在学习开发微信小程序,使用的云开发这种模式,有一个搜索功能基本就是通过输入关键字查询与之相匹配的内容,并展示在页面上。然而对于现在的云开发这种模式小程序好像还没提供一种类似模糊查询的机制,那我们...
  • 代码自用自取,复制粘贴直接使用,喜欢的话可以查看博主其它文章...微信小程序云开发为我们提供了很完美的接口实现模糊查询。 先亮代码: WXML: <input bindinput="search"></input> <button bindtap=".

空空如也

空空如也

1 2 3 4
收藏数 70
精华内容 28
关键字:

云开发模糊搜索