1.
续上一篇的文章:微信小程序之商品属性分类——微信小程序实战商城系列(4)自从认识某人后,我收获了两个成功。登录成功、付款成功,而且还拥有了自己的一辆车:购物车也发现了自己的不足之处:余额不足。2.为大家介绍的就是购物车
3.这里演示从商品列表中添加到购物车
4.下面先做商品列表页。如下图:
5.
6.
7.
8.布局分析:
9.首先一个list的主盒子,接着是item盒子,这是必须的。然后把item分成左侧的图片部分,和右侧的说明部分(item盒子使用横向弹性盒)右侧的说明部分又分上下2部分(右侧说明部分盒子使用纵向弹性盒)下面价钱购物车部分(下面价钱购物车部分也使用横向弹性盒,中间使用justify-content:space-between;填充空白)
10.
11.
12.
13.index.wxml:
!--主盒子--viewclass="container"!--head--viewclass="tit"viewclass="title_val"商品列表/viewviewclass="more"更多/view/view!--list--viewclass="goodslist"!--item--blockwx:for="{{goodslist}}"viewclass="goods"!--左侧图片盒子--viewimagesrc="{{item.imgUrl}}"class="good-img"//view!--右侧说明部分--viewclass="good-cont"!--上--文字说明--viewclass="goods-navigator"textclass="good-name"{{item.name}}/text/view!--下--价格部分--viewclass="good-price"text¥{{item.price}}/textimageid="{{item.id}}"class="cart"src="/images/new_73.jpg"bindtap="addcart"//view/view/view/block/view/view14.index.wxss:
/**index.wxss**/page{height:100%;}.container{background:#f5f5f5;}.tit{display:flex;flex-direction:row;justify-content:space-between;height:30px;position:relative;}.tit::before{content:'';background:#ffcc00;width:5px;height:100%;position:absolute;left:0;top:0;}.title_val{padding:015px;font-size:14px;color:#555;line-height:30px;}.more{font-size:12px;line-height:30px;color:#999;padding:05px00;}.goodslist{background:#fff;display:flex;flex-direction:column;}.goods{display:flex;flex-direction:row;border-bottom:1pxsolid#ddd;}.good-img{padding:5px;width:80px;height:80px;}.good-cont{display:flex;flex:1;flex-direction:column;font-size:14px;}.goods-navigator{display:flex;flex:1;flex-direction:column;justify-content:center;}.good-name{display:flex;flex:1;flex-direction:column;color:#555;justify-content:center;}.good-price{display:flex;flex:1;flex-direction:row;justify-content:space-between;color:#e4393c;font-weight:600;}.cart{width:40px;height:40px;padding-right:10px;}15.index.js:
数据部分,一般情况都是访问接口获取数据的,这里并没有使用网络访问,为了简化demo,直接把一组数据放在data对象中。同学们可以根据其数据结构自己编写后台接口Page({data:{goodslist:[{id:"001",imgUrl:"http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg",name:"女装T恤中长款大码摆裙春夏新款",price:"65.00"},{id:"002",imgUrl:"http://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg",name:"火亮春秋季男青年修身款圆领男士T恤",price:"68.00"},{id:"003",imgUrl:"http://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg",name:"新款立体挂脖t恤女短袖大码宽松条纹V领上衣显瘦休闲春夏",price:"86.00"},{id:"004",imgUrl:"http://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg",name:"男运动上衣春季上新品上衣流行装青年",price:"119.00"},{id:"005",imgUrl:"http://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg",name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",price:"69.00"},{id:"006",imgUrl:"http://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg",name:"新款立体挂脖t恤短袖大码宽松条纹V领上衣显瘦休闲春夏",price:"86.00"},{id:"007",imgUrl:"http://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg",name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",price:"119.00"},{id:"008",imgUrl:"http://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg",name:"男运动上衣春季上新品上衣流行装青年",price:"69.00"},]},//加入购物车addcart:function(e){this.setData({toastHidden:false});//遍历列表与购物车列表for(variinthis.data.goodslist){//列表中某一项item的id==点击事件传递过来的id。则是被点击的项if(this.data.goodslist[i].id==e.target.id){//给goodsList数组的当前项添加count元素,值为1,用于记录添加到购物车的数量this.data.goodslist[i].count=1;//获取购物车的缓存数组(没有数据,则赋予一个空数组)vararr=wx.getStorageSync('cart')||[];//如果购物车有数据if(arr.length0){//遍历购物车数组for(varjinarr){//判断购物车内的item的id,和事件传递过来的id,是否相等if(arr[j].id==e.target.id){//相等的话,给count+1(即再次添加入购物车,数量+1)arr[j].count=arr[j].count+1;//最后,把购物车数据,存放入缓存(此处不用再给购物车数组push元素进去,因为这个是购物车有的,直接更新当前数组即可)try{wx.setStorageSync('cart',arr)}catch(e){console.log(e)}//返回(在if内使用return,跳出循环节约运算,节约性能)return;}}//遍历完购物车后,没有对应的item项,把goodslist的当前项放入购物车数组arr.push(this.data.goodslist[i]);}//购物车没有数据,把item项push放入当前数据(第一次存放时)else{arr.push(this.data.goodslist[i]);}//最后,把购物车数据,存放入缓存try{wx.setStorageSync('cart',arr)//返回(在if内使用return,跳出循环节约运算,节约性能)return;}catch(e){console.log(e)}}}}})16.编写购物车部分,如下图所示:
17.
18.
19.
20.布局分析:
21.首先一个list的主盒子,接着是item盒子,这是必须的。
22.然后把item分成左侧的图片部分,和右侧的说明部分(item盒子使用横向弹性盒)
23.右侧的说明部分又分上下2部分(右侧说明部分盒子使用纵向弹性盒)
24.下面价钱、购物加减、购物车部分(使用纵向弹性盒)
25.最下面的购物加减、购物车部分(使用横向弹性盒,中间使用justify-content:space-between;填充空白)
26.
27.
28.cart.wxml:
!--要是够车内没有数据,就行显示没有数据--viewclass="cart"hidden="{{iscart}}"imagesrc="/images/cart.png"/view购物车什么都没有,赶快去购物吧/view/view!--要是有数据,就显示数据--viewclass="cartList"hidden="{{!iscart}}"!--header--viewclass="baoyou"/view!--listitem--blockwx:for="{{cart}}"viewclass="goods"!--左侧图片--viewimagesrc="{{item.imgUrl}}"class="good-img"//view!--右侧说明部分--viewclass="good-cont"!--文字说明--viewclass="goods-navigator"textclass="good-name"{{item.name}}/text/view!--价钱和购物加减的父盒子--viewclass="good-price"textclass="price"¥{{item.price}}/textviewclass="btn-box"viewclass="btn"buttonid="del{{index}}"type="default"size="mini"bindtap="delCount"-/buttoninputvalue="{{item.count}}"/buttonid="add{{index}}"type="default"size="mini"bindtap="addCount"+/button/viewimageid="img{{index}}"src="/images/del2.png"bindtap="delGoods"//view/view/view/view/block!--footer--viewclass="total"viewclass="total_text"合计:text¥{{total}}/text/viewbuttonclass="total_js"size="mini"去结算({{goodsCount}})/button/view/view29.cart.wxss:
page{background:#f2ebe3;}.cart{padding:100px000;display:flex;justify-content:center;flex-direction:column;align-items:center;color:#999;}.cartimage{width:66px;height:66px;margin-bottom:20px;}.baoyou{font-size:18px;color:#db2929;padding:10px;}.goods{background:#fff;border-top:1pxsolid#ddd;margin-bottom:10px;padding:10px10px010px;display:flex;}.goodsimage{width:80px;height:80px;border:1pxsolid#ddd;}.goods.good-cont{display:flex;flex:1;flex-direction:column;color:#555;font-size:14px;padding:5px;height:100px;}.goods.good-cont.goods-navigator{display:flex;flex:2;}.goods.good-cont.good-price{display:flex;flex-direction:column;flex:3;}.goods.good-cont.good-price.price{font-size:16px;color:#ec5151;}.goods.good-cont.good-price.btn-box{display:flex;flex-direction:row;justify-content:space-between;}.goods.good-cont.good-price.btn-boximage{width:23px;height:23px;border:0;margin:0;}.goods.good-cont.good-price.btn{display:flex;flex-direction:row;}.goods.good-cont.good-price.btninput{margin:0;width:40px;text-align:center;border:1pxsolid#eee;font-size:16px;height:28px;}.goods.good-cont.good-price.btnbutton{margin:0;}.total{height:40px;display:flex;flex-direction:row;justify-content:space-between;padding:020px;}.total.total_text{display:flex;color:#777;}.total.total_texttext{color:#ec5151;}.total.total_js{color:#fff;background:#ec5151;height:30px;margin:0;}30.cart.js:
Page({data:{iscart:false,cart:[],//数据count:1,//商品数量默认是1total:0,//总金额goodsCount:0//数量},onLoad:function(options){},onShow:function(){varthat=this;//获取产品展示页保存的缓存数据(购物车的缓存数组,没有数据,则赋予一个空数组)vararr=wx.getStorageSync('cart')||[];//有数据的话,就遍历数据,计算总金额和总数量if(arr.length0){for(variinarr){that.data.total+=Number(arr[i].price)*Number(arr[i].count);that.data.goodsCount+=Number(arr[i].count);}//更新数据this.setData({iscart:true,cart:arr,total:that.data.total,goodsCount:that.data.goodsCount});}},onHide:function(){//清除数据this.setData({iscart:false,cart:[],//数据total:0,//总金额goodsCount:0//数量});},/*减数*/delCount:function(e){console.log(e)//获取购物车该商品的数量//[获取设置在该btn的id,即list的index值]if(this.data.cart[e.target.id.substring(3)].count=1){return;}//商品总数量-1this.data.goodsCount-=1;//总价钱减去对应项的价钱单价this.data.total-=Number(this.data.cart[e.target.id.substring(3)].price);//购物车主体数据对应的项的数量-1并赋给主体数据对应的项内this.data.cart[e.target.id.substring(3)].count=--this.data.cart[e.target.id.substring(3)].count;//更新data数据对象this.setData({cart:this.data.cart,total:this.data.total,goodsCount:this.data.goodsCount})//主体数据重新赋入缓存内try{wx.setStorageSync('cart',this.data.cart)}catch(e){console.log(e)}},/*加数*/addCount:function(e){//商品总数量+1this.data.goodsCount+=1;//总价钱加上对应项的价钱单价this.data.total+=Number(this.data.cart[e.target.id.substring(3)].price);//购物车主体数据对应的项的数量+1并赋给主体数据对应的项内this.data.cart[e.target.id.substring(3)].count=++this.data.cart[e.target.id.substring(3)].count;//更新data数据对象this.setData({cart:this.data.cart,total:this.data.total,goodsCount:this.data.goodsCount})//主体数据重新赋入缓存内try{wx.setStorageSync('cart',this.data.cart)}catch(e){console.log(e)}},/*删除item*/delGoods:function(e){//商品总数量减去对应删除项的数量this.data.goodsCount=this.data.goodsCount-this.data.cart[e.target.id.substring(3)].count;//总价钱减去对应删除项的单价*数量this.data.total-=this.data.cart[e.target.id.substring(3)].price*this.data.cart[e.target.id.substring(3)].count;//主体数据的数组移除该项this.data.cart.splice(e.target.id.substring(3),1);//更新data数据对象this.setData({cart:this.data.cart,total:this.data.total,goodsCount:this.data.goodsCount})//主体数据重新赋入缓存内try{wx.setStorageSync('cart',this.data.cart)}catch(e){console.log(e)}}})运行结果:31.
32.
33.demo:http://download.csdn.net/detail/michael_ouyang/9825344
34.
更多小程序的教程微信开发者工具的快捷键微信小程序的文件结构——微信小程序教程系列(1)微信小程序的生命周期实例演示——微信小程序教程系列(2)微信小程序的动态修改视图层的数据——微信小程序教程系列(3)微信小程序的新建页面——微信小程序教程系列(4)微信小程序的如何使用全局属性——微信小程序教程系列(5)微信小程序的页面跳转——微信小程序教程系列(6)微信小程序标题栏和导航栏的设置——微信小程序教程系列(7)微信小程序的作用域和模块化——微信小程序教程系列(8)微信小程序视图层的数据绑定——微信小程序教程系列(9)微信小程序视图层的条件渲染——微信小程序教程系列(10)微信小程序视图层的列表渲染——微信小程序教程系列(11)微信小程序视图层的模板——微信小程序教程系列(12)微信小程序wxss的尺寸单位rpx——微信小程序教程系列(13)微信小程序的网络请求——微信小程序教程系列(14)微信小程序的百度地图获取地理位置——微信小程序教程系列(15)微信小程序使用百度api获取天气信息——微信小程序教程系列(16)微信小程序获取系统日期和时间——微信小程序教程系列(17)微信小程序之顶部导航栏实例——微信小程序实战系列(1)微信小程序之上拉加载(分页加载)实例——微信小程序实战系列(2)微信小程序之轮播图实例——微信小程序实战系列(3)微信小程序之仿androidfragment之可滑动的底部导航栏实例——微信小程序实战系列(4)微信小程序之登录页实例——微信小程序实战系列(5)微信小程序之自定义toast实例——微信小程序实战系列(6)微信小程序之自定义抽屉菜单(从下拉出)实例——微信小程序实战系列(7)微信小程序之自定义模态弹窗(带动画)实例——微信小程序实战系列(8)微信小程序之侧栏分类——微信小程序实战商城系列(1)微信小程序之仿淘宝分类入口——微信小程序实战商城系列(2)微信小程序之购物数量加减——微信小程序实战商城系列(3)微信小程序之商品属性分类——微信小程序实战商城系列(4)更多小程序的教程请查看:http://blog.csdn.net/michael_ouyang/article/details/54700871谢谢观看,不足之处,敬请指导
微信购物小程序案例-微信小程序之购物车——微信小程序实战商城系列(5)-微信小程序案例
浏览量:1773
时间:
来源:michael_ouyang
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

最新资讯
-
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些?阿坝藏族羌族小程序代理平台哪个好?阿坝藏族羌族小程序代理商怎么收费,代理政策如何?下面就让即速应用产品经理jisuapp.cn来告诉你吧!