微信云开发小程序正则查询实现模糊搜索云数据库中的数据

偏执的太偏执、 2022-08-30 04:08 159阅读 0赞

# 实现微信小程序模糊搜索功能 #

利用正则查询实现模糊查询，并将云数据库中的查询结果显示。

--------------------

下面例子是查询文章，仅供参考。

# 一、云数据库准备 #

1、首先需要在云数据库中建立一个表格，包含文章名字和文章图片编号。然后还需要上传文章封面。为了简便，我将文章的编号和封面图片对应，0的图片是查询失败时输出的404图片，可以更改，其他1234是文章序号对应的封面。  
![文章封面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70 1]  
查询成功时：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70 2]

查询失败时：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70 3]

2、需要要连接云数据库

env这一栏是你的云数据库环境id，在云开发控制台的设置中可以看到自己的环境id

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70 4]

app.js：

App({ 
      onLaunch() { 
        wx.cloud.init({ 
          env:'cloud1-8ggdb01rcc7374fd'
        })
      },
    })

# 二、搜索框 #

搜索框样式就不多介绍了，样子如图，可自行修改  
![搜索框][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70 5]  
实现代码如下：  
index.wxml：

<form bindsubmit='search'>
      <view class="search_bar_out">
          <view class="search_bar_in">
            <view class="search_box">           
              <icon class="search_icon_in" type="search" size="14"></icon>
              <input type="text" class="search_input" placeholder="请输入搜索内容" name='name'></input>
            </view>
          </view>
    
        <button class="search_btn" style="width:88px;height:35px" form-type="submit">搜索</button>
      </view>
    </form>
    
    <view wx:for="{ {no}}" wx:key="key">
      <view class="background">
        <view class="picture_view" bindtap="jump" data-id="{ {item}}">
          <image src="cloud://cloud1-8ggdb01rcc7374fd.636c-cloud1-8ggdb01rcc7374fd-1306175913/Article/{ {item}}.jpg"style="width:380px;height:200px" ></image>
          <view class="picture_text">{ { name[index]}}</view>
        </view>
      </view>
    </view>

index.wxss：

/*聊天框外部*/
    .search_bar_out{ 
      position: relative;
      padding: 8px 10px;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      box-sizing: border-box;
      background-color: #f7f4f4;        
      border-top: 1rpx solid #fdfdfd;
      border-bottom: 1rpx solid #D7D6DC;
    }
    
    /*聊天框内部搜索图标*/
    .search_icon_in{ 
      position: absolute;
      left: 10px;
      top: 7px;
    }
    
    /*聊天框内部*/
    .search_bar_in { 
      position: relative;
      flex: auto;
      border-radius: 5px;
      background: #ffffff;
      border: 1rpx solid #E6E6EA;
    }
    
    /*聊天框内部状态*/
    .search_box { 
      position: relative;
      padding-left: 30px;
      padding-right: 30px;
      width: 100%;
      box-sizing: border-box;
      z-index: 1;
    }
    
    /*搜索框内文字*/
    .search_input { 
      height: 28px;
      line-height: 28px;
      font-size: 14px;
    }
    
    /*搜索按钮*/
    .search_btn { 
      color: #5dbe5a;
      font-size: 13px;
      background-color: transparent;
      border: none;
    }
    
    /**文章框**/
    .background{ 
      background-color: rgb(243, 243, 243);
    }
    .picture_view{ 
      background-color: rgb(255, 255, 255);
      justify-content: center;
      margin-left: 17px;
      margin-right: 17px;
    }
    .picture_text{ 
      box-sizing:border-box;
      padding: 10px;
    }

# 三、JS #

Jump函数里的跳转链接我已经删除，可以自行设置跳转。这个注释已经表明作用了，应该能看懂吧。我实现同步更新数据，为了简单用了setTimeout来删除数据，函数也有点乱，可以自行优化一下O(∩\_∩)O~  
index.js：

--------------------

# 总结 #

以上就是今天要讲的内容，本文仅仅简单实现了模糊搜索功能，缺点还有很多，方法可以作为参考。

## 新的改变 ##

最近做了一个展示类的小程序，这个模糊搜索就是其中的功能，大家如果感兴趣可以关注一下，我会更新这个小程序所有功能，包括前端。小程序的名字叫淘湖，第一次做小程序，查询了不少例子才完成的，希望大家多多包涵O(∩\_∩)O~。

**文章未经同意不能转载！！！**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70]: /images/20220829/11d16f5373114150a22bf21352ec84a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70 1]: /images/20220829/44e18aec106340e5bedbb6644e289696.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70 2]: /images/20220829/edd5e68b0d8041169c0cefed034ba310.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70 3]: /images/20220829/bf74ad3c814f49a1a76bc88592c1f5ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70 4]: /images/20220829/ce250c875fa84374ab94800dbc3f172e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0REREhMXw_size_16_color_FFFFFF_t_70 5]: /images/20220829/9fb09ddd6f77464d84137fc59b96268b.png