微信小程序搜索框组件:使用简单、文档注释详细、简洁美观
该搜索框组件基于开源项目wxSearch 进行了改进,主要有以下几个修改点:
下面左图是组件效果图,右边是基于这个组件开发的一个天气预报小程序,扫描二维码可以进行体验。
@import "../../wxSearchView/wxSearchView.wxss";
<include src="../../wxSearchView/wxSearchView.wxml" />
// 1 导入js文件
var WxSearch = require('../../wxSearchView/wxSearchView.js');
Page({
data: {},
onLoad: function () {
// 2 搜索栏初始化
var that = this;
WxSearch.init(
that, // 本页面一个引用
['杭州', '嘉兴', "海宁", "桐乡", '宁波', '金华'], // 热点搜索推荐,[]表示不使用
['湖北', '湖南', '北京', "南京"],// 搜索匹配,[]表示不使用
that.mySearchFunction, // 提供一个搜索回调函数
that.myGobackFunction //提供一个返回回调函数
);
},
// 3 转发函数,固定部分,直接拷贝即可
wxSearchInput: WxSearch.wxSearchInput, // 输入变化时的操作
wxSearchKeyTap: WxSearch.wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录
wxSearchConfirm: WxSearch.wxSearchConfirm, // 搜索函数
wxSearchClear: WxSearch.wxSearchClear, // 清空函数
// 4 搜索回调函数
mySearchFunction: function (value) {
// do your job here
// 示例:跳转
wx.redirectTo({
url: '../index/index?searchValue='+value
})
},
// 5 返回回调函数
myGobackFunction: function () {
// do your job here
// 示例:返回
wx.redirectTo({
url: '../index/index?searchValue=返回'
})
}
})
为了方便调用,提高开发效率,组件实际上只是提供了两个回调接口,开发者也只需要提供这两个函数,介绍如下:
mySearchFunction: function (value) {
// do your job here
}
myGobackFunction: function () {
// do your job here
}
为了避免输入法遮挡的影响,该组件适合放在一个独立的搜索页面中。该搜索页面与其他页面间的关系如下图所示:
为了提高开发者的开发效率,下表列出了一些常用修改的位置。
界面效果 | 修改位置 |
---|---|
标签宽度 | wxSearchView.wxss -> .wxSearchKeyItem -> flex |
标签背景色 | wxSearchView.wxss -> .wxSearchKeyItem -> background-color |
页面背景色 | wxSearchView.wxss -> .wxSearch -> background-color |
提示面板背景色 | wxSearchView.wxss -> .wxSearchInner -> background-color |
返回按钮不需要 | wxSearchView.wxml -> 搜索 weui-search-bar__cancel-btn |
搜索提示修改 | wxSearchView.wxml -> 搜索 wxSearchMindKey |
... | ... |
本组件在设计的时候,实际只提供了两个回调接口:搜索和返回。如果开发者需要响应一些其它事件,可以参考组件js的导出接口,如下所示。
// 导出接口
module.exports = {
init: init, //初始化函数
wxSearchInput: wxSearchInput,// 输入变化时的操作
wxSearchKeyTap: wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
wxSearchDeleteAll: wxSearchDeleteAll, // 删除所有的历史记录
wxSearchConfirm: wxSearchConfirm, // 搜索函数
wxSearchClear: wxSearchClear, // 清空函数
}
可以看到的是,为了减少开发者的开发量,这些事件在QuickStart中声明成固定部分。如果开发者需要添加自己的事件,可以修改那些固定的部分,提供自己的响应函数,并在自己的函数中调用WxSearch.wxSearchXXX
函数,从而保证搜索框的正确效果。