微信小程序的出现为用户提供了一个快速、方便的购物方式。然而，随着商品数量的增加，用户可能会面临一种情况：很难找到自己感兴趣的商品。为了解决这个问题，我们可以开发一个商品搜索与筛选功能，帮助用户更快捷地找到所需商品。
搜索功能
搜索功能是一个必备的功能，它允许用户通过关键词查找商品。以下是一个简单的示例代码：
// app.js
App({
onLaunch: function() {
...
},
// 关键词搜索
searchProduct: function(keyword) {
// 调用后台接口，传入关键词进行搜索
// 接收搜索结果并展示
},
})
<!-- search.wxml -->
<view>
<input placeholder="请输入关键词" bindinput="inputKeyword" />
<button bindtap="search">搜索</button>
</view>
// search.js
Page({
inputKeyword: function(e) {
this.setData({
keyword: e.detail.value
})
},
search: function() {
const app = getApp()
const keyword = this.data.keyword
app.searchProduct(keyword)
}
})
用户可以在搜索框中输入关键词，然后点击搜索按钮。应用程序会将关键词传递给后台接口进行搜索，并将搜索结果展示给用户。
筛选功能
除了搜索功能之外，筛选功能也是十分重要的。它可以让用户根据自己的需求快速缩小商品范围，找到符合自己要求的商品。以下是一个简单的示例代码：
// app.js
App({
onLaunch: function () {
...
},
// 筛选商品
filterProduct: function (filterOptions) {
// 调用后台接口，传入筛选条件进行商品筛选
// 接收筛选结果并展示
},
})
<!-- filter.wxml -->
<view>
<label>价格：</label>
<input placeholder="最低价" bindinput="inputMinPrice" />
<input placeholder="最高价" bindinput="inputMaxPrice" />
<button bindtap="filter">筛选</button>
</view>
// filter.js
Page({
inputMinPrice: function (e) {
this.setData({
minPrice: e.detail.value
})
},
inputMaxPrice: function (e) {
this.setData({
maxPrice: e.detail.value
})
},
filter: function () {
const app = getApp()
const minPrice = this.data.minPrice
const maxPrice = this.data.maxPrice
const filterOptions = {
minPrice: minPrice,
maxPrice: maxPrice
}
app.filterProduct(filterOptions)
}
})
用户可以在输入框中输入最低价和最高价，并点击筛选按钮。应用程序将筛选条件传递给后台接口进行商品筛选，并将筛选结果展示给用户。
以上就是微信小程序的商品搜索与筛选功能的简单示例。当然，根据实际需求，我们可以扩展这些功能，比如增加商品分类、排序等选项，以提供更加丰富的购物体验。
本文来自极简博客，作者：梦幻星辰，转载请注明原文链接：微信小程序商品搜索与筛选功能
