找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] 微信小程序搜索框组件,实现小程序搜索框功能

[复制链接]
查看: 1568|回复: 64
最佳答案
0 

1

主题

6

帖子

54

积分

新人求带

积分
54
 楼主| 发表于 2018-4-11 14:58:19 | 显示全部楼层 |阅读模式
在小程序里面,你会看到各种各样的搜索框,很多人不明白怎么实现的,其实就是针对input组件的封装。input组件的api说明,可以到小程序开发文档里里去查看

下面给个好用的示例供大家参考,小程序搜索框组件wsSearchView
wxSearch.gif

基于这个组件开发的天气预报小程序
weahter-weixin.jpg

用法

1、拷贝项目根目录的wxSearchView文件夹到你项目的根目录下(也可以其它位置)。
2、在你的wxss文件里导入组件的样式(文件位置为相对位置):
  1. @import "../../wxSearchView/wxSearchView.wxss";
复制代码

3、在你的wxml文件里导入组件(文件位置为相对位置):
  1. <include src="../../wxSearchView/wxSearchView.wxml" />
复制代码

4、在你的js文件里面添加以下代码,主要包括以下5个部分:
  • 导入js文件
  • 搜索栏初始化
  • 转发函数
  • 搜索回调函数
  • 返回回调函数

  1. // 1 导入js文件
  2. var WxSearch = require('../../wxSearchView/wxSearchView.js');

  3. Page({

  4.   data: {},

  5.   
  6.   onLoad: function () {
  7.   
  8.     // 2 搜索栏初始化
  9.     var that = this;
  10.     WxSearch.init(
  11.       that,  // 本页面一个引用
  12.       ['杭州', '嘉兴', "海宁", "桐乡", '宁波', '金华'], // 热点搜索推荐,[]表示不使用
  13.       ['湖北', '湖南', '北京', "南京"],// 搜索匹配,[]表示不使用
  14.       that.mySearchFunction, // 提供一个搜索回调函数
  15.       that.myGobackFunction //提供一个返回回调函数
  16.     );
  17.    
  18.   },

  19.   // 3 转发函数,固定部分,直接拷贝即可
  20.   wxSearchInput: WxSearch.wxSearchInput,  // 输入变化时的操作
  21.   wxSearchKeyTap: WxSearch.wxSearchKeyTap,  // 点击提示或者关键字、历史记录时的操作
  22.   wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录
  23.   wxSearchConfirm: WxSearch.wxSearchConfirm,  // 搜索函数
  24.   wxSearchClear: WxSearch.wxSearchClear,  // 清空函数

  25.   // 4 搜索回调函数  
  26.   mySearchFunction: function (value) {
  27.     // do your job here
  28.     // 示例:跳转
  29.     wx.redirectTo({
  30.       url: '../index/index?searchValue='+value
  31.     })
  32.   },

  33.   // 5 返回回调函数
  34.   myGobackFunction: function () {
  35.     // do your job here
  36.     // 示例:返回
  37.     wx.redirectTo({
  38.       url: '../index/index?searchValue=返回'  
  39.     })
  40.   }

  41. })
复制代码

说明

回调函数

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

搜索回调函数,下面是一个例子。当用户点击历史记录、搜索热点、搜索提示、搜索按钮时,都会回调开发者提供的函数接口,开发者拿到参数后可以跳到另一个页面展示查询结果。
  1.   mySearchFunction: function (value) {
  2.     // do your job here
  3.   }
复制代码

返回回调函数,下面是一个例子。搜索框边上的按钮有两个角色,当输入为空的时候,是一个返回按钮;当输入不为空时,是一个搜索按钮。当点击返回按钮时,就会回调开发者提供的函数,这里可以跳回到指定页面。
  1.   myGobackFunction: function () {
  2.     // do your job here
  3.   }
复制代码

页面关系

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

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


界面修改位置

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

响应事件

本组件在设计的时候,实际只提供了两个回调接口:搜索和返回。如果开发者需要响应一些其它事件,可以参考组件js的导出接口,如下所示。
  1. // 导出接口
  2. module.exports = {
  3.   init: init, //初始化函数
  4.   wxSearchInput: wxSearchInput,// 输入变化时的操作
  5.   wxSearchKeyTap: wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
  6.   wxSearchDeleteAll: wxSearchDeleteAll, // 删除所有的历史记录
  7.   wxSearchConfirm: wxSearchConfirm, // 搜索函数
  8.   wxSearchClear: wxSearchClear,  // 清空函数
  9. }
复制代码

可以看到的是,为了减少开发者的开发量,这些事件在QuickStart中声明成固定部分。如果开发者需要添加自己的事件,可以修改那些固定的部分,提供自己的响应函数,并在自己的函数中调用WxSearch.wxSearchXXX函数,从而保证搜索框的正确效果

核心代码:

wxml:
  1. <view class="weui-search-bar">
  2.    <view class="weui-search-bar__form">
  3.     <view class="weui-search-bar__box">
  4.       <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
  5.       <input type="text" class="weui-search-bar__input" placeholder="请输入查询内容" value="{{wxSearchData.value}}" bindinput="wxSearchInput" bindconfirm="wxSearchConfirm" />
  6.       <view class="weui-icon-clear" wx:if="{{wxSearchData.value.length > 0}}" bindtap="wxSearchClear">
  7.         <icon type="clear" size="14"></icon>
  8.       </view>
  9.     </view>
  10.   </view>
  11.     <view class="weui-search-bar__cancel-btn" bindtap="wxSearchConfirm">
  12.          <text wx:if="{{wxSearchData.value.length>0}}" data-key='search'>搜索</text>
  13.          <text wx:else data-key='back'>返回</text>
  14.      </view>
  15. </view>

  16. <view class="wxSearch" style="'block';height:{{wxSearchData.view.seachHeight}}px;top:{{wxSearchData.view.barHeight}}px;">

  17.   <view class="wxSearchInner">
  18.     <!-- 搜索提示部分 -->
  19.     <view class="wxSearchMindKey">
  20.       <view class="wxSearchMindKeyList">
  21.         <block wx:for="{{wxSearchData.tipKeys}}">
  22.           <view class="wxSearchMindKeyItem" bindtap="wxSearchKeyTap" data-key="{{item}}">{{item}}</view>
  23.         </block>
  24.       </view>
  25.     </view>

  26.     <view wx:if="{{wxSearchData.his[0]}}" class="wxSearchHistory" style="display:{{wxSearchData.value.length>0 ? 'none':'block'}}">
  27.       <view class="wxSearchHistoryItem">
  28.         <text class="wxSearchHistoryItemTitle">搜索记录</text>
  29.         <!--text class="wxSearchHistoryItemDel" bindtap="wxSearchDeleteAll">删除</text-->
  30.         <icon type="clear" bindtap="wxSearchDeleteAll" size="18" />
  31.       </view>
  32.       <view class="wxSearchKeyList">
  33.         <block wx:for="{{wxSearchData.his}}">
  34.           <view class="wxSearchKeyItem" bindtap="wxSearchKeyTap" data-key="{{item}}">{{item}}</view>
  35.         </block>
  36.       </view>
  37.     </view>

  38.     <view class="wxSearchKey" style="display:{{wxSearchData.value.length>0 ? 'none':'block'}}">
  39.       <text wx:if="{{wxSearchData.hotKeys[0]}}" class="wxSearchTitle">搜索热点</text>
  40.       <view class="wxSearchKeyList">
  41.         <block wx:for="{{wxSearchData.hotKeys}}">
  42.           <view class="wxSearchKeyItem" bindtap="wxSearchKeyTap" data-key="{{item}}">{{item}}</view>
  43.         </block>
  44.       </view>
  45.     </view>
  46.   </view>
  47. </view>
复制代码

wxss:
  1. /** 整个区域 */
  2. .wxSearch{
  3.   position: absolute;
  4.   top: 43px;
  5.   left: 0;
  6.   width: 100%;
  7.   height: 100%;
  8.   border-top: 1px #eee solid;
  9.   background-color: rgba(200, 200, 200, 0.1);
  10.   z-index: 9999;
  11. }

  12. /** 搜索框下面的提示区域 */
  13. .wxSearchInner{
  14.   background-color: #fff;
  15. }

  16. /** 搜索热点标题 */
  17. .wxSearchTitle{
  18.   display: block;
  19.   padding: 10px 5px 5px 10px;
  20.   font-size: 13px;
  21.   text-align: left;
  22. }

  23. /** 提示样式 */
  24. .wxSearchMindKeyItem{
  25.   padding: 10px 5px 10px 15px;
  26.   margin-left: 10px;
  27.   border-bottom: 1px solid #eee;
  28.   display: flex;
  29.   font-size: 13px;
  30. }

  31. /** 标签样式 */
  32. .wxSearchKeyList{
  33.   display: flex;
  34.   flex-direction: row;
  35.   flex-wrap: wrap;
  36.   border-bottom: 1px solid #eee;
  37. }

  38. /** 标签样式 */
  39. .wxSearchKeyItem{
  40.   flex: 0 0 18%;
  41.   font-size: 13px;
  42.   text-align: center;
  43.   border: 1px solid #eee;
  44.   margin: 5px;
  45.   padding: 4px 5px 4px 5px;
  46.   border-radius: 0px;
  47.   background-color: rgba(200, 200, 200, 0.1);
  48. }

  49. /** 搜索记录标题栏 */
  50. .wxSearchHistoryItem{
  51.   padding-left: 10px;
  52.   padding-top: 10px;
  53.   padding-right: 5px;
  54.   padding-bottom: 5px;
  55.   display: flex;
  56. }

  57. /** 搜索记录标题 */
  58. .wxSearchHistoryItemTitle{
  59.   flex: 8;
  60.   font-size: 13px;
  61. }

  62. /** 搜索记录删除按钮 */
  63. .wxSearchHistoryItemDel{
  64.   flex: 1;
  65.   font-size: 13px;
  66.   text-align: center;
  67.   padding-top:2px;
  68.   padding-bottom: 2px;
  69.   border: 1px solid #eee;
  70.   border-radius: 2px;
  71. }

  72. /** ---------------------- 以下是搜索框的 we-ui 样式--------------------------------*/

  73. /*!
  74. * WeUI v1.1.1 (https://github.com/weui/weui-wxss)
  75. * Copyright 2017 Tencent, Inc.
  76. * Licensed under the MIT license
  77. */

  78. .weui-search-bar {
  79.   position: relative;
  80.   padding: 8px 10px;
  81.   display: -webkit-box;
  82.   display: -webkit-flex;
  83.   display: flex;
  84.   box-sizing: border-box;
  85.   background-color: #efeff4;
  86.   border-top: 1rpx solid #d7d6dc;
  87.   border-bottom: 1rpx solid #d7d6dc;
  88. }

  89. .weui-icon-search {
  90.   margin-right: 8px;
  91.   font-size: inherit;
  92. }

  93. .weui-icon-search_in-box {
  94.   position: absolute;
  95.   left: 10px;
  96.   top: 7px;
  97. }

  98. .weui-search-bar__text {
  99.   display: inline-block;
  100.   font-size: 14px;
  101.   vertical-align: middle;
  102. }

  103. .weui-search-bar__form {
  104.   position: relative;
  105.   -webkit-box-flex: 1;
  106.   -webkit-flex: auto;
  107.   flex: auto;
  108.   border-radius: 5px;
  109.   background: #fff;
  110.   border: 1rpx solid #e6e6ea;
  111. }

  112. .weui-search-bar__box {
  113.   position: relative;
  114.   padding-left: 30px;
  115.   padding-right: 30px;
  116.   width: 100%;
  117.   box-sizing: border-box;
  118.   z-index: 1;
  119. }

  120. .weui-search-bar__input {
  121.   height: 28px;
  122.   line-height: 28px;
  123.   font-size: 14px;
  124. }

  125. .weui-icon-clear {
  126.   position: absolute;
  127.   top: 0;
  128.   right: 0;
  129.   padding: 7px 8px;
  130.   font-size: 0;
  131. }

  132. .weui-search-bar__label {
  133.   position: absolute;
  134.   top: 0;
  135.   right: 0;
  136.   bottom: 0;
  137.   left: 0;
  138.   z-index: 2;
  139.   border-radius: 3px;
  140.   text-align: center;
  141.   color: #9b9b9b;
  142.   background: #fff;
  143.   line-height: 28px;
  144. }

  145. .weui-search-bar__cancel-btn {
  146.   margin-left: 10px;
  147.   line-height: 28px;
  148.   color: #09bb07;
  149.   white-space: nowrap;
  150. }
复制代码

js:
  1. /***
  2. * // 定义数据格式
  3. * "wxSearchData":{
  4. *  configconfig:{
  5. *    style: "wxSearchNormal"
  6. *  },
  7. *  view:{
  8. *    hidden: true,
  9. *    searchbarHeght: 20
  10. *  }
  11. *  hotKeys:[],//自定义热门搜索
  12. *  his:[]//历史搜索关键字
  13. *  value
  14. * }
  15. */

  16. // 提示集合
  17. var __tipKeys = [];
  18. // 搜索回调函数
  19. var __searchFunction = null;
  20. // 返回函数
  21. var __goBackFunction = null;
  22. // 应用变量
  23. var __that = null;

  24. // 初始化函数
  25. function init(that, hotKeys, tipKeys, searchFunction, goBackFunction) {

  26.   __that = that;
  27.   __tipKeys = tipKeys;
  28.   __searchFunction = searchFunction;
  29.   __goBackFunction = goBackFunction;

  30.   var temData = {};
  31.   var barHeight = 43;
  32.   var view = {
  33.     barHeight: barHeight
  34.   }
  35.   temData.hotKeys = hotKeys;

  36.   wx.getSystemInfo({
  37.     success: function (res) {
  38.       var wHeight = res.windowHeight;
  39.       view.seachHeight = wHeight - barHeight;
  40.       temData.view = view;
  41.       __that.setData({
  42.         wxSearchData: temData
  43.       });
  44.     }
  45.   });

  46.   getHisKeys(__that);
  47. }

  48. // 搜索框输入时候操作
  49. function wxSearchInput(e) {
  50.   var inputValue = e.detail.value;
  51.   // 页面数据
  52.   var temData = __that.data.wxSearchData;
  53.   // 寻找提示值
  54.   var tipKeys = [];
  55.   if (inputValue && inputValue.length > 0) {
  56.     for (var i = 0; i < __tipKeys.length; i++) {
  57.       var mindKey = __tipKeys[i];
  58.       // 包含字符串
  59.       if (mindKey.indexOf(inputValue) != -1) {
  60.         tipKeys.push(mindKey);
  61.       }
  62.     }
  63.   }
  64.   // 更新数据
  65.   temData.value = inputValue;
  66.   temData.tipKeys = tipKeys;
  67.   // 更新视图
  68.   __that.setData({
  69.     wxSearchData: temData
  70.   });
  71. }

  72. // 清空输入
  73. function wxSearchClear() {
  74.   // 页面数据
  75.   var temData = __that.data.wxSearchData;
  76.   // 更新数据
  77.   temData.value = "";
  78.   temData.tipKeys = [];
  79.   // 更新视图
  80.   __that.setData({
  81.     wxSearchData: temData
  82.   });
  83. }

  84. // 点击提示或者关键字、历史记录时的操作
  85. function wxSearchKeyTap(e) {
  86.   search(e.target.dataset.key);
  87. }

  88. // 确任或者回车
  89. function wxSearchConfirm(e) {
  90.   var key = e.target.dataset.key;
  91.   if(key=='back'){
  92.     __goBackFunction();
  93.   }else{
  94.     search(__that.data.wxSearchData.value);
  95.   }
  96. }

  97. function search(inputValue) {
  98.   if (inputValue && inputValue.length > 0) {
  99.     // 添加历史记录
  100.     wxSearchAddHisKey(inputValue);
  101.     // 更新
  102.     var temData = __that.data.wxSearchData;
  103.     temData.value = inputValue;
  104.     __that.setData({
  105.       wxSearchData: temData
  106.     });
  107.     // 回调搜索
  108.     __searchFunction(inputValue);
  109.   }
  110. }

  111. // 读取缓存
  112. function getHisKeys() {
  113.   var value = [];
  114.   try {
  115.     value = wx.getStorageSync('wxSearchHisKeys')
  116.     if (value) {
  117.       // Do something with return value
  118.       var temData = __that.data.wxSearchData;
  119.       temData.his = value;
  120.       __that.setData({
  121.         wxSearchData: temData
  122.       });
  123.     }
  124.   } catch (e) {
  125.     // Do something when catch error
  126.   }
  127. }

  128. // 添加缓存
  129. function wxSearchAddHisKey(inputValue) {
  130.   if (!inputValue || inputValue.length == 0) {
  131.     return;
  132.   }
  133.   var value = wx.getStorageSync('wxSearchHisKeys');
  134.   if (value) {
  135.     if (value.indexOf(inputValue) < 0) {
  136.       value.unshift(inputValue);
  137.     }
  138.     wx.setStorage({
  139.       key: "wxSearchHisKeys",
  140.       data: value,
  141.       success: function () {
  142.         getHisKeys(__that);
  143.       }
  144.     })
  145.   } else {
  146.     value = [];
  147.     value.push(inputValue);
  148.     wx.setStorage({
  149.       key: "wxSearchHisKeys",
  150.       data: value,
  151.       success: function () {
  152.         getHisKeys(__that);
  153.       }
  154.     })
  155.   }
  156. }

  157. // 删除缓存
  158. function wxSearchDeleteAll() {
  159.   wx.removeStorage({
  160.     key: 'wxSearchHisKeys',
  161.     success: function (res) {
  162.       var value = [];
  163.       var temData = __that.data.wxSearchData;
  164.       temData.his = value;
  165.       __that.setData({
  166.         wxSearchData: temData
  167.       });
  168.     }
  169.   })
  170. }

  171. // 导出接口
  172. module.exports = {
  173.   init: init, //初始化函数
  174.   wxSearchInput: wxSearchInput,// 输入变化时的操作
  175.   wxSearchKeyTap: wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
  176.   wxSearchDeleteAll: wxSearchDeleteAll, // 删除所有的历史记录
  177.   wxSearchConfirm: wxSearchConfirm, // 搜索函数
  178.   wxSearchClear: wxSearchClear,  // 清空函数
  179. }
复制代码

需要的可以下载小程序搜索框源码,如下:
wsSearchView-master.zip (147.3 KB, 下载次数: 28)
回复

使用道具 举报

最佳答案
0 

2

主题

949

帖子

4063

积分

专家路上

积分
4063
发表于 2018-4-12 20:42:55 | 显示全部楼层
支持你最好
回复 支持 反对

使用道具 举报

最佳答案
0 

2

主题

949

帖子

4063

积分

专家路上

积分
4063
发表于 2018-4-12 20:43:13 | 显示全部楼层
楼主辛苦了
回复 支持 反对

使用道具 举报

最佳答案
0 

2

主题

949

帖子

4063

积分

专家路上

积分
4063
发表于 2018-4-12 20:43:26 | 显示全部楼层
继续呀规范化
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

14

帖子

173

积分

新人求带

积分
173
发表于 2018-4-13 08:50:51 | 显示全部楼层
确实不错啊,流程请出
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

14

帖子

173

积分

新人求带

积分
173
发表于 2018-4-13 08:51:11 | 显示全部楼层
确实不错啊,流程请出
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

43

帖子

212

积分

新人求带

积分
212
发表于 2018-4-13 10:19:25 | 显示全部楼层
谢谢楼主分享,学习了!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

43

帖子

114

积分

新人求带

积分
114
发表于 2018-4-13 12:48:39 | 显示全部楼层
可以搜索页面标题吗
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

1706

帖子

1994

积分

专家路上

积分
1994
QQ
发表于 2018-4-13 13:50:26 | 显示全部楼层
11111111111111
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

1706

帖子

1994

积分

专家路上

积分
1994
QQ
发表于 2018-4-13 13:50:31 | 显示全部楼层
11111111111111
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com