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

 所属分类:php教程

 浏览:185次-  评论: 0次-  更新时间:2022-10-08
描述:更多教程资料进入php教程获得。 本篇文章给大家带来的内容是关于微信小程序商城开发之实现商品加入购物车的功能(代码) ,有一定的参考价...
更多教程资料进入php教程获得。 本篇文章给大家带来的内容是关于微信小程序商城开发之实现商品加入购物车的功能(代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

看效果

程序员必备接口测试调试工具:立即使用
Apipost = Postman + Swagger + Mock + Jmeter
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