├── pages
├── search
│ ├── search.wxss
│ ├── search.wxml
│ ├── search.json
│ └── search.js
└── index
│ ├── index.wxss
│ ├── index.json
│ ├── index.wxml
│ └── index.js
├── docs
├── page-relation.png
├── weahter-weixin.jpg
└── wsSearchView.gif
├── app.json
├── project.config.json
├── app.wxss
├── app.js
├── wxSearchView
├── wxSearchView.wxml
├── wxSearchView.wxss
└── wxSearchView.js
└── README.md
/pages/search/search.wxss:
--------------------------------------------------------------------------------
1 | @import "../../wxSearchView/wxSearchView.wxss";
--------------------------------------------------------------------------------
/pages/search/search.wxml:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/index/index.wxss:
--------------------------------------------------------------------------------
1 | @import "../../wxSearchView/wxSearchView.wxss";
2 |
3 |
--------------------------------------------------------------------------------
/pages/index/index.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "首页 - github.com/mindawei"
3 | }
--------------------------------------------------------------------------------
/pages/search/search.json:
--------------------------------------------------------------------------------
1 | {
2 | "navigationBarTitleText": "组件 - github.com/mindawei"
3 | }
--------------------------------------------------------------------------------
/docs/page-relation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mindawei/wsSearchView/HEAD/docs/page-relation.png
--------------------------------------------------------------------------------
/docs/weahter-weixin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mindawei/wsSearchView/HEAD/docs/weahter-weixin.jpg
--------------------------------------------------------------------------------
/docs/wsSearchView.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mindawei/wsSearchView/HEAD/docs/wsSearchView.gif
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages":[
3 | "pages/index/index",
4 | "pages/search/search"
5 | ],
6 | "window":{
7 | "backgroundTextStyle":"light",
8 | "navigationBarBackgroundColor": "#fff",
9 | "navigationBarTitleText": "WeChat",
10 | "navigationBarTextStyle":"black"
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | {{ searchValue}}
--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
1 | //index.js
2 | Page({
3 | data: {
4 | searchValue:''
5 | },
6 |
7 | // 搜索页面跳回
8 | onLoad: function (options) {
9 | if (options && options.searchValue){
10 | this.setData({
11 | searchValue: "搜索："+options.searchValue
12 | });
13 | }
14 | },
15 |
16 | // 搜索入口
17 | wxSearchTab: function () {
18 | wx.redirectTo({
19 | url: '../search/search'
20 | })
21 | }
22 |
23 |
24 |
25 |
26 |
27 |
28 | })
29 |
--------------------------------------------------------------------------------
/project.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "项目配置文件。",
3 | "setting": {
4 | "urlCheck": true,
5 | "es6": true,
6 | "postcss": true,
7 | "minified": true,
8 | "newFeature": true
9 | },
10 | "compileType": "miniprogram",
11 | "libVersion": "1.7.2",
12 | "appid": "touristappid",
13 | "projectname": "wsSearchView",
14 | "condition": {
15 | "search": {
16 | "current": -1,
17 | "list": []
18 | },
19 | "conversation": {
20 | "current": -1,
21 | "list": []
22 | },
23 | "miniprogram": {
24 | "current": -1,
25 | "list": []
26 | }
27 | }
28 | }
--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
1 | page{
2 | background-color: #F8F8F8;
3 | font-size: 16px;
4 | font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
5 | }
6 | .page__hd {
7 | padding: 40px;
8 | }
9 | .page__bd {
10 | padding-bottom: 40px;
11 | }
12 | .page__bd_spacing {
13 | padding-left: 15px;
14 | padding-right: 15px;
15 | }
16 |
17 | .page__ft{
18 | padding-bottom: 10px;
19 | text-align: center;
20 | }
21 |
22 | .page__title {
23 | text-align: left;
24 | font-size: 20px;
25 | font-weight: 400;
26 | }
27 |
28 | .page__desc {
29 | margin-top: 5px;
30 | color: #888888;
31 | text-align: left;
32 | font-size: 14px;
33 | }
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | //app.js
2 | App({
3 | onLaunch: function () {
4 | // 展示本地存储能力
5 | var logs = wx.getStorageSync('logs') || []
6 | logs.unshift(Date.now())
7 | wx.setStorageSync('logs', logs)
8 |
9 | // 登录
10 | wx.login({
11 | success: res => {
12 | // 发送 res.code 到后台换取 openId, sessionKey, unionId
13 | }
14 | })
15 | // 获取用户信息
16 | wx.getSetting({
17 | success: res => {
18 | if (res.authSetting['scope.userInfo']) {
19 | // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
20 | wx.getUserInfo({
21 | success: res => {
22 | // 可以将 res 发送给后台解码出 unionId
23 | this.globalData.userInfo = res.userInfo
24 |
25 | // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
26 | // 所以此处加入 callback 以防止这种情况
27 | if (this.userInfoReadyCallback) {
28 | this.userInfoReadyCallback(res)
29 | }
30 | }
31 | })
32 | }
33 | }
34 | })
35 | },
36 | globalData: {
37 | userInfo: null
38 | }
39 | })
--------------------------------------------------------------------------------
/pages/search/search.js:
--------------------------------------------------------------------------------
1 | //index.js
2 | var WxSearch = require('../../wxSearchView/wxSearchView.js');
3 |
4 | Page({
5 | data: {},
6 |
7 | // 搜索栏
8 | onLoad: function () {
9 | var that = this;
10 | WxSearch.init(
11 | that, // 本页面一个引用
12 | ['杭州', '嘉兴', "海宁", "桐乡", '宁波', '金华'], // 热点搜索推荐，[]表示不使用
13 | ['湖北', '湖南', '北京', "南京"],// 搜索匹配，[]表示不使用
14 | that.mySearchFunction, // 提供一个搜索回调函数
15 | that.myGobackFunction //提供一个返回回调函数
16 | );
17 | },
18 |
19 | // 转发函数,固定部分
20 | wxSearchInput: WxSearch.wxSearchInput, // 输入变化时的操作
21 | wxSearchKeyTap: WxSearch.wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
22 | wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录
23 | wxSearchConfirm: WxSearch.wxSearchConfirm, // 搜索函数
24 | wxSearchClear: WxSearch.wxSearchClear, // 清空函数
25 |
26 | // 搜索回调函数
27 | mySearchFunction: function (value) {
28 | // do your job here
29 | // 跳转
30 | wx.redirectTo({
31 | url: '../index/index?searchValue='+value
32 | })
33 | },
34 |
35 | // 返回回调函数
36 | myGobackFunction: function () {
37 | // do your job here
38 | // 跳转
39 | wx.redirectTo({
40 | url: '../index/index?searchValue=返回'
41 | })
42 | }
43 |
44 | })
45 |
--------------------------------------------------------------------------------
/wxSearchView/wxSearchView.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | 搜索
13 | 返回
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | {{item}}
25 |
26 |
27 |
28 |
29 |
30 |
31 | 搜索记录
32 |
33 |
34 |
35 |
36 |
37 | {{item}}
38 |
39 |
40 |
41 |
42 |
43 | 搜索热点
44 |
45 |
46 | {{item}}
47 |
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/wxSearchView/wxSearchView.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 | /** 搜索框下面的提示区域 */
14 | .wxSearchInner{
15 | background-color: #fff;
16 | }
17 |
18 | /** 搜索热点标题 */
19 | .wxSearchTitle{
20 | display: block;
21 | padding: 10px 5px 5px 10px;
22 | font-size: 13px;
23 | text-align: left;
24 | }
25 |
26 | /** 提示样式 */
27 | .wxSearchMindKeyItem{
28 | padding: 10px 5px 10px 15px;
29 | margin-left: 10px;
30 | border-bottom: 1px solid #eee;
31 | display: flex;
32 | font-size: 13px;
33 | }
34 |
35 | /** 标签样式 */
36 | .wxSearchKeyList{
37 | display: flex;
38 | flex-direction: row;
39 | flex-wrap: wrap;
40 | border-bottom: 1px solid #eee;
41 | }
42 |
43 | /** 标签样式 */
44 | .wxSearchKeyItem{
45 | flex: 0 0 18%;
46 | font-size: 13px;
47 | text-align: center;
48 | border: 1px solid #eee;
49 | margin: 5px;
50 | padding: 4px 5px 4px 5px;
51 | border-radius: 0px;
52 | background-color: rgba(200, 200, 200, 0.1);
53 | }
54 |
55 | /** 搜索记录标题栏 */
56 | .wxSearchHistoryItem{
57 | padding-left: 10px;
58 | padding-top: 10px;
59 | padding-right: 5px;
60 | padding-bottom: 5px;
61 | display: flex;
62 | }
63 |
64 | /** 搜索记录标题 */
65 | .wxSearchHistoryItemTitle{
66 | flex: 8;
67 | font-size: 13px;
68 | }
69 |
70 | /** 搜索记录删除按钮 */
71 | .wxSearchHistoryItemDel{
72 | flex: 1;
73 | font-size: 13px;
74 | text-align: center;
75 | padding-top:2px;
76 | padding-bottom: 2px;
77 | border: 1px solid #eee;
78 | border-radius: 2px;
79 | }
80 |
81 | /** ---------------------- 以下是搜索框的 we-ui 样式--------------------------------*/
82 |
83 | /*!
84 | * WeUI v1.1.1 (https://github.com/weui/weui-wxss)
85 | * Copyright 2017 Tencent, Inc.
86 | * Licensed under the MIT license
87 | */
88 |
89 | .weui-search-bar {
90 | position: relative;
91 | padding: 8px 10px;
92 | display: -webkit-box;
93 | display: -webkit-flex;
94 | display: flex;
95 | box-sizing: border-box;
96 | background-color: #efeff4;
97 | border-top: 1rpx solid #d7d6dc;
98 | border-bottom: 1rpx solid #d7d6dc;
99 | }
100 |
101 | .weui-icon-search {
102 | margin-right: 8px;
103 | font-size: inherit;
104 | }
105 |
106 | .weui-icon-search_in-box {
107 | position: absolute;
108 | left: 10px;
109 | top: 7px;
110 | }
111 |
112 | .weui-search-bar__text {
113 | display: inline-block;
114 | font-size: 14px;
115 | vertical-align: middle;
116 | }
117 |
118 | .weui-search-bar__form {
119 | position: relative;
120 | -webkit-box-flex: 1;
121 | -webkit-flex: auto;
122 | flex: auto;
123 | border-radius: 5px;
124 | background: #fff;
125 | border: 1rpx solid #e6e6ea;
126 | }
127 |
128 | .weui-search-bar__box {
129 | position: relative;
130 | padding-left: 30px;
131 | padding-right: 30px;
132 | width: 100%;
133 | box-sizing: border-box;
134 | z-index: 1;
135 | }
136 |
137 | .weui-search-bar__input {
138 | height: 28px;
139 | line-height: 28px;
140 | font-size: 14px;
141 | }
142 |
143 | .weui-icon-clear {
144 | position: absolute;
145 | top: 0;
146 | right: 0;
147 | padding: 7px 8px;
148 | font-size: 0;
149 | }
150 |
151 | .weui-search-bar__label {
152 | position: absolute;
153 | top: 0;
154 | right: 0;
155 | bottom: 0;
156 | left: 0;
157 | z-index: 2;
158 | border-radius: 3px;
159 | text-align: center;
160 | color: #9b9b9b;
161 | background: #fff;
162 | line-height: 28px;
163 | }
164 |
165 | .weui-search-bar__cancel-btn {
166 | margin-left: 10px;
167 | line-height: 28px;
168 | color: #09bb07;
169 | white-space: nowrap;
170 | }
171 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # wsSearchView
2 | 该搜索框组件基于开源项目wxSearch 进行了改进，主要有以下几个修改点：
3 | * 增加了注释，修改了一些bug，项目可以跑起来。
4 | * 为了解决搜索框和输入法界面重叠的问题，将搜索组件作为一个独立的页面。
5 | * 修改了界面样式，更加美观。
6 | * 减少了暴露接口，复杂性更低。
7 |
8 | 下面左图是组件效果图，右边是基于这个组件开发的一个天气预报小程序，扫描二维码可以进行体验。
9 | 
10 | 
11 |
12 | # QuickStart
13 | 1. 拷贝项目根目录的wxSearchView文件夹到你项目的根目录下（也可以其它位置）。
14 | 2. 在你的wxss文件里导入组件的样式（文件位置为相对位置）：
15 | ```
16 | @import "../../wxSearchView/wxSearchView.wxss";
17 | ```
18 | 3. 在你的wxml文件里导入组件（文件位置为相对位置）：
19 | ```
20 |
21 | ```
22 | 4. 在你的js文件里面添加以下代码,主要包括以下5个部分：
23 | * 导入js文件
24 | * 搜索栏初始化
25 | * 转发函数
26 | * 搜索回调函数
27 | * 返回回调函数
28 | ```
29 | // 1 导入js文件
30 | var WxSearch = require('../../wxSearchView/wxSearchView.js');
31 |
32 | Page({
33 |
34 | data: {},
35 |
36 |
37 | onLoad: function () {
38 |
39 | // 2 搜索栏初始化
40 | var that = this;
41 | WxSearch.init(
42 | that, // 本页面一个引用
43 | ['杭州', '嘉兴', "海宁", "桐乡", '宁波', '金华'], // 热点搜索推荐，[]表示不使用
44 | ['湖北', '湖南', '北京', "南京"],// 搜索匹配，[]表示不使用
45 | that.mySearchFunction, // 提供一个搜索回调函数
46 | that.myGobackFunction //提供一个返回回调函数
47 | );
48 |
49 | },
50 |
51 | // 3 转发函数，固定部分，直接拷贝即可
52 | wxSearchInput: WxSearch.wxSearchInput, // 输入变化时的操作
53 | wxSearchKeyTap: WxSearch.wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
54 | wxSearchDeleteAll: WxSearch.wxSearchDeleteAll, // 删除所有的历史记录
55 | wxSearchConfirm: WxSearch.wxSearchConfirm, // 搜索函数
56 | wxSearchClear: WxSearch.wxSearchClear, // 清空函数
57 |
58 | // 4 搜索回调函数
59 | mySearchFunction: function (value) {
60 | // do your job here
61 | // 示例：跳转
62 | wx.redirectTo({
63 | url: '../index/index?searchValue='+value
64 | })
65 | },
66 |
67 | // 5 返回回调函数
68 | myGobackFunction: function () {
69 | // do your job here
70 | // 示例：返回
71 | wx.redirectTo({
72 | url: '../index/index?searchValue=返回'
73 | })
74 | }
75 |
76 | })
77 | ```
78 |
79 | # 说明
80 | ## 回调函数
81 | 为了方便调用，提高开发效率，组件实际上只是提供了两个回调接口，开发者也只需要提供这两个函数，介绍如下：
82 | 1. 搜索回调函数，下面是一个例子。当用户点击历史记录、搜索热点、搜索提示、搜索按钮时，都会回调开发者提供的函数接口，开发者拿到参数后可以跳到另一个页面展示查询结果。
83 | ```
84 | mySearchFunction: function (value) {
85 | // do your job here
86 | }
87 | ```
88 | 2. 返回回调函数，下面是一个例子。搜索框边上的按钮有两个角色，当输入为空的时候，是一个返回按钮；当输入不为空时，是一个搜索按钮。当点击返回按钮时，就会回调开发者提供的函数，这里可以跳回到指定页面。
89 | ```
90 | myGobackFunction: function () {
91 | // do your job here
92 | }
93 | ```
94 |
95 | ## 页面关系
96 | 为了避免输入法遮挡的影响，该组件适合放在一个独立的搜索页面中。该搜索页面与其他页面间的关系如下图所示：
97 |
98 | 
99 |
100 | 1. 搜索入口：搜索页面需要一个导入的入口，这个入口可以是一个搜索框，也可以是一些搜索按钮。在本项目中，搜索入口页面是index页面，搜索入口是一个搜索框。
101 | 2. 搜索页面：搜索组件是放在搜索页面中的，直接按照QuickStart中的描述导入即可。搜索页面可以通过返回回调函数跳转到之前的页面中去，可以通过搜索回调函数跳转到具体展示结果的页面中去。在本项目中，搜索页面是search页面，开发者可以进行参考或直接拷贝。
102 | 3. 搜索结果：搜索结果页面根据搜索页面传递过来的参数展示搜索结果。本项目中，为了简单，将搜索入口和搜索结果统一成一个index页面，开发者可以参考index页面中onLoad函数来查看参数如何获取。
103 |
104 | ## 界面修改位置
105 | 为了提高开发者的开发效率，下表列出了一些常用修改的位置。
106 |
107 | | 界面效果 | 修改位置 |
108 | | ------------- |:-------------:|
109 | | 标签宽度 | wxSearchView.wxss -> .wxSearchKeyItem -> flex |
110 | | 标签背景色 | wxSearchView.wxss -> .wxSearchKeyItem -> background-color |
111 | | 页面背景色 | wxSearchView.wxss -> .wxSearch -> background-color |
112 | | 提示面板背景色 | wxSearchView.wxss -> .wxSearchInner -> background-color |
113 | | 返回按钮不需要 | wxSearchView.wxml -> 搜索 weui-search-bar__cancel-btn |
114 | | 搜索提示修改 | wxSearchView.wxml -> 搜索 wxSearchMindKey |
115 | | ... | ... |
116 |
117 | ## 响应事件
118 | 本组件在设计的时候，实际只提供了两个回调接口：搜索和返回。如果开发者需要响应一些其它事件，可以参考组件js的导出接口，如下所示。
119 |
120 | ```
121 | // 导出接口
122 | module.exports = {
123 | init: init, //初始化函数
124 | wxSearchInput: wxSearchInput,// 输入变化时的操作
125 | wxSearchKeyTap: wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
126 | wxSearchDeleteAll: wxSearchDeleteAll, // 删除所有的历史记录
127 | wxSearchConfirm: wxSearchConfirm, // 搜索函数
128 | wxSearchClear: wxSearchClear, // 清空函数
129 | }
130 | ```
131 | 可以看到的是，为了减少开发者的开发量，这些事件在QuickStart中声明成固定部分。如果开发者需要添加自己的事件，可以修改那些固定的部分，提供自己的响应函数，并在自己的函数中调用`WxSearch.wxSearchXXX`函数，从而保证搜索框的正确效果。
132 |
133 | ## 帮助理解
134 | 1. 如果对微信中模块的提供方式不是很清楚的话，可以参考我之前的一篇介绍文章：《微信小程序模块组件开发》。
135 | 2. 本项目提供了一个使用demo，但是没有涉及到具体查询情况，更加完整的使用过程可以参考：天气预报小程序。
136 |
--------------------------------------------------------------------------------
/wxSearchView/wxSearchView.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 | // 提示集合
18 | var __tipKeys = [];
19 | // 搜索回调函数
20 | var __searchFunction = null;
21 | // 返回函数
22 | var __goBackFunction = null;
23 | // 应用变量
24 | var __that = null;
25 |
26 | // 初始化函数
27 | function init(that, hotKeys, tipKeys, searchFunction, goBackFunction) {
28 |
29 | __that = that;
30 | __tipKeys = tipKeys;
31 | __searchFunction = searchFunction;
32 | __goBackFunction = goBackFunction;
33 |
34 | var temData = {};
35 | var barHeight = 43;
36 | var view = {
37 | barHeight: barHeight
38 | }
39 | temData.hotKeys = hotKeys;
40 |
41 | wx.getSystemInfo({
42 | success: function (res) {
43 | var wHeight = res.windowHeight;
44 | view.seachHeight = wHeight - barHeight;
45 | temData.view = view;
46 | __that.setData({
47 | wxSearchData: temData
48 | });
49 | }
50 | });
51 |
52 | getHisKeys(__that);
53 | }
54 |
55 | // 搜索框输入时候操作
56 | function wxSearchInput(e) {
57 | var inputValue = e.detail.value;
58 | // 页面数据
59 | var temData = __that.data.wxSearchData;
60 | // 寻找提示值
61 | var tipKeys = [];
62 | if (inputValue && inputValue.length > 0) {
63 | for (var i = 0; i < __tipKeys.length; i++) {
64 | var mindKey = __tipKeys[i];
65 | // 包含字符串
66 | if (mindKey.indexOf(inputValue) != -1) {
67 | tipKeys.push(mindKey);
68 | }
69 | }
70 | }
71 | // 更新数据
72 | temData.value = inputValue;
73 | temData.tipKeys = tipKeys;
74 | // 更新视图
75 | __that.setData({
76 | wxSearchData: temData
77 | });
78 | }
79 |
80 | // 清空输入
81 | function wxSearchClear() {
82 | // 页面数据
83 | var temData = __that.data.wxSearchData;
84 | // 更新数据
85 | temData.value = "";
86 | temData.tipKeys = [];
87 | // 更新视图
88 | __that.setData({
89 | wxSearchData: temData
90 | });
91 | }
92 |
93 | // 点击提示或者关键字、历史记录时的操作
94 | function wxSearchKeyTap(e) {
95 | search(e.target.dataset.key);
96 | }
97 |
98 | // 确任或者回车
99 | function wxSearchConfirm(e) {
100 | var key = e.target.dataset.key;
101 | if(key=='back'){
102 | __goBackFunction();
103 | }else{
104 | search(__that.data.wxSearchData.value);
105 | }
106 | }
107 |
108 | function search(inputValue) {
109 | if (inputValue && inputValue.length > 0) {
110 | // 添加历史记录
111 | wxSearchAddHisKey(inputValue);
112 | // 更新
113 | var temData = __that.data.wxSearchData;
114 | temData.value = inputValue;
115 | __that.setData({
116 | wxSearchData: temData
117 | });
118 | // 回调搜索
119 | __searchFunction(inputValue);
120 | }
121 | }
122 |
123 | // 读取缓存
124 | function getHisKeys() {
125 | var value = [];
126 | try {
127 | value = wx.getStorageSync('wxSearchHisKeys')
128 | if (value) {
129 | // Do something with return value
130 | var temData = __that.data.wxSearchData;
131 | temData.his = value;
132 | __that.setData({
133 | wxSearchData: temData
134 | });
135 | }
136 | } catch (e) {
137 | // Do something when catch error
138 | }
139 | }
140 |
141 | // 添加缓存
142 | function wxSearchAddHisKey(inputValue) {
143 | if (!inputValue || inputValue.length == 0) {
144 | return;
145 | }
146 | var value = wx.getStorageSync('wxSearchHisKeys');
147 | if (value) {
148 | if (value.indexOf(inputValue) < 0) {
149 | value.unshift(inputValue);
150 | }
151 | wx.setStorage({
152 | key: "wxSearchHisKeys",
153 | data: value,
154 | success: function () {
155 | getHisKeys(__that);
156 | }
157 | })
158 | } else {
159 | value = [];
160 | value.push(inputValue);
161 | wx.setStorage({
162 | key: "wxSearchHisKeys",
163 | data: value,
164 | success: function () {
165 | getHisKeys(__that);
166 | }
167 | })
168 | }
169 | }
170 |
171 | // 删除缓存
172 | function wxSearchDeleteAll() {
173 | wx.removeStorage({
174 | key: 'wxSearchHisKeys',
175 | success: function (res) {
176 | var value = [];
177 | var temData = __that.data.wxSearchData;
178 | temData.his = value;
179 | __that.setData({
180 | wxSearchData: temData
181 | });
182 | }
183 | })
184 | }
185 |
186 | // 导出接口
187 | module.exports = {
188 | init: init, //初始化函数
189 | wxSearchInput: wxSearchInput,// 输入变化时的操作
190 | wxSearchKeyTap: wxSearchKeyTap, // 点击提示或者关键字、历史记录时的操作
191 | wxSearchDeleteAll: wxSearchDeleteAll, // 删除所有的历史记录
192 | wxSearchConfirm: wxSearchConfirm, // 搜索函数
193 | wxSearchClear: wxSearchClear, // 清空函数
194 | }
--------------------------------------------------------------------------------