1. 前言
小程序是一种轻量化的应用类型，经常使用的搜索框组件是开发小程序时常用的一种组件。本文将手把手教你如何在小程序中开发一个搜索输入框组件。本篇文章的目标读者是已经掌握小程序开发基础知识的开发者。
2. 准备工作
在开始开发之前，我们需要准备以下工作：
2.1. 创建小程序项目
使用微信开发者工具创建一个新项目，选择小程序类型，填写相关信息即可。
2.2. 创建搜索输入框组件
在项目的 components 文件夹下创建一个新的组件文件夹，命名为 search-box。在该文件夹下创建以下文件：
search-box.wxml
search-box.wxss
search-box.js
search-box.json
3. 编写搜索输入框组件
3.1. 编写 search-box.wxml 文件
在 search-box.wxml 文件中，我们需要编写一个搜索输入框。
<!-- search-box.wxml -->
<view class="search-box">
<input class="search-input" type="text" placeholder="请输入搜索内容" bindinput="onInput" />
</view>
在这里，我们使用了一个 view 容器包裹了一个 input 输入框。给 input 绑定了一个 onInput 方法，用于监听用户输入事件。
3.2. 编写 search-box.wxss 文件
在 search-box.wxss 文件中，我们对 search-box.wxml 文件中的搜索输入框进行样式设置。
/* search-box.wxss */
.search-box {
display: flex;
justify-content: center;
align-items: center;
height: 60rpx;
}
.search-input {
height: 50rpx;
width: 100%;
background-color: #f0f2f5;
border: none;
border-radius: 50rpx;
padding: 0 20rpx;
outline: none;
}
.search-input::placeholder {
color: #999999;
}
在这里，我们使用了 flex 布局，使 input 输入框水平居中。
3.3. 编写 search-box.js 文件
在 search-box.js 文件中，我们需要实现一个 onInput 方法，用于监听用户输入事件，将用户输入的值传递给父组件。
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
onInput(event) {
const query = event.detail.value
this.triggerEvent('search', { query })
}
}
})
在这里，我们使用了 triggerEvent 方法，将用户输入的值传递给父组件。
3.4. 编写 search-box.json 文件
在 search-box.json 文件中，我们需要对组件进行配置。
{
"component": true,
"usingComponents": {}
}
在这里，我们将 component 属性设置为 true，表示这是一个组件。同时，我们将 usingComponents 属性设置为空对象，表示该组件没有引入其他组件。
4. 在页面中使用搜索输入框组件
在 pages 文件夹下创建一个新的页面 search，页面的目标是使用刚才创建的搜索输入框组件，在该页面中展示搜索结果。
4.1. 创建 search 页面
在 pages 文件夹下创建 search 文件夹，创建以下文件：
search.wxml
search.wxss
search.js
search.json
在 search.wxml 文件中，我们需要引入刚才创建的 search-box 组件。
<!-- search.wxml -->
<view class="search-page">
<search-box bind:search="onSearch" />
<view class="search-result">
<!-- 展示搜索结果 -->
</view>
</view>
在这里，我们引入了 search-box 组件，并将 onSearch 方法绑定到 search-box 组件的 search 事件上，用于监听用户输入事件并展示搜索结果。
4.2. 编写 search.wxss 文件
在 search.wxss 文件中，我们对 search 页面进行样式设置。
4.3. 编写 search.js 文件
在 search.js 文件中，我们需要实现一个 onSearch 方法，用于监听 search-box 组件的 search 事件，并调用接口获取搜索结果。
Page({
data: {
searchResult: []
},
onSearch(event) {
const query = event.detail.query
this.doSearch(query)
},
doSearch(query) {
/* 调用接口获取搜索结果，并将搜索结果存储到 this.data.searchResult 中 */
}
})
在这里，我们使用了 data 属性，存储了搜索结果。
5. 总结
本文简单介绍了在小程序中开发一个搜索输入框组件，并在页面中使用该组件实现搜索功能。实际开发中，我们还可以对搜索结果进行分页、排序等操作，增强用户体验。