微信小程序购物车模块(缓存相关知识点)

微信小程序购物车模块(缓存相关知识点)

1.前言：
本购物车模块不使用数据库来实现，将以小程序内置的本地存储模拟实现

2.wxml：
先在加入购物车模块增加点击事件

 <view class="bottom_cart"
    bindtap="handleCartAdd">加入购物车
 </view>

3.js：

handleCartAdd(){
  let cart=wx.getStorageSync('cartKey')||[];//第一次可能没有缓存数据，则设置cart为空数组
  let index=cart.findIndex(v=>v.goodsInfo===this.goodsInfo.goods_id)
  if(index==-1){//缓存不存在这个商品，未加入过购物车
    this.goodsInfo.num=1;//新增num为1
    cart.push(this.goodsInfo);//在cart这个容器中放入本商品的数据
  }
  else{//已经加入过购物车，则index为缓存中的本商品的索引
    cart[index].num++;
  }
  wx.setStorageSync('cartKey', cart);//将cart中的数据放回缓存中
  wx.showToast({
    title: '加入成功',
    icon:'success',
    mask:'true'
  })
  }

基本思路：
先定义变量cart来从缓存中寻找‘cartkey’这个缓存数据，若没有则将空数组赋值给cart，接着通过findIndex()方法寻找本商品对应的缓存区中的索引，若能找到，说明本商品之前缓存过，则直接将此索引对应的缓存区的数据的num值++。若找不到则索引返回-1，则将本商品的goodsInfo新增num数据并++，接着改变后的goodsInfo放进cart数组中，最后将cart数组放入key值为‘cartkey’的缓存区中。

findIndex()用法：
遍历数组中值，返回想要的值组成一个新数组，若这个新数组的值和自己点击的当前值有一样则返回一样的值的那个索引，若不存在则返回-1

效果图：
点击加入购物车后出现“加入成功”动画

缓存区出现key为cartkey的新数据，里面存放着本商品的goodsInfo信息