本篇内容介绍了“微信小程序云开发怎么实现搜索功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
简单搜索功能实现
WXML代码段
<view class="sousuokuang"> <view class="sousuo"> <view class="shurukuang"> <input type="text" placeholder="搜索" value="" bindinput="GetSearchInput"></input> </view> <view class="sousuo_anniu" bindtap="ToSearch"> <text>搜索</text> <icon type="search" size="20"></icon> </view> </view></view>WXSS代码段
.sousuokuang { width: 100%; height: 100rpx; display: flex; flex-direction: column; align-items: center; background-color: white;}.sousuo { width: 92%; height: 100rpx; display: flex; flex-direction: row; align-items: center; justify-items: center;}.shurukuang { width: 80%; height: 64rpx; border-radius: 32rpx; display: flex; align-items: center; justify-content: center; background-color: #f6f6f6;}.shurukuang input { width: 90%; height: 100%; font-size: 32rpx;}.sousuo_anniu { width: 20%; height: 64rpx; display: flex; align-items: center; justify-content: center;}.sousuo_anniu text { font-size: 30rpx;}JavaScript代码段
const db = wx.cloud.database()Page({ data: { search: '' }, onLoad: function (options) { }, GetSearchInput: function(e) { this.setData({ search: e.detail.value }) }, ToSearch: function(e) { if(this.data.search == '') { wx.showToast({ title: '请输入', icon: 'none' }) return } db.collection('输入你查询的表名').where({ name: this.data.search }).get().then(res => { if(res.data.length != 0) { this.setData({ shangpinbiao: res.data }) }else { wx.showToast({ title: '未找到商品', icon: 'none' }) } }) },})模糊搜索功能实现
WXML代码段和WXSS代码段跟简单搜索的一样，JavaScript代码段如下
Javascript代码段
const db = wx.cloud.database()Page({ data: { search: '' }, onLoad: function (options) { }, GetSearchInput: function (e) { this.setData({ search: e.detail.value }) }, ToSearch: function (e) { if (this.data.search == '') { wx.showToast({ title: '请输入', icon: 'none' }) return } db.collection('输入你查询的表名').where({ name: db.RegExp({ regexp: this.data.search, options: 'i', }), }).get().then(res => { if (res.data.length != 0) { this.setData({ shangpinbiao: res.data }) } else { wx.showToast({ title: '未找到', icon: 'none' }) } }) },})
“微信小程序云开发怎么实现搜索功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
