wx小程序重要事件之备份版本翻车

不会吧不会吧,还有人不会用git

what happen

事情是这样的,本月25号,也就是事发的前一天凌晨,出现了下面这个报错:

其实这个错误是默认的代理错了,在设置里改一下,不知道啥时候改的我,突然就这样了,所以懵了。

当时不知道啊,大晚上的意识不清晰就很莽,然后我找到了之前所谓最新的备份,直接拿过来给替换了,因为我以为是我最近复制粘贴弄错了什么地方还是那个获取用户信息的接口更新的事,反正不知道,无脑替换了,倒霉蛋开始了..

结果,他不是最新备份!! 后来看了看更新记录是我备份完之后可能灵感涌现,又连夜优化了一下搜索,然后一直这版唯一的没存没当回事,当时也不知道git,总之气的人都晕了

what did I DO

UI的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<view class="head">
<text class='text-red'></text>试试输入"洗衣"->选择一个店铺->搜索
</view>
<!-- 表单 -->
<form bindsubmit="formSubmit">
<!-- 2.1搜索栏-->
<view class="cu-bar bg-color1 search">
<!-- 搜索框 -->
<view class="search-form radius">
<text class="cuIcon-search"></text>
<input type="text" placeholder="搜索商家" name="keyword" value="{{inputValue}}" bindinput="bindinput" bindconfirm="bindconfirm"></input>
</view>
<!-- 搜索按钮 -->
<view class="action">
<button class="cu-btn bg-green shadow-blur round" formType="submit">搜索</button>
</view>
</view>
<!-- 下拉联想 -->
<scroll-view scroll-y="true" class="cu-bar bg-color1 search" hidden="{{hideScroll}}" style="{{arrayHeight>340?'height:340rpx':''}}">
<view wx:for="{{bindSource}}" wx:key="index">
<view id="{{item}}" bindtap="itemtap" class="search-form radius"> {{item}}</view>
</view>
<!-- 搜索按钮 -->
</scroll-view>
</form>

UI如下:

界面

然后js里就写几个事件啊,先是表单事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//执行表单事件,点击搜索跳转
formSubmit: function (e) {
// console.log(e)
//获取表单所有name=keyword的值 keyword就是点搜索的那个值
var key = e.detail.value.keyword;
console.log(key)
wx.navigateTo({
url: '/pages/category2/search?name=' + key,
});
if (key == "") {
var state = 3
};
wx.setStorage({
key: "have",
data: state
})
},

然后bindconfirm是你键盘回车的事件,不加的话回车默认是取消键盘,加了下面这个就直接跳转。

1
2
3
4
5
6
7
// 写好的代码段在自己手机上测试没有效果 像极了我的现状
bindconfirm: function (e) {
console.log(e)
var key = e.detail.value;
wx.navigateTo({
url: '/pages/category2/search?name=' + key,
})},

下面这是打字时候的事件,我理解的是就是边打边在缓存里搜索。

这个当时参考了几个博客,因为我一开始做搜索只看到了他们调后端的接口然后去写一个sql,那我这个数据就在前端页面上,没有接数据库啊,就用不了,所以当时上线就没做这个功能,是真的不会,真的做不了。

后来就是屡败屡战,先是接触到了这个联想词,下拉菜单,后来看到缓存这块就开始打缓存的注意,我倒是忘了有没有人把这两个结合起来写了,反正我这么用的,下拉菜单这些我肯定自己写不出来的,但是写几个state,然后搜一下缓存,然后再传参这个我会啊,就慢慢做出来了。

反正就是列几种情况,用state区分,虽然可能是笨办法吧…这里区分一个key值和list的情况,因为我也不知道用户会搜啥,乱七八糟的输入很多时候我就给他推荐几个商家了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//当键盘输入时,触发input事件
bindinput: function (e) {
//用户实时输入值
var prefix = e.detail.value
//匹配的结果
var newSource = []
if (prefix != "") {
// 对于数组array进行遍历,功能函数中的参数 `e`就是遍历时的数组元素值。
this.data.adapterSource.forEach(function (e) {
// 用户输入的字符串如果在数组中某个元素中出现,将该元素存到newSource中
if (e.indexOf(prefix) != -1) {
// console.log(1)
newSource.push(e)
}
})
};
// 如果匹配结果存在,那么将其返回,相反则返回空数组
if (newSource.length != 0) {
// console.log(1111111111)
// console.log(newSource);
this.setData({
// 匹配结果存在,显示自动联想词下拉列表
hideScroll: false,
bindSource: newSource,
arrayHeight: newSource.length * 71
})
if (newSource.length == 1) { //匹配一个
var state = 1
} else { //匹配多个
var state = 2
}
} else { // 匹配无结果,不实现下拉列表
var state = 3
this.setData({
hideScroll: true,
bindSource: []
})
}
wx.setStorage({
key: "have",
data: state
}),
wx.setStorage({
key: "list",
data: newSource
})
},

然后就没什么了,主要联想菜单那块大佬写的太行了,开源大佬真牛。
然后就是去目标页面接一下,js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
onLoad: function (options) {
// console.log(2222222222222222222)
// console.log(options)
var that = this;
var state = wx.getStorageSync('have');
var list = wx.getStorageSync('list');
// console.log(state)

that.setData({
search: options.name,
state: state,
list: list
})
// console.log(list)
},

别忘了定义data啊,上回那个博客写的太简单了,早把这些东西写写,我也不用折腾到两点。

反正用了大概四个小时,补上了这个坑,肯定是不知道当时咋写的了,但是也大差不差吧,主要是看以前的代码是真膈应人,好歹注释有够多,不然这个项目要毁于一次误操作了。

不过还是不行啊,微信不给过审md,真燥人呢。

算了。

赶紧git学起来吧,回滚!

2021-05-30

我过审了我的天呐!!人生真是阴阳相调啊!!线上终于有搜索功能了!!!直接搜嘻唰唰便民卡即可,也感谢对象和我吵架,不然我不会睡不着来这杠审核。哭了,太难了tmd。

山重水复疑无路,柳暗花明又一村!!又一村!!!

references

后期主要看的几个

[1]https://www.jianshu.com/p/3f40578cb94b

[2]https://blog.csdn.net/qaqcfff/article/details/89578225

[3]https://www.color-ui.com

[4]https://developers.weixin.qq.com/miniprogram/dev/framework/