小程序云开发——点餐小程序之加入购物车

本篇文章主要写的是微信小程序实战项目的加入购物车逻辑，有写的不正确或是不合适的地方，请大家多多指教

话不多说，先上效果图：

wxml代码： 

首先在wxml文件中写加号部分，在这里我用的是text标签，而非Button标签，因为button标签有太多的默认样式，不便修改

+

在点击“+”部分后，触发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.

其他的部分，大家都可以在官方的开发文档中找到。