微信小程序商城开发之实现商品加入购物车的功能（代码）

本篇文章给大家带来的内容是关于微信小程序商城开发之实现商品加入购物车的功能（代码） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

看效果

购物车.gif

开发计划

1、商品详情页将商品信息放入缓存
2、购物车页面读取缓存获取商品信息
3、购物车商品计算和删除缓存商品

一、商品详情页将商品信息放入缓存

detail.wxml

<button data-goodid="{{goods.goodsId}}" class="button-addCar" bindtap="addCar" formType="submit">确定</button>

绑定bindtap事件将商品加入购物车。

detail.js

/**
   * 加入购物车
   */
  addCar: function (e) {    
    var goods = this.data.goods;
    goods.isSelect=false;    
    var count = this.data.goods.count;    
    var title = this.data.goods.title;    
    if (title.length > 13) {
      goods.title = title.substring(0, 13) + '...';
    }    
    // 获取购物车的缓存数组（没有数据，则赋予一个空数组）  
    var arr = wx.getStorageSync('cart') || [];    
    console.log("arr,{}", arr);    
    if (arr.length > 0) {      
        // 遍历购物车数组  
      for (var j in arr) {        
        // 判断购物车内的item的id，和事件传递过来的id，是否相等  
        if (arr[j].goodsId == goodsId) {          
        // 相等的话，给count+1（即再次添加入购物车，数量+1）  
          arr[j].count = arr[j].count + 1;          
        // 最后，把购物车数据，存放入缓存（此处不用再给购物车数组push元素进去，因为这个是购物车有的，直接更新当前数组即可）  
          try {
            wx.setStorageSync('cart', arr)
          } catch (e) {            
            console.log(e)
          }          
        //关闭窗口
          wx.showToast({            
            title: '加入购物车成功！',            
            icon: 'success',            
            duration: 2000
          });          
        this.closeDialog();          
            // 返回（在if内使用return，跳出循环节约运算，节约性能） 
          return;
        }
      }      
        // 遍历完购物车后，没有对应的item项，把goodslist的当前项放入购物车数组  
      arr.push(goods);
    } else {
      arr.push(goods);
    }    
    // 最后，把购物车数据，存放入缓存  
    try {
      wx.setStorageSync('cart', arr)      
        // 返回（在if内使用return，跳出循环节约运算，节约性能） 
      //关闭窗口
      wx.showToast({        
         title: '加入购物车成功！',        
         icon: 'success',        
         duration: 2000
      });      
        this.closeDialog(); 
      return;
    } catch (e) {      
        console.log(e)
    }
  }

二、购物车页面读取缓存获取商品信息

cart.wxml

<view class="J-shopping-cart-empty" hidden="{{iscart}}"><view class="shopping-cart-empty">
        <view class="bg"></view> 
        <view class="cart"></view>
        <text class='empty-text'>购物车空空如也</text>  
        <p></p>
        <navigator url="/pages/goods/goods">
         <a href="//m.vip.com" class="button button-primary" >
            去抢购        </a>
        </navigator>
    </view></view> <view class="scroll" hidden="{{hidden}}"><scroll-view class="scroll" scroll-y="true">
  <view class="separate"></view>
  <view wx:for="{{carts}}">
    <view class="cart_container">  
      <view  wx:if="{{!item.isSelect}}">
            <icon class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}"  type="circle" size="20"></icon>
      </view>
      <view wx:elif="{{item.isSelect}}">
            <icon class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}"  type="success" color="#f0145a" size="20"></icon>
      </view>

      <image class="item-image" src="{{item.imgUrl}}"></image>
      <import src="../template/template.wxml" />
      <view class="column">
        <text class="title">{{item.title}}</text>
         <image bindtap="delGoods" id="img{{index}}" data-index="{{index}}" src="../../images/del.png"></image> 
        <view class="row">
          <text class="sku-price">￥{{item.price * item.count}}</text>
          <view class="sku">
              <template is="quantity"  data="{{ ...item,index:index}}" /> 
          </view>
        </view>

      </view>
    </view>
    <view class="separate"></view>
  </view></scroll-view></view>
 <view class="bottom_total" hidden="{{hidden}}">
  <view class="bottom_line"></view>

  <view class="row">

    <view  wx:if="{{!isAllSelect}}">
            <icon class="item-allselect" bindtap="allSelect" type="circle" size="20"></icon>
      </view>
      <view wx:elif="{{isAllSelect}}">
            <icon class="item-allselect" bindtap="allSelect" type="success" color="#f0145a" size="20"></icon>
      </view>
    <text class="small_text">全选</text>
    <text>合计:￥ </text>
    <text class="price">{{totalMoney}}</text>
    <button class="button-red" bindtap="toBuy" formType="submit">去结算      </button>
  </view></view>

cart.wxss

 @import "../template/template.wxss"; 
page{  
  background: #f3f4f5;  
  /* font-size: 37.5px;  */
}  
 .column image {  
     width:33rpx;  
     height:35rpx;  
     display:inline-block;  
     overflow:hidden;  
     float:right;  
     margin-top: -40rpx;  
     margin-left:400rpx;
} 
 .J-shopping-cart-empty{    
     margin: 0;    
     padding: 0;    
     border: 0;    
     font: inherit;    
     font-size: 100%;    
     vertical-align: baseline;
}
.shopping-cart-empty {   
    height: 250px;    
    padding-top: 3.2rem;    
    padding-bottom: 1.6rem;    
    background-color: #fff;    
    text-align: center;    
    position: relative;
} 
.shopping-cart-empty .bg{    
    position: absolute;    
    width: 16.29333rem;    
    height: 6.73333rem;    
    
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAm0AAAEXAQMAAADFlOHHAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMAFRtOKdMAAArmSURBVHja5ZxNiBzHFcf/b2pcvUSt6UkOoYWG7RUE5+LgXtvIIzTsrGXIIST3HAxuWSbxYSEjCI4CiqY2MrIPSywiQhRyiHwLIQdBgiNwcMpswDYoiQkEBDa4iME5ug0JjM1oKofdmf6q7Z7proAgfezp+fXrV69evffqA/jfX5es0tjEKs57xSrusmv1W5VVXIDLNnET9rFFmiMDbhG3hUnLIi52JLP4rWILFnHrFNvEXXJuw7Fnw3Lgo2Ovv1LsomevvzrCRWiLRmoLHJE9M5miBWmtS7C7YGQNF6+7IBK2VCcvuaCr1hr2LeUC16zh3hZt4K49s0Mb+KY13Ajc5jAb2cWF4MDIIq6F2l12VrjTBauN83Thlp/BUXHQBJyjuuD4X4XeFMwI2Fg4hNzr3zvA0dToPTQTRYE/FQmuk//D/XcA/qE2RljjmBn6+o9E4u76ud+O6U+0nunPzcLhogHnyUS6osV8ovXMrLth7F6UJqeykI5U4dcdwDG6L6bFugmH0UI6gy4uA951o3ATdIxut7/AeQbTUqSnZuHgOsrwS2+B6wEQy+GCCYArJhxftEC/gDt+I6IbOyYrkQBTJpyzaAEF5Aa1429E9MaO0U8CQ+OAyuZNR0XckR+rABYbXRG9Oef2C7jObxT94xkzbmj2bBTP/9sr4FxEJFwjjuIjHOVc+z13FVwgKjxbny+Pi2iS9PGWNnWcEQOwvRxu5IkEp7XJYiIm