微信小程序首页的分类功能和搜索功能的实现思路及代码详解

我们来详细讲解“微信小程序首页的分类功能和搜索功能的实现思路及代码详解”的攻略。

一、实现思路

微信小程序的首页分类功能和搜索功能，需要依赖后台数据来实现。具体思路如下：

1. 分类功能

1. 后台准备好分类数据并提供接口；
2. 小程序获取后台数据，动态生成分类导航栏；
3. 点击导航栏上的分类按钮，将分类信息作为参数传递给后台；
4. 后台根据分类参数查询对应数据，并将结果返回给小程序；
5. 小程序将查询结果展示在页面中，完成分类功能。

2. 搜索功能

1. 后台准备好查询数据并提供接口；
2. 在小程序中提供搜索框和相应事件响应函数；
3. 输入关键字后，将关键字作为参数传递给后台；
4. 后台根据关键字参数查询对应数据，并将结果返回给小程序；
5. 小程序将查询结果展示在页面中，完成搜索功能。

二、代码详解

下面我们来看一下两个示例：

1. 分类功能

假设后台提供了一个分类接口/categories，返回如下格式的数据：

[
  {"id": 1, "name": "手机"},
  {"id": 2, "name": "电脑"},
  {"id": 3, "name": "相机"}
]

在小程序页面中，我们可以使用wx.request方法请求后台数据，然后动态生成分类导航栏。具体代码如下：

<view class="nav">
  <block wx:for="{{categories}}" wx:key="id">
    <view class="nav-item" bindtap="onClickCategory" data-id="{{item.id}}">{{item.name}}</view>
  </block>
</view>

Page({
  data: {
    categories: []
  },
  onLoad: function () {
    wx.request({
      url: '/categories',
      success: (res) => {
        this.setData({categories: res.data})
      }
    })
  },
  onClickCategory: function (event) {
    wx.request({
      url: '/products',
      data: {category_id: event.currentTarget.dataset.id},
      success: (res) => {
        // TODO: 将查询结果展示在页面中
      }
    })
  }
})

上述代码中，我们通过wx:for指令将获取到的分类数据动态生成了一个导航栏。当用户点击某个分类时，我们通过bindtap指令触发onClickCategory方法，并将该分类的id作为数据传递给该方法。在该方法中，我们使用wx.request方法向后台发送一个products的查询请求，并将当前点击的分类id作为参数传递给后台。后台根据该参数查询对应的商品数据，并将查询结果返回给小程序。

2. 搜索功能

假设后台提供了一个查询接口/search，返回如下格式的数据：

[
  {"id": 1, "name": "华为P40", "price": 3999},
  {"id": 2, "name": "小米10", "price": 3499},
  {"id": 3, "name": "iPhone12", "price": 6999},
  {"id": 4, "name": "ThinkPad X1", "price": 8999},
  {"id": 5, "name": "富士X-T4", "price": 8399}
]

在小程序页面中，我们可以使用<input>标签创建一个搜索框，并通过bindinput指令绑定一个响应函数。当用户输入搜索关键字后，我们通过wx.request方法向后台发送一个search的查询请求，并将关键字作为参数传递给后台。后台根据该关键字查询对应的商品数据，并将查询结果返回给小程序。具体代码如下：

<view class="search">
  <input class="search-input" type="text" placeholder="请输入关键字" bindinput="onSearch"/>
</view>
<view class="product-list">
  <block wx:for="{{products}}" wx:key="id">
    <view class="product-item">{{item.name}}（{{item.price}}元）</view>
  </block>
</view>

Page({
  data: {
    products: []
  },
  onSearch: function (event) {
    wx.request({
      url: '/search',
      data: {keyword: event.detail.value},
      success: (res) => {
        this.setData({products: res.data})
      }
    })
  }
})

在上述代码中，我们通过<input>标签创建了一个搜索框，并通过bindinput指令绑定了onSearch方法。当用户输入关键字时，该方法会被触发，并向后台发送一个search的查询请求。在查询成功后，我们将查询结果赋值给products数组，并在页面中展示查询结果。