本篇文章主要写的是微信小程序实战项目的加入购物车逻辑,有写的不正确或是不合适的地方,请大家多多指教
话不多说,先上效果图:
wxml代码:
首先在wxml文件中写加号部分,在这里我用的是text标签,而非Button标签,因为button标签有太多的默认样式,不便修改
<text catchtap="addCart" data-item="{{item}}" class="add">+</text>
在点击“+”部分后,触发addCart事件,此时使用catchtap而不使用bindtap的原因是:
使用bindtap,点击之后会跳转到另外一个页面,也就是商品详情页;
使用catchtap,点击之后触发事件addCart,不会出现跳转到另外一个页面的情况。
注意要传入参数!!!!data-item="{{item}}"
然后再对这一块写样式
css样式代码:
/* .add之前的按照大家写得class的内容写*/
.content .caiList .cai_item .add{
width: 30rpx;
height: 30rpx; /*宽高各30rpx*/
line-height: 30rpx; /*垂直居中*/
text-align: center; /*水平居中*/
border: 2rpx solid orangered; /*宽为2rpx的一个外边框*/
border-radius: 50%; /*设置圆角*/
font-size: 11pt; /*字号*/
}
接下来就是最重要的逻辑部分了
1.点击加号拿到这个要添加到购物车的商品
点击触发该事件后,可以先打印一下,这样可以判断是否点中自己想加入购物车的商品,其次,看下里面的值更有利于写下面的代码,我的打印出来是这样的:
查看里面具体的内容之后,可知,我们所需的内容在,currentTarget下的dataset的item中,然后将这个内容拿出来,放到{item}中,
2.判断商品在不在购物车中
可以根据_id尝试从购物车集合中获取数据,
await carts.doc(item._id).get()
看是否能获取到,能后取到,执行4,获取不到执行3.
在这个地方可以通过try{ }catch(err){ }来进行判断,若有值,则执行try里面的代码;若没有值,则执行catch里面的代码
可以先对在不在进行测试 若此时carts集合(数据库)中没有任何数据,需要添加一条数据(记录),再进行判断
try{
await carts.doc('添加的记录的_id').get()
console.log("有值")
}catch(err){
console.log("没有值")
注:
这个时候,加号可以点击,但是点击后并不能对carts集合产生任何的增删改查的效果,但是还是需要点击“+”来触发addCart事件,执行到try后,判断try里面的第一条语句,(carts集合中是否有 :添加到carts集合中的数据的_id),若有这个_id值,则打印有值,若没有,就是产生错误,执行catch里面的语句,打印没有值。
3.不在,将该商品添加到购物车中,并新增加一个字段 记录加入购物车的该商品的数量 num=1
4.在,则修改该商品的num值
在进行修改商品的num值时,就是对num的值自增1的过程,此时要使用db.commend.inc(1),db是数据库的名字,这个代码的具体讲解可以看这篇博客command指令中的inc部分。
JavaScript具体代码如下:
async addCart(e){
//1.拿到商品
console.log(e)
let {item}= e.currentTarget.dataset
//console.log(item.goods_id)
// 2.判断该商品在不在购物车里面
// 根据_id 尝试从购物车里获取数据,看能不能获取到
try{
//carts是购物车集合的名称,db是数据库的名称
await carts.doc(item._id).get()
// console.log("有值")
await carts.doc(item._id).update({
data:{
num: db.command.inc(1)
}
})
wx.showToast({
title: '下单成功',
})
}catch(err){
// console.log("没有值")
await carts.add({
data:{
_id: item._id,
src_img:item.src_img,
price:item.price,
name:item.name,
num: 1
}
})
wx.showToast({
title: '下单成功',
})
}
},
在一块我尝试了promise写法,很不幸,总是报错,可能是代码执行顺序的问题,所以就放弃了那种写法。
当carts集合中没有值时,需要往其中写入数据,此时写入的数据不必是全部的数据,在这里我选择的商品的:名字、价格、图片和_id,因为涉及到加入购物车的数量的问题,就添加了一个num来记录。
注意:一定要把_id传进入,否则加入购物车(carts集合)后,系统会自动重新生成一个_id,如果不传的话,每一次加入购物车,就会新增一条记录,而不仅仅是num数值的加1.
其他的部分,大家都可以在官方的开发文档中找到。