下面我详细讲解“微信小程序搜索功能(附:小程序前端+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技术站