微信小程序搜索功能(附:小程序前端+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等,按照微信官方文档从小程序后台管理-开发设置-开发工具设置中的“全局配置”栏目进行配置即可。

五、总结

本文完整地介绍了微信小程序搜索功能的实现方法,包括前端的搜索框实现、搜索结果列表渲染和网络请求处理等代码,以及后端的数据查询和json格式数据返回等接口代码。通过本文的学习,读者可以掌握微信小程序搜索功能的实现方法,深入了解微信小程序的开发和应用。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序搜索功能(附:小程序前端+PHP后端) - Python技术站

(0)
上一篇 2023年5月23日
下一篇 2023年5月23日

相关文章

  • PHP中将字符串转化为整数(int) intval() printf() 性能测试

    转化字符串为整数的方法 在 PHP 中,将字符串转化为整数有很多方法,其中最常见的是 intval() 函数。 // 使用 intval() 将字符串转化为整数 $str = "1234"; $num = intval($str); echo $num; // 输出 1234 注意,intval() 函数还可以接收一个可选的参数,表示转换…

    PHP 2023年5月26日
    00
  • 浅谈PHP设计模式的建造者模式

    简介: 建造者模式,又称之为生成器模式,属于创建型的设计模式。将一个复杂对象的构建,与它的表示分离,使得同样的构建过程可以创建不同的表示。 适用场景: 用于创建一些复杂的对象,这些对象内部构建间的建造顺序通常是稳定的(这就表名可以抽离),但对象的外在面临着复杂的变化。 优点: 创建和表象分离 缺点: 如果核心类内部发生变化,建造者也要相应修改与工厂模式:比工…

    PHP 2023年4月18日
    00
  • 微信小程序 input表单与redio及下拉列表的使用实例

    我来为你详细讲解 “微信小程序 input表单与redio及下拉列表的使用实例”的完整攻略。 1. input表单的使用 下面是一个简单的 input 表单示例: <view class="form-item"> <view class="form-item-label">姓名</view…

    PHP 2023年5月30日
    00
  • php的declare命令及用法详解

    下面就为您详细讲解一下PHP的declare命令及用法。 什么是declare命令? 针对PHP5.3以上版本,PHP引入了declare语句,通常称为declare命令。它可以让我们在PHP中开启和关闭一些指定的扩展。 声明语法 declare (directive) 其中directive可以理解为是php.ini配置文件中的一些指令,它可以是下列四个之…

    PHP 2023年5月25日
    00
  • php 删除数组元素

    删除数组元素是PHP常见的数组操作之一,可通过内置函数unset()来实现。 unset()函数 unset()函数用于删除指定数组元素,语法如下: unset($array[index]); 其中,$array表示要删除元素的数组,index表示要删除的元素的下标。 示例一: 下面的代码演示了如何使用unset()函数删除指定的数组元素: //创建数组 $…

    PHP 2023年5月26日
    00
  • PHP长连接实现与使用方法详解

    下面是针对“PHP长连接实现与使用方法详解”的完整攻略。 什么是长连接? 在传统的服务器与客户端通信中,每次 HTTP 请求的发起,都会涉及到 TCP 连接的建立和断开,这种连接机制最为常见,被称为短连接。 而所谓长连接,则是指在一次 HTTP 请求结束后,服务端不会立刻断开 TCP 连接,而是保持连接,随时等待客户端发起下一次请求。在这段时间里,任何一次新…

    PHP 2023年5月23日
    00
  • PHP中的print_r 与 var_dump 输出数组

    当我们在编写 PHP 程序时,经常遇到需要查看数组中保存的数据信息的情形。这时我们可以使用 PHP 提供的两种函数 print_r() 和 var_dump() 来输出数组,并且以不同形式显示详细的数组信息。 print_r 使用方法 print_r() 函数可以打印格式化后的数据,不仅可以用于数组,还可以用于对象等其他类型的数据。 mixed print_…

    PHP 2023年5月26日
    00
  • PHP fopen函数用法实例讲解

    PHP fopen函数用法实例讲解 1. fopen函数是什么? fopen函数是PHP中使用最多的函数之一,用于打开文件,可以实现文件的读取、写入、创建等操作。 2. fopen函数用法 fopen函数的用法如下: resource fopen ( string $filename , string $mode [, bool $use_include_p…

    PHP 2023年5月26日
    00
合作推广
合作推广
分享本页
返回顶部