项目中遇到一个搜索商品的功能，商品数据是储存在云开发中的集合里面的，所以要进行搜索，必须要先对集合进行查询，话不多说，直接上代码，
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}}" wx:key="index" wx:for-item='item'>
<view>
<image class="search_images" src="{{goodList[index].img_url}}"></image>
</view>
<view class="wenzi">
<view>{{goodList[index].contents}}</view>
<text class="contnet">{{goodList[index].content}}</text>
<view class="rmb">￥{{goodList[index].price}}元</view>
<view class="cart">+购物车</view>
</view>
</view>
</view>
</scroll-view>
</view>
wxss
page{
background: #f5f5f5;
}
.container {
position: relative;
100%;
height: 100vh;
background-color: #fff;
color: #939393;
}
.search{
100%;
height: 10vh;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: space-around;
}
.search_input{
position:relative;
85%;
height: 5vh;
background-color: white;
border: 1px solid #dedede;
}
.search_input2{
90%;
color: black;
}
.search_clear{
position: absolute;
top: 0;
right: 5rpx;
50rpx;
height: 50rpx;
}
.search_image{
50rpx;
height: 50rpx;
}
.search_scroll{
100%;
height: 90vh;
}
.search_kuangjia{
100%;
padding: 3%;
}
.search_items{
border-radius: 2%;
overflow: hidden;
94%;
height: 250rpx;
background-color: forestgreen;
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.search_images{
height: 250rpx;
250rpx;
}
.wenzi{
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;
}
.cart{
color: blue;
position: absolute;
bottom: 10rpx;
right: 0;
font-size: 40rpx;
}
js
const db = wx.cloud.database();//初始化数据库
Page({
data: {
//定义一个空字符串 要搜索的字符
searchVal: "",
//搜索过后商品列表
goodList: []
},
//通过inputTap方法获取输入值
input(even) {
//把输入的值设置为要搜索的字符
this.setData({
searchVal: even.detail.value
})
//console.log(searchVal)
},
//当输入框不为空的时候 显示可清除输入图片
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('plant').where({
contents: 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 contents = "goodList[" + i + "].contents"
var id = "goodList[" + i + "].id"
var img_url = "goodList[" + i + "].img_url"
var price = "goodList[" + i + "].price"
var buy_num = "goodList[" + i + "].buy_num"
this.setData({
[contents]: res.data[i].contents,
[id]: res.data[i]._id,
[img_url]: res.data[i].img_url,
[price]: res.data[i].price,
[buy_num]: res.data[i].buy_num,
})
//console.log(this.data.goodList[i].contents)
wx.hideLoading();
}
}).catch(err => {
console.error(err)
wx.hideLoading();
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
//输出其他页面传来的值
//console.log(options.searchVal)
if (this.data.searchVal != ' ') {
//console.log(searchVal)
this.setData({
searchVal: that.data.searchVal
})
this.search();
} else {
console.log("为空")
//that.search();
}
},
})
云开发集合数据结构如下
需要注意的是，商品的信息在数据库里面的规划问题，这里搜索只能搜索一个集合，如果商品分类比较多的话，建议给不同的商品添加一个专属字段，方便查询的时候，多一个查找条件。
如果分开多个集合的话，不知道小程序有没有连表查询的功能，因为还没有用到，所以暂时没有研究，需要的小伙伴可以百度一下，欢迎把查询的结果评论分享一波。