微信小程序搜索功能(附：小程序前端+PHP后端)

下面我详细讲解“微信小程序搜索功能(附：小程序前端+PHP后端)”的完整攻略。

一、前言

微信小程序搜索功能是小程序中很重要的一部分，很多小程序都需要实现搜索功能。本文将完整地展示如何在微信小程序中实现搜索功能，包括小程序前端和PHP后端。

二、小程序前端实现

小程序前端使用wxml、wxss、js和微信开发者工具进行开发。首先，我们要在小程序的.wxml文件中添加一个搜索框输入组件，代码如下：

<!-- 搜索框 -->
<view class="search-box">
  <view class="search-icon"></view>
  <input class="search-input" placeholder="请输入关键词" 
    bindblur="onInputBlur"
    bindconfirm="onInputConfirm" 
    bindinput="onInputChanged"
    value="{{keyword}}"
    focus="{{focus}}"
  />
</view>

上面的代码定义了一个搜索框，包含一个放置搜索图标的 div 元素和一个 input 输入框。其中，bindblur、bindconfirm、bindinput和focus都是 input 组件的属性，分别表示失去焦点时的事件、确认搜索时的事件、输入变化时的事件和是否自动聚焦。还定义一个关键词输入框的值keyword，后面我们会用到。

接下来，在.wxml文件中实现搜索结果列表，代码如下：

<!-- 搜索结果列表 -->
<scroll-view class="search-results" style="height: 100%;">
  <block wx:if="{{searching}}">
    <view wx:if="{{searchResult.length > 0}}">
      <view wx:for="{{searchResult}}" wx:key="{{index}}" 
        bindtap="onSearchItemClick" data-index="{{index}}" >
        <view class="search-result-item">
          <view class="search-result-title">{{item.title}}</view>
          <view class="search-result-time">{{item.time}}</view>
          <view class="search-result-content">{{item.content}}</view>
        </view>
      </view>
    </view>
    <view wx:else>
      <view class="no-result-tip">暂无搜索结果！</view>
    </view>
  </block>
</scroll-view>

上面的代码定义了一个scroll-view滚动区域，用于显示搜索结果。由于可能有多个结果，需要使用wx:for循环来渲染结果列表。在搜索结果中，我们需要显示标题、时间和内容等信息，都用view元素进行排版。

除此之外，还需在.js文件中编写搜索框的逻辑代码和网络请求代码，大致代码如下：

Page({
  data: {
    keyword: "",
    focus: true,
    searchResult: [],
    searching: false
  },

  // 搜索关键词处理
  onInputChanged(e) {
    this.setData({
      keyword: e.detail.value
    })
  },

  // 处理输入框失去焦点事件
  onInputBlur() {
    console.log(`失去焦点，当前输入的关键词是：${this.data.keyword}`);
  },

  // 处理输入框确认搜索事件
  onInputConfirm() {
    console.log(`确认搜索，当前输入的关键词是：${this.data.keyword}`);
    this.search();
  },

  // 执行网络请求获取搜索结果
  search() {
    if (this.data.keyword === "") {
      wx.showToast({
        title: '请输入搜索关键词',
        icon: 'none'
      });
      return;
    }
    this.setData({
      searching: true
    });
    wx.request({
      url: 'http://yourdomain.com/search.php',
      data: {
        keyword: this.data.keyword
      },
      success: res => {
        console.log(res.data);
        this.setData({
          searchResult: res.data,
          searching: false
        });
      },
      fail: () => {
        wx.showToast({
          title: '网络请求失败',
          icon: 'none'
        });
        this.setData({
          searching: false
        });
      }
    })
  }
})

上面的代码实现了搜索框的关键词处理、输入框失去焦点事件、输入框确认搜索事件和搜索网络请求等逻辑代码。需要注意的是，具体的网络请求需要根据自己的后端接口进行实现。

三、PHP后端实现

在上面的前端代码中，我们已经准备好了搜索关键词向后端发送的请求。后端接收到请求后，需要根据请求中的关键词进行数据库查询，并将查询到的结果封装成json格式返回给前端。

这里我们使用PHP语言来实现后端接口，我们可以使用PDO操作MySQL数据库。示例代码如下：

<?php

// 接收post请求中的keyword参数
$keyword = $_POST['keyword'];

// PDO连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=test;charset=utf8mb4', 'root', '123456');

// PDO执行查询操作
$sth = $pdo->prepare("SELECT * FROM `article` WHERE `title` LIKE :keyword OR `content` LIKE :keyword ORDER BY `time` DESC");
$sth->bindValue(':keyword', "%$keyword%");
$sth->execute();

// 将PDO查询结果转化为纯数组
$rows = $sth->fetchAll(PDO::FETCH_ASSOC);

// 将查询结果封装成json格式返回给前端
header('Content-Type:application/json; charset=utf-8');
echo json_encode($rows, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT);

上面的代码实现了根据关键词从MySQL数据库中查询相应数据并返回json格式数据的后端接口。其中，PDO接口的使用可以参考PHP官方文档。

四、示例说明

我们可以通过一个简单的示例来说明搜索功能的实现过程。

假设我们的小程序是一个新闻阅读应用程序，需要实现搜索功能。我们可以定义一个articles表来保存新闻信息，表结构如下：

CREATE TABLE `article` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL COMMENT '新闻标题',
  `content` text NOT NULL COMMENT '新闻内容',
  `time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '发布时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='新闻文章表';

在小程序前端，我们可以使用上述的.wxml、.wxss和.js代码来实现搜索功能。在PHP后端，我们可以编写search.php文件来实现根据关键词搜索新闻的接口。

如果需要引入第三方工具库例如jquery,underscore等，按照微信官方文档从小程序后台管理-开发设置-开发工具设置中的“全局配置”栏目进行配置即可。