微信小程序爬坑记之数组的增删操作

loading

前言

实现一个对用户技能信息的增加删除功能,具体场景进来看吧!


先看一下效果
loading...
loading...

需求

现在有这么个场景,添加技能和删除技能,其实是前端对数据的增删操作,小程序有个特别的地方,下面会写到,实现效果如上图。

分析

页面数据的渲染,是来自data中的skillList数组,那么增加和删除技能就是对skillList数组的增删操作。明确这一点就清晰了。

上图中可以看到每一项技能包含的字段,把添加的每一项技能保存为新的对象,增加就是把新添加的对象push到skillList中,删除就是从skillList数组中删除指定的一项(这里采用的方式是按数组索引值做删除)

每一项技能包含的字段内容是用户输入的,这里有,技能名称(name), 发证机关(organization), 证书编号(certificateNo), 有效日期(startTime-endTime), 还有证书封面(pic).

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
25
26
27
28
29
30
31
32
33
34
35
<view class="skill-list" wx:if="{{ skillList.length !== 0 }}">
<block wx:for="{{ skillList }}" wx:key="item.id" wx:for-item="item">
<view class="item column-around mb20">
<!-- 技能名称,评分 -->
<view class="top row-between">
<view class="left row-between">
<text class="name weight6">{{ item.name }}</text>
<view class="score pl32">
<block wx:for="12345" wx:key="*this" wx:for-item="number">
<image class="star" wx:if="{{ number <= item.skillStar }}" src="{{ iconPath.mine.starSelect }}" />

<image wx:else class="star" src="{{ iconPath.mine.star }}" />
</block>

</view>
</view>
<image class="image" src="{{ iconPath.skill.delete }}" bind:tap="handleDelete" data-id="{{ item.id }}" />
</view>

<!-- 证书信息 -->
<view class="infor row-between">
<view class="cover-box row-center algin-center">
<image class="cover" wx:if="{{ item.pic }}" src="{{ item.pic }}" mode="aspectFill" />
<view class="no" wx:else>暂无证书</view>
</view>
<view class="detail row column-around">
<view >发证机关: <text class="ml10">{{ item.organization ? item.organization : '暂无' }}</text></view>
<view class="number">证书编号: <text class="ml10">{{ item.certificateNo ? item.certificateNo : '暂无' }}</text></view>
<view wx:if="{{ item.startTime }}">有效日期: <text class="ml10">{{ utils.date2str(item.startTime, 'YYYY.MM.DD') }}-{{ utils.date2str(item.endTime, 'YYYY.MM.DD') }}</text></view>
<view wx:else>有效日期: <text class="ml10">暂无</text></view>
</view>
</view>
</view>
</block>
</view>

获取用户添加的技能信息

获取用户输入的内容,input组件的 bindinput 属性可以通过 e.detail.value 拿到用户输入的内容,以获取证书编号为例

1
2
3
4
5
getNumber: (e) => {
page.setData({
certificateNo: e.detail.value
});
},

将添加的技能信息保存

在用户输入完技能信息后,需要把添加的技能展示在页面上,从效果图可以看到,添加时经过了两个页面栈,添加过程是 A -> B -> C 现在要做的是把C页面的数据带回A页面; 如图示
loading...

实现的方法有多种,可以在页面路由跳转时把数据做参数传过去,也可以通过 getCurrentPages() 方法获取页面栈的data, 还可以存在缓存中,在A页面取出来。

页面跳转路由传参

首先把技能信息存做一个对象,如下

1
2
3
4
5
6
7
8
9
10
11
const { id, skillName, organization, certificateNo, pic, startTime, endTime } = page.data;
const param = {
name: skillName,
organization,
certificateNo,
pic,
startTime,
endTime
}
// 把param在路由跳转的时候传过去
wx.navigateTo({url: `${url}?${param}`})

getCurrentPages()通过页面栈获取

通过 getCurrentPages() 获取当前所有活动页面

1
2
3
4
5
6
7
8
9
getData: () => {
const pages = getCurrentPages();
const Page = pages[pages.length - 2]; // 上一页
const info = Page.data;
page.setData({
info: info.whichPage
});
},
利用这个方法我们使用这个页面可以获取到上一个页面所有的data数据。同时在返回上一个页面时,也可以使用setData对上一个页面里data的值重新赋值,从而可以在A页面获取并修改C页面的信息数据。

通过页面缓存存取

这种方法是在C页面设置缓存,然后在A页面获取,通过 wx.setStorage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// C页面 存
wx.setStorage({
key: 'key',
data: 'value'
})

// A页面 取
wx.getStorage({
key: 'key',
success(resp) {
page.setData({
info: resp.data
})
}
})

增加技能

这里以存缓存为例,在获取到C页缓存数据之后,存入data中,然后把所得的信息存到一个新的数组中,最后push到skillList。这里注意,push方法会改变原数组,并返回新数组的长度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
wx.getStorage({
key: 'key',
success(resp) {
page.setData({
info: resp.data
})
}
})
const {id, name, organization, certificateNo, pic, startTime, endTime} = page.data.info;
const newList = {id, name, organization, certificateNo, pic, startTime, endTime}
page.data.skillList.push(newList);
page.setData({
skillList: page.data.skillList
});

删除某项技能

删除操作就是对技能列表的删除,这里用splice,根据数组索引删除指定技能。

1
2
3
4
5
6
7
8
9
10
11
12
handleDelete: ({currentTarget}) => {
const index = currentTarget.dataset.index;
const skillList = page.data.skillList;
Tips.confirm('是否删除该项技能', '提示').then(resp => {
if (resp.status === C.OK) {
skillList.splice(index, 1);
page.setData({
skillList
});
}
});
},

总结

看似简单的数组增删操作,实际应用中其实是有大坑的,由于微信小程序页面栈有层级限制,这里用缓存其实不是个好的办法,因为在填写完技能信息之后,跳回A页面,取得缓存做渲染,点返回的时候,还是会跳回信息填写页面,造成用户体验不好。

如果觉得文章不错,请我吃根辣条吧~~