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

看效果web

购物车.gif小程序

开发计划微信小程序

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

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

三、购物车商品计算和删除缓存商品

1、商品详情页将商品信息放入缓存数组

detail.wxml缓存

肯定

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

detail.jsapp

/**

* 加入购物车

*/

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)

}

}

2、购物车页面读取缓存获取商品信息框架

cart.wxmlxss

购物车空空如也

去抢购        

{ {item.title}}

￥{ {item.price * item.count}}

全选

合计:￥

{ {totalMoney}}

去结算      

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/jfX5es0tjEKs57xSrusmv1W5VVXIDLNnET9rFFmiMDbhG3hUnLIi52JLP4rWILFnHrFNvEXXJuw7Fnw3Lgo2Ovv1LsomevvzrCRWiLRmoLHJE9M5mi