{"id":13600059,"url":"https://github.com/mindawei/wsSearchView","last_synced_at":"2025-04-10T21:30:59.053Z","repository":{"id":51413608,"uuid":"117187641","full_name":"mindawei/wsSearchView","owner":"mindawei","description":"微信小程序搜索框组件：使用简单、文档注释详细、简洁美观","archived":false,"fork":false,"pushed_at":"2018-01-15T07:47:38.000Z","size":275,"stargazers_count":264,"open_issues_count":4,"forks_count":82,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-04-10T03:55:01.497Z","etag":null,"topics":["moudle","search-bar","searchbar","weixin-xiaochengxu","xiaochengxu"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mindawei.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-12T03:30:09.000Z","updated_at":"2024-08-14T01:47:29.000Z","dependencies_parsed_at":"2022-09-12T05:10:05.970Z","dependency_job_id":null,"html_url":"https://github.com/mindawei/wsSearchView","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindawei%2FwsSearchView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindawei%2FwsSearchView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindawei%2FwsSearchView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mindawei%2FwsSearchView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mindawei","download_url":"https://codeload.github.com/mindawei/wsSearchView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248301319,"owners_count":21080870,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["moudle","search-bar","searchbar","weixin-xiaochengxu","xiaochengxu"],"created_at":"2024-08-01T18:00:20.813Z","updated_at":"2025-04-10T21:30:59.018Z","avatar_url":"https://github.com/mindawei.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# wsSearchView\n该搜索框组件基于开源项目\u003ca href=\"https://github.com/icindy/wxSearch\"\u003ewxSearch\u003c/a\u003e 进行了改进，主要有以下几个修改点：\n* 增加了注释，修改了一些bug，项目可以跑起来。\n* 为了解决搜索框和输入法界面重叠的问题，将搜索组件作为一个独立的页面。\n* 修改了界面样式，更加美观。\n* 减少了暴露接口，复杂性更低。\n\n下面左图是组件效果图，右边是基于这个组件开发的一个\u003ca href=\"https://github.com/mindawei/weather\"\u003e天气预报小程序\u003c/a\u003e，扫描二维码可以进行体验。\n![wsSearchView效果](docs/wsSearchView.gif)\n![查询天气小程序](docs/weahter-weixin.jpg)\n\n# QuickStart\n1. 拷贝项目根目录的wxSearchView文件夹到你项目的根目录下（也可以其它位置）。\n2. 在你的wxss文件里导入组件的样式（文件位置为相对位置）：\n```\n@import \"../../wxSearchView/wxSearchView.wxss\";\n```\n3. 在你的wxml文件里导入组件（文件位置为相对位置）：\n```\n\u003cinclude src=\"../../wxSearchView/wxSearchView.wxml\" /\u003e\n```\n4. 在你的js文件里面添加以下代码,主要包括以下5个部分：\n* 导入js文件\n* 搜索栏初始化\n* 转发函数\n* 搜索回调函数\n* 返回回调函数\n```\n// 1 导入js文件\nvar WxSearch = require('../../wxSearchView/wxSearchView.js');\n\nPage({\n\n  data: {},\n\n  \n  onLoad: function () {\n  \n    // 2 搜索栏初始化\n    var that = this;\n    WxSearch.init(\n      that,  // 本页面一个引用\n      ['杭州', '嘉兴', \"海宁\", \"桐乡\", '宁波', '金华'], // 热点搜索推荐，[]表示不使用\n      ['湖北', '湖南', '北京', \"南京\"],// 搜索匹配，[]表示不使用\n      that.mySearchFunction, // 提供一个搜索回调函数\n      that.myGobackFunction //提供一个返回回调函数\n    );\n    \n  },\n\n  // 3 转发函数，固定部分，直接拷贝即可\n  wxSearchInput: WxSearch.wxSearchInput,  // 输入变化时的操作\n  wxSearchKeyTap: WxSearch.wxSearchKeyTap,  // 点击提示或者关键字、历史记录时的操作\n  wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录\n  wxSearchConfirm: WxSearch.wxSearchConfirm,  // 搜索函数\n  wxSearchClear: WxSearch.wxSearchClear,  // 清空函数\n\n  // 4 搜索回调函数  \n  mySearchFunction: function (value) {\n    // do your job here\n    // 示例：跳转\n    wx.redirectTo({\n      url: '../index/index?searchValue='+value\n    })\n  },\n\n  // 5 返回回调函数\n  myGobackFunction: function () {\n    // do your job here\n    // 示例：返回\n    wx.redirectTo({\n      url: '../index/index?searchValue=返回'  \n    })\n  }\n\n})\n```\n\n# 说明\n## 回调函数\n为了方便调用，提高开发效率，组件实际上只是提供了两个回调接口，开发者也只需要提供这两个函数，介绍如下：\n1.  搜索回调函数，下面是一个例子。当用户点击历史记录、搜索热点、搜索提示、搜索按钮时，都会回调开发者提供的函数接口，开发者拿到参数后可以跳到另一个页面展示查询结果。\n```\n  mySearchFunction: function (value) {\n    // do your job here\n  }\n```  \n2. 返回回调函数，下面是一个例子。搜索框边上的按钮有两个角色，当输入为空的时候，是一个返回按钮；当输入不为空时，是一个搜索按钮。当点击返回按钮时，就会回调开发者提供的函数，这里可以跳回到指定页面。\n```\n  myGobackFunction: function () {\n    // do your job here\n  }\n```\n\n## 页面关系\n为了避免输入法遮挡的影响，该组件适合放在一个独立的搜索页面中。该搜索页面与其他页面间的关系如下图所示：\n\n![页面关系](docs/page-relation.png)\n\n1. 搜索入口：搜索页面需要一个导入的入口，这个入口可以是一个搜索框，也可以是一些搜索按钮。在本项目中，搜索入口页面是index页面，搜索入口是一个搜索框。\n2. 搜索页面：搜索组件是放在搜索页面中的，直接按照QuickStart中的描述导入即可。搜索页面可以通过返回回调函数跳转到之前的页面中去，可以通过搜索回调函数跳转到具体展示结果的页面中去。在本项目中，搜索页面是search页面，开发者可以进行参考或直接拷贝。\n3. 搜索结果：搜索结果页面根据搜索页面传递过来的参数展示搜索结果。本项目中，为了简单，将搜索入口和搜索结果统一成一个index页面，开发者可以参考index页面中onLoad函数来查看参数如何获取。\n\n## 界面修改位置\n为了提高开发者的开发效率，下表列出了一些常用修改的位置。\n\n| 界面效果       | 修改位置 | \n| ------------- |:-------------:| \n| 标签宽度       | wxSearchView.wxss -\u003e .wxSearchKeyItem -\u003e flex |\n| 标签背景色     | wxSearchView.wxss -\u003e .wxSearchKeyItem -\u003e background-color |\n| 页面背景色     | wxSearchView.wxss -\u003e .wxSearch -\u003e background-color |\n| 提示面板背景色  | wxSearchView.wxss -\u003e .wxSearchInner -\u003e background-color |\n| 返回按钮不需要 | wxSearchView.wxml -\u003e 搜索 weui-search-bar__cancel-btn |\n| 搜索提示修改 | wxSearchView.wxml -\u003e 搜索 wxSearchMindKey |\n| ... | ... |\n\n## 响应事件\n本组件在设计的时候，实际只提供了两个回调接口：搜索和返回。如果开发者需要响应一些其它事件，可以参考组件js的导出接口，如下所示。\n\n```\n// 导出接口\nmodule.exports = {\n  init: init, //初始化函数\n  wxSearchInput: wxSearchInput,// 输入变化时的操作\n  wxSearchKeyTap: wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作\n  wxSearchDeleteAll: wxSearchDeleteAll, // 删除所有的历史记录\n  wxSearchConfirm: wxSearchConfirm, // 搜索函数\n  wxSearchClear: wxSearchClear,  // 清空函数\n}\n```\n可以看到的是，为了减少开发者的开发量，这些事件在QuickStart中声明成固定部分。如果开发者需要添加自己的事件，可以修改那些固定的部分，提供自己的响应函数，并在自己的函数中调用`WxSearch.wxSearchXXX`函数，从而保证搜索框的正确效果。\n\n## 帮助理解\n1. 如果对微信中模块的提供方式不是很清楚的话，可以参考我之前的一篇介绍文章：\u003ca href=\"https://mindawei.github.io/2018/01/09/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%A8%A1%E5%9D%97%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91/\"\u003e《微信小程序模块组件开发》\u003c/a\u003e。\n2. 本项目提供了一个使用demo，但是没有涉及到具体查询情况，更加完整的使用过程可以参考：\u003ca href=\"https://github.com/mindawei/weather\"\u003e天气预报小程序\u003c/a\u003e。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindawei%2FwsSearchView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmindawei%2FwsSearchView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindawei%2FwsSearchView/lists"}