E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序搜索,微信小程序之模糊搜索功能云开发
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏