微信小程序> 微信购物小程序案例-微信小程序之购物车——微信小程序实战商城系列(5)-微信小程序案例

微信购物小程序案例-微信小程序之购物车——微信小程序实战商城系列(5)-微信小程序案例

浏览量:1773 时间: 来源:michael_ouyang

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

14.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/view

29.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

谢谢观看,不足之处,敬请指导

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎