微信小程序利用缓存实现加入购物车功能

最新推荐文章于 2024-01-11 10:23:11 发布

一者

最新推荐文章于 2024-01-11 10:23:11 发布

阅读量1.1k

点赞数 1

分类专栏：微信小程序文章标签：缓存小程序

本文链接：https://blog.csdn.net/weixin_44302838/article/details/120182018

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何在微信小程序中实现购物车功能。通过点击‘加入购物车’按钮，利用`wx.getStorageSync`和`wx.setStorageSync`进行本地存储操作，检查商品是否已存在于购物车，并更新商品数量。当商品首次添加时，设置数量为1；若已存在，则增加商品数量。最后，使用`wx.showToast`弹窗提示用户操作成功。

摘要由CSDN通过智能技术生成

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


//然后在js里面写
data: {
      goodsObj:{}
  },
  //点击加入购物车
  handleCartAdd(){
    let {goodsObj} = this.data  //goodsObj是我当前商品这个对象
    //获取缓存在的购物车 数组
    let cart = wx.getStorageSync("cart") || [];
    //2判断商品对象是否存在于购物车数组中
    let index = cart.findIndex((item)=>item.goods_id === goodsObj.goods_id)
    if(index === -1){
      //index不存在,说明第一次添加
      goodsObj.num = 1;
      cart.push(goodsObj)
    }else{
      //已经存在购物车,执行num++
      cart[index].num ++;
    }

    //5把购物车重新添加到缓存
    wx.setStorageSync('cart', cart)
    //6弹窗提示
    wx.showToast({
      title: '加入成功',
      icon:'success',
      mask:true
    })
  },