微信小程序微商城（八）：缓存实现商品购物车功能

上一篇：微信小程序微商城（七）：动态API实现商品分类

看效果

购物车.gif

开发计划

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

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

detail.wxml

确定

绑定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