微信小程序> 微信小程序搜索,微信小程序之模糊搜索功能云开发

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

浏览量:1212 时间: 来源:Memory沙漏
一、简介:最近一直在通过自学,用云开发做一个二手商城项目,现在做到搜索功能了。在此我对微信云开发模糊搜索进行了研究。搜索功能基本就是通过输入关键字查询与之相匹配的内容,并展示在页面上。目前小程序云开发还未提供模糊查询机制,因此我们只有通过正则表达式来完成云开发的模糊查询。
二、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--viewviewviewinputplaceholder='搜索商品'value='{{searchVal}}'bindconfirm="search"bindinput="input"/inputimagewx:if="{{searchVal!=''}}"catchtap="clear"src="../../images/clear.png"/image/viewimagesrc="../../images/search.png"catchtap="search"/image/viewscroll-viewscroll-y="true"viewviewwx:for="{{goodList.length}}"wx:key="index"viewimagesrc="{{goodList[index].image}}"/image/viewviewview{{goodList[index].title}}/viewtext{{goodList[index].content}}/textview¥{{goodList[index].rmb}}元/viewview查看详情/view/view/view/view/scroll-view/viewwxss:/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:1pxsolid#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.jsconstdb=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(vari=0;ires.data.length;i++){vartitle="goodList["+i+"].title"varid="goodList["+i+"].id"varimage="goodList["+i+"].image"varrmb="goodList["+i+"].rmb"varcontent="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){varthat=thisconsole.log(options.searchVal)//输出其他页面传来的值if(options.searchVal!=''){console.log("不为空")this.setData({searchVal:options.searchVal})this.search();}else{console.log("为空")that.search();}},/生命周期函数--监听页面显示/onShow:function(){},})

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎