微信小程序之模糊搜索功能（云开发）

一、简介：

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

二、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 () {

  },
})