项目中遇到一个搜索商品的功能,商品数据是储存在云开发中的集合里面的,所以要进行搜索,必须要先对集合进行查询,话不多说,直接上代码,
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(); } }, })
云开发集合数据结构如下
需要注意的是,商品的信息在数据库里面的规划问题,这里搜索只能搜索一个集合,如果商品分类比较多的话,建议给不同的商品添加一个专属字段,方便查询的时候,多一个查找条件。
如果分开多个集合的话,不知道小程序有没有连表查询的功能,因为还没有用到,所以暂时没有研究,需要的小伙伴可以百度一下,欢迎把查询的结果评论分享一波。