微信小程序搜索框组件：使用简单、文档注释详细、简洁美观（删除微信小程序搜索框常用小程序）

微信小程序搜索框组件：使用简单、文档注释详细、简洁美观（删除微信小程序搜索框常用小程序）

wsSearchView

该搜索框组件基于开源项目wxSearch 进行了改进，主要有以下几个修改点：

增加了注释，修改了一些bug，项目可以跑起来。为了解决搜索框和输入法界面重叠的问题，将搜索组件作为一个独立的页面。修改了界面样式，更加美观。减少了暴露接口，复杂性更低。

QuickStart

拷贝项目根目录的wxSearchView文件夹到你项目的根目录下（也可以其它位置）。在你的wxss文件里导入组件的样式（文件位置为相对位置）：

@import "../../wxSearchView/wxSearchView.wxss";

在你的wxml文件里导入组件（文件位置为相对位置）：

在你的js文件里面添加以下代码,主要包括以下5个部分：

导入js文件搜索栏初始化转发函数搜索回调函数返回回调函数

说明

回调函数

为了方便调用，提高开发效率，组件实际上只是提供了两个回调接口，开发者也只需要提供这两个函数，介绍如下：

mySearchFunction: function (value) { // do your job here }

myGobackFunction: function () { // do your job here }

页面关系

为了避免输入法遮挡的影响，该组件适合放在一个独立的搜索页面中。该搜索页面与其他页面间的关系如下图所示：

搜索入口：搜索页面需要一个导入的入口，这个入口可以是一个搜索框，也可以是一些搜索按钮。在本项目中，搜索入口页面是index页面，搜索入口是一个搜索框。搜索页面：搜索组件是放在搜索页面中的，直接按照QuickStart中的描述导入即可。搜索页面可以通过返回回调函数跳转到之前的页面中去，可以通过搜索回调函数跳转到具体展示结果的页面中去。在本项目中，搜索页面是search页面，开发者可以进行参考或直接拷贝。搜索结果：搜索结果页面根据搜索页面传递过来的参数展示搜索结果。本项目中，为了简单，将搜索入口和搜索结果统一成一个index页面，开发者可以参考index页面中onLoad函数来查看参数如何获取。

界面修改位置

为了提高开发者的开发效率，下表列出了一些常用修改的位置。

响应事件

本组件在设计的时候，实际只提供了两个回调接口：搜索和返回。如果开发者需要响应一些其它事件，可以参考组件js的导出接口，如下所示。

帮助理解

如果对微信中模块的提供方式不是很清楚的话，可以参考我之前的一篇介绍文章：《微信小程序模块组件开发》。本项目提供了一个使用demo，但是没有涉及到具体查询情况，更加完整的使用过程可以参考：天气预报小程序。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。