看效果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/jfX5es0tjEKs57xSrusmv1W5VVXIDLNnET9rFFmiMDbhG3hUnLIi52JLP4rWILFnHrFNvEXXJuw7Fnw3Lgo2Ovv1LsomevvzrCRWiLRmoLHJE9M5miBWmtS7C7YGQNF6+7IBK2VCcvuaCr1hr2LeUC16zh3hZt4K49s0Mb+KY13Ajc5jAb2cWF4MDIIq6F2l12VrjTBauN83Thlp/BUXHQBJyjuuD4X4XeFMwI2Fg4hNzr3zvA0dToPTQTRYE/FQmuk//D/XcA/qE2RljjmBn6+o9E4u76ud+O6U+0nunPzcLhogHnyUS6osV8ovXMrLth7F6UJqeykI5U4dcdwDG6L6bFugmH0UI6gy4uA951o3ATdIxut7/AeQbTUqSnZuHgOsrwS2+B6wEQy+GCCYArJhxftEC/gDt+I6IbOyYrkQBTJpyzaAEF5Aa1429E9MaO0U8CQ+OAyuZNR0XckR+rABYbXRG9Oef2C7jObxT94xkzbmj2bBTP/9sr4FxEJFwjjuIjHOVc+z13FVwgKjxbny+Pi2iS9PGWNnWcEQOwvRxu5IkEp7XJYiImlsdNEw80/tyoREkCOVM6EjeW8BR8AHBmSWumW1hALo0bAOPJQdQ6FghuN8T1QXqGHgCagGaGJiYgWgHH4kD0ADgCQ2XAsVVwPpxX35YdAD08OkNTXA/e4DPVARBoLdE14jYwXhq3HrmHuLg4Zh3gQkfHy+J6ko84gLUjSh0EhEHOII/EuTgj2MgB4AJg94yGEl7KKdVlisTAgOvgLOjOHLfVM46QocrjHEViasQ9BsxxjgqmJqdzRuRwvhvR7l0j7kXgJjvAzXDf4FNGCPIurO9HjPaM49WLwAdMAJ1vaOnsGUb8AXgeN/KjDmubxit8/xDn6Fu47BpGIY9kHqe6kcvco3DPMAFwwFN9Q79gOs7hSIZRnx+J+4AkwOFMMDGNkbNBDsdEqMKWCcfEi4e4QN+Hp6CMxpnFOQil4v5RuJskgSu/FtAwRj88FdgemMMJIVnfiHsMuAMJ+hgIYnPUxnMexcVJEsw4OIuzoDtQcK7iUQ2sG2PAHM5Hh4nEpFrpRjoDFkKhx7RWwMTQx8BEdpwNhMviRC08/XRP8BEU+qTfAwyRXgxAZnFnpc8mSUyawa1HrkJ0+DXD4pdOAYyyeXyoQuY6qZZJ8hjpDX6oMDrAmWqxYwBb2USlG0aMJ8mGl8Ip59WPJEYHXzM0mMnjEnDezDqUULJW4suOpWpfiilPHErnmVxYXwF0J4s7IVjK7E6mcaQ1EGIAMG2y4V7R4bsnQVcTszshnFRePZ4CfQT3x+Ycyy2aYicAPkpsoCuPp52jOggG9MwY3vFiR3GmBzH6vKFHZ5DNt0aFWD/pEkWPSnHGpMLg01Sano6Djb26qsQQsl1kkktPlRSQRFBZOKAsTpfVwiRTVTiWwXmzsqclJsvjfABalZdoguVxPcCZVVR8nPKv7aZ8Sg8Yq4qXY1pdElrgHF31LQhEuXRuyu+P43KcDzwry9+X4DpMiyrcuPyR8CA2PPB9w6rpK9fR26UPjOGnyihV9VdnWPHEfpyE1NVza5VPyGFcTFuPviqeINGyOd1HgG8Rx+ziOFKG8sDhXMB9cHH+A40LrePaFnGRXekiu9Jt28XJBxonrOLIPs7iFD3BqnTs/wpnuWWVXTO+bNejeMIqDhO7uOHstzZx9Gx1yCNtvhAstuoR+cAYotdTRgzXM0S1NaNC1oPPisrT92riOhihqLxJzZn9lrOrcsUJAHinJo6Tlmwre+8K8EJdHK6Afy8bsOsmOMB9N5tH7gMvPFJTdwBO/DRbUbgA7DxSX7rHH/4wj3u+gXQPf+vnKo97uL50d9/fmFjCtQD84vXt9RzuK/Wlo9/tCCeHe6K+dOw77yJToTwv8MTp2jj+lxvZkvSmwOknRV3c8V+eznrkTYEfzOrhGHDi9Z1s7XlTVFUYynCP79z7Q6aWtClwmcmauC9orXUeN4Kqh9Na6/vb2Y9VUDWX4zD9n3kCkqRKCtI0ybdkyAbgofS3jWMSNXN+BuBnWmdqjs9OqG5ow7TWWuvfp+9dWmdgXr1xVuvZrXwixxn4cXuBAWMtlwtLNJJ0lW461nCCrmJkLbsh8cV9iyE1tTc+shhSs9b2vkUckXjLYoROgnaFvcIaCRLSIk6SUBZXM0pmDCFrF18cDOg9a7hL6wh+ZU+6YApvVtBdULcTB/+Gd25UcIx1k6POAMfORfncsz7Oh/d0Hjeuvf6a+2BP5XA0qY1jPtipHI4pWMUJkjUdNPPBToWF8pP0pFVcoOri6LU8TkIN6vUUtga6dbuQRqu4npdhLui1PC7GRVUvDKI90PXbhQLPUPbs4bYQ1NwiQnug6/ligAs0wOnYgEsnM2IVHAqRey+JLYGS1eAG3EuGl/vrmdXIwxVwPzHc7A9FKtWiSbS88kxTzOHZV1KpVqBWwJlKPOHFWQo3iyI0ukYjTYtUyFFR2AwXRfvsb3PdDRGOmuLYYtqeJthsOA6rEVuUzTyJ4b1mODlyeKqqNGsWYZEMO/Muy6Zw4qa4/vo8IPWuYdgwOiXhD+buzuXUtH7MRDBJcJ5qioOn5uri7ErUcJKGobXImDmLo3YznINklS0PRMQbSieTVYhsig2nfJdnVQpGKllxzxRCVr6PsjL+iJPyAwNC2i99emtagetjUVphAFC+UOafVeKlcCQAlK0NYfpqxSIe9JKyFwkBlG0GbNFu1ZjcS7l2IcsHWo5dUVHpcFM4KVE6adKGVGeqcGOxPG57dr48THBJr4CLvivLm9ZNrVaLBFC2CdVF+NXcvorCIyndnhe8FLeG7qAig3VTLX9BOBU4v08flPfCVOj5JJzSTS5rWHvHKd/NnJ5M2oIjynA+vD23POlKr3kcgMsyXBfO6/2Ktsi8vVVayuiCuFoFx6MKnCdWki4sw4Wg4ytMXbrg/bJdqBtgaysE4y5aftlE5wZaq+G4W1a42EDr2yvgOFqdMm8boeWDVsCx0gWd2+BdSVgBVzoubqPdnS6PYxWnFWyjvfnyWyvgytfCSjy0iQsr4MqHPQH3FJ5bPnZ8WVXg1k7h3PK4P6EKd2EV3KQi8MXac/j6CllBFc4/hz/D0kXAl54WL1nEdaW0hmNAV473LOJC0bW2orMFbAjYxJ2yiOPA19JzAGFj3Pn0EpRpM1wbeCqN+2tj3NMpHL1sA7fQGGt4REcb+Htqp1bTA0TawI9TuKanpXDgWgrXamgpDLiWik55w5NmSNBLqS3MvOk5ODG1U7hW01N6gt1HUjiGhpZCn7mpAYCh5qqARLxXUgEUiaaTbjTJ4ppOCQYipS+JTsPFsTRh6XCPCQwbbX0IrmUibwU1biTeNB3o44ojmISdywWCGaxNgnIAt1Bz0YfRJRwK+SDiaFccVmLsXPsKsHhYz/kRjEev1MXdxFFnttS5Nvdsqg7+2zZVB39fwN5pXXC3pcVT3cCjyKLqwDdCi6oDC32LqgMLO549Guim80eLONyj2CbuLqxeO3Zxz9vFnbaL+7Jd3Lpd3Ar52X8BXSURa9qZGGgAAAAASUVORK5CYII=);

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

background-size: 100%;

top: 0;

}

.shopping-cart-empty .cart{

width: 5.83333rem;

height: 7.46rem;

background: transparent url(data:image/png;base64,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) no-repeat;

background-size: 100%;

margin: 0 auto;

}

.shopping-cart-empty .button {

width: 8.46667rem;

height: 1.5rem;

display: block;

margin: 20rpx auto;

}

.empty-text {

font-size: .64667rem;

color: #222;

margin-top: .53333rem;

line-height: .74667rem;

font-weight: 400;

}

.button-primary {

border: 1px solid #de3c96;

color: #de3c96;

text-decoration: none;

text-align: center;

display: block;

border-radius: .21267rem;

line-height: 1.5rem;

-webkit-appearance: none;

background: none;

padding: 0 .26667rem;

margin: 0;

white-space: nowrap;

position: relative;

text-overflow: ellipsis;

font-size: .74333rem;

font-family: inherit;

cursor: pointer;

user-select: none;

}

.cart_container {

display: flex;

flex-direction: row;

background-color: #FFFFFF;

margin-bottom: 10rpx;

}

.scroll {

margin-bottom: 120rpx;

}

.column {

display: flex;

flex-direction: column;

}

.row {

display: flex;

flex-direction: row;

align-items: center;

}

.sku {

margin-left: 100rpx;

position: absolute;

right: 30rpx;

margin-top: 30rpx;

}

.sku-price {

color: red;

position: relative;

margin-top: 30rpx;

}

.price {

color: red;

position: relative;

}

.title {

font-size: 32rpx;

margin-top: 40rpx;

}

.small_text {

font-size: 28rpx;

margin-right: 40rpx;

margin-left: 25rpx;

}

.item-select {

width: 40rpx;

height: 40rpx;

margin-top: 90rpx;

margin-left: 20rpx;

}

.item-allselect {

width: 40rpx;

height: 40rpx;

margin-left: 20rpx;

margin-top:25rpx;

}

.item-image {

width: 180rpx;

height: 180rpx;

margin: 20rpx;

}

.bottom_line {

width: 100%;

height: 2rpx;

background: lightgray;

}

.bottom_total {

position: fixed;

display: flex;

flex-direction: column;

bottom: 0;

width: 100%;

height: 120rpx;

line-height: 120rpx;

background: white;  /* margin-top: 300rpx; */

border-top: 1rpx solid #ccc;  z-index: 99;

}

.button-red {

background-color: #f0145a;

position: fixed;

right: 0;

color: white;

text-align: center;

display: inline-block;

font-size: 30rpx;

border-radius: 0rpx;

width: 30%;

height: 120rpx;

line-height: 120rpx;  /* border: 1rpx solid #ccc; */

}

cart.js

/**

* 页面的初始数据

*/

data: {

carts: [], //数据

iscart: false,

hidden: null,

isAllSelect: false,

totalMoney: 0,

},

onShow: function () {

// 获取产品展现页保存的缓存数据(购物车的缓存数组，没有数据，则赋予一个空数组)

var arr = wx.getStorageSync('cart') || [];

console.info("缓存数据："+arr);    // 有数据的话，就遍历数据，计算总金额 和 总数量

if (arr.length > 0) {

// 更新数据

this.setData({

carts: arr,

iscart: true,

hidden: false

});

console.info("缓存数据：" + this.data.carts);

}else{

this.setData({

iscart: false,

hidden: true,

});

}

},

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

cart.js

//勾选事件处理函数

switchSelect: function (e) {

// 获取item项的id，和数组的下标值

var Allprice = 0, i = 0;

let id = e.target.dataset.id,

index = parseInt(e.target.dataset.index);

this.data.carts[index].isSelect = !this.data.carts[index].isSelect;    //价钱统计

if (this.data.carts[index].isSelect) {

this.data.totalMoney = this.data.totalMoney + (this.data.carts[index].price * this.data.carts[index].count);

}    else {

this.data.totalMoney = this.data.totalMoney - (this.data.carts[index].price * this.data.carts[index].count);

}

//是否全选判断

for (i = 0; i < this.data.carts.length; i++) {

Allprice = Allprice + (this.data.carts[index].price * this.data.carts[index].count);

}

if (Allprice == this.data.totalMoney) {

this.data.isAllSelect = true;

}    else {

this.data.isAllSelect = false;

}

this.setData({

carts: this.data.carts,

totalMoney: this.data.totalMoney,

isAllSelect: this.data.isAllSelect,

})

},

//全选

allSelect: function (e) {

//处理全选逻辑

let i = 0;

if (!this.data.isAllSelect) {

this.data.totalMoney = 0;

for (i = 0; i < this.data.carts.length; i++) {

this.data.carts[i].isSelect = true;

this.data.totalMoney = this.data.totalMoney + (this.data.carts[i].price * this.data.carts[i].count);

}

}    else {

for (i = 0; i < this.data.carts.length; i++) {

this.data.carts[i].isSelect = false;

}

this.data.totalMoney = 0;

}

this.setData({

carts: this.data.carts,

isAllSelect: !this.data.isAllSelect,

totalMoney: this.data.totalMoney,

})

},  // 去结算

toBuy() {

wx.showToast({

title: '去结算',

icon: 'success',

duration: 3000

});

this.setData({

showDialog: !this.data.showDialog

});

},  //数量变化处理

handleQuantityChange(e) {

var componentId = e.componentId;

var quantity = e.quantity;

this.data.carts[componentId].count.quantity = quantity;

this.setData({

carts: this.data.carts,

});

},

/* 减数 */

delCount: function (e) {

var index = e.target.dataset.index;

console.log("刚刚您点击了加一");

var count = this.data.carts[index].count;    // 商品总数量-1

if (count > 1) {

this.data.carts[index].count--;

}

// 将数值与状态写回

this.setData({

carts: this.data.carts

});

console.log("carts:" + this.data.carts);

this.priceCount();

},

/* 加数 */

addCount: function (e) {

var index = e.target.dataset.index;

console.log("刚刚您点击了加+");

var count = this.data.carts[index].count;    // 商品总数量+1

if (count < 10) {

this.data.carts[index].count++;

}

// 将数值与状态写回

this.setData({

carts: this.data.carts

});

console.log("carts:" + this.data.carts);

this.priceCount();

},

priceCount: function (e) {

this.data.totalMoney = 0;

for (var i = 0; i < this.data.carts.length; i++) {

if (this.data.carts[i].isSelect == true) {

this.data.totalMoney = this.data.totalMoney + (this.data.carts[i].price * this.data.carts[i].count);

}

}

this.setData({

totalMoney: this.data.totalMoney,

})

},

/* 删除item */

delGoods: function (e) {

this.data.carts.splice(e.target.id.substring(3),1);    // 更新data数据对象

if (this.data.carts.length > 0) {

this.setData({

carts: this.data.carts

})

wx.setStorageSync('cart', this.data.carts);

this.priceCount();

} else {

this.setData({

cart: this.data.carts,

iscart: false,

hidden: true,

})

wx.setStorageSync('cart', []);

}

}

备注

微信小程序微商城系列 都是经过https 动态获取数据并展现的，建议从第一篇开始阅读。你们多多支持本系列文章会继续更新下去，谢谢各位！你们在使用过程当中有哪些建议能够提出来，咱们一块儿学习哈~~~

微信小程序微商城系列

关注咱们

若是须要源码能够关注“IT实战联盟”公*众*号并留言(微商城源码，5个字会收到源码下载地址，必定要看源码里面的操做手册会少走不少弯路)，也能够加入交流群和做者互撩哦~~~

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

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

    IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(七):动态API实现商品分类 看效果 购物车.gif 开发计划 1.商品详情页将商品信息放入缓存 2.购物车页 ...

  2. 【愚公系列】2022年10月 微信小程序-电商项目-商品购物车功能实现

    文章目录 前言 一.商品购物车功能实现 二.效果 前言 在电商的核心交易流程中,购物车是其中非常重要的一环,它承担商品加购.价格计算.促销活动展示等功能,与会员系统.商品系统.库存系统.订单系统等紧密 ...

  3. 微信小程序，分销系统，微商城 （广州企客猫微信小程序开发定制公司）

    有什么好处 商家为什么要做微信小程序. 其实小程序的火爆其根本在于旺盛的市场需求.小程序的诞生解决了两个方 小程是什么???      小程序是一种无需下载安装,即可使用的手机应用.只需要扫描二维码, ...

  4. 微信小程序微商城（九）：微信授权并实现个人中心页面页面

    IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(八):缓存实现商品购物车功能 看效果 开发计划 1.实现微信授权并获取用户信息 2.个人中心页面布局 一.实现 ...

  5. 基于go语言结合微信小程序开发的微商城系统

    最近我录制的一门<Golang微信小程序微商城系统原型>,这门免费课程特别适合在校大学生或者刚毕业的大学生,go语言初学者以及想要从事微商城开发项目入门的小伙伴们来学习.在课程当中我不仅仅 ...

  6. 如何开通微信商城？微商城的开通方法？

    开通微信商城很简单,步骤如下: 第一步:在微信公众平台注册微信服务号,并且开通微信支付. 第二步:找第三方微商城平台购买微商城系统,将购买的微商城系统和申请的微信服务号绑定. 第三步:在微商城系统内装 ...

  7. 微信小程序微商城（五）：动态API实现商品详情页（下）

    IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(四):动态API实现商品详情页(上) 看效果 加入购物车.gif 开发计划 1.加入购物车悬浮框.商品数量.价 ...

  8. (开源)基于vue, react, node.js, go开发的微商城（含微信小程序）

    微商城 地址: https://github.com/shen100/wemall 求star,求关注 项目截图 微信小程序 项目环境搭建 1 克隆代码 git clone https://githu ...

  9. node.js+小程序基于微信小程序的校园失物招领系统毕业设计源码072343

    微信小程序的校园失物招领系统 摘  要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的校 ...

最新文章

  1. 面向行人重识别的局部特征研究进展、挑战与展望
  2. 修改ie9默认的quirk模式
  3. IIS7 Request format is unrecognized.
  4. 使用beanUtils操纵bean的属性
  5. SQ 小车避障 Intel Realsense D435 基于线性梯度的深度值过滤
  6. Knox网关、网关简介、概述、支持的Apache Hadoop服务、支持的Apache Hadoop生态系统的UI、参考资料
  7. 自定义Toolbar的一些小技巧
  8. mysql 表死锁_为什么说 MySQL 的表锁不会产生死锁
  9. 开源项目怎么变成自己的_将产品变成开源项目的深入指南
  10. 试试看读一下Zepto源码
  11. Atitit SpringCloud 使用总结 目录 1.1. 启动一个服务注册中心EurekaServer 1 1.2. 三、创建一个服务提供者 (eureka client) 2 1.3. 创建
  12. jxl java mer_导出报表出错,有没有大神懂得
  13. 操作系统进程调度算法总结
  14. Arduino UNO+TB6600驱动器控制步进电机正反转
  15. 微信小程序构建新闻列表
  16. 百度直连+cns完美，那怎么搭建CNS配合百度直连呢
  17. 怎样批量解析手机端头条视频和封面图片并保存
  18. Linux环境搭建 - update https://apt.repos.intel.com 报错
  19. Efficient Graph-Based Image Segmentation论文思路
  20. 软件测试工资一般是多少？

热门文章

  1. android之menu,一起学Android之Menu
  2. java e.getmessage() null,浅谈Java异常的Exception e中的egetMessage()和toString()方法的区别...
  3. flutter 微信语言选择_flutter实战项目，教你使用flutter打造微信app页面！
  4. java环境变量的配置_一文带你学会Java环境变量配置（小白向）
  5. layui table动态选中_微信炫酷炸啦！超视觉动态壁纸来了，还自带音效！
  6. linux里面的perl脚本怎么调用函数,如何在我的Perl脚本中包含另一个文件的函数？...
  7. c语言编写的键盘记录程序,C程序读取键盘码的方法
  8. MATLAB信号处理之信号的积分和微分
  9. MySQL修改主键初始值为1
  10. java中jsp怎么传递参数_急！Java问题，Java如何获得jsp传递的参数？？