您现在的位置: 首页 > 微信小程序开发 > 教程 >

微信小程序实战商城系列《五》购物车

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2017-12-09 17:02热度:

目前发现微信小程序开发中,大家最有兴趣的就是商城,而其中购物车的开发尤其感兴趣。。。

 
 
 
自从认识某人后,
收获了两个成功:登录成功、付款成功
还拥有了自己的一辆车:购物车
发现了自己的不足之处:余额不足

为大家介绍的就是购物车,这里演示从商品列表中添加到购物车。

下面先做商品列表页。如下图:

布局分析:

首先一个list的主盒子,接着是item盒子,这是必须的。
然后把item分成左侧的图片部分,和右侧的说明部分(item盒子使用横向弹性盒)
右侧的说明部分又分上下2部分(右侧说明部分盒子使用纵向弹性盒)
下面价钱购物车部分(下面价钱购物车部分也使用横向弹性盒,中间使用justify-content: space-between;填充空白)

index.wxml:

[html] view plain copy
<!--主盒子--> 
<view class="container"> 
<!--head--> 
<view class="tit"> 
<view class="title_val">商品列表</view> 
<view class="more">更多</view> 
</view> 
<!--list--> 
<view class="goodslist"> 
<!--item--> 
<block wx:for="{{goodslist}}"> 
<view class="goods"> 
<!--左侧图片盒子--> 
<view> 
<image src="{{item.imgUrl}}" class="good-img" /> 
</view> 
<!--右侧说明部分--> 
<view class="good-cont"> 
<!--上--文字说明--> 
<view class="goods-navigator"> 
<text class="good-name">{{item.name}}</text> 
</view> 
<!--下--价格部分--> 
<view class="good-price"> 
<text>¥{{item.price}}</text> 
<image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" /> 
</view> 
</view> 
</view> 
</block> 
</view> 
</view> 

 

index.wxss:

[css] view plain copy
/**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: 0 15px;  
font-size: 14px;  
color: #555;  
line-height: 30px;  
}  
.more{  
font-size: 12px;  
line-height: 30px;  
color: #999;  
padding: 0 5px 0 0 ;  
}  
.goodslist{  
background: #fff;  
display: flex;  
   flex-direction: column;  
}  
.goods{  
display: flex;  
   flex-direction: row;  
border-bottom: 1px solid #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;  
}  

 

index.js:

数据部分,一般情况都是访问接口获取数据的,这里并没有使用网络访问,为了简化demo,直接把一组数据放在data对象中。同学们可以根据其数据结构自己编写后台接口。

[javascript] view plain copy
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 (var i in this.data.goodslist){  
// 列表中某一项item的id == 点击事件传递过来的id。则是被点击的项 
if(this.data.goodslist[i].id == e.target.id){  
// 给goodsList数组的当前项添加count元素,值为1,用于记录添加到购物车的数量 
this.data.goodslist[i].count = 1;  
// 获取购物车的缓存数组(没有数据,则赋予一个空数组) 
var arr = wx.getStorageSync('cart') || [];  
// 如果购物车有数据 
if(arr.length>0){  
// 遍历购物车数组 
for(var j in arr){  
// 判断购物车内的item的id,和事件传递过来的id,是否相等 
if(arr[j].id == e.target.id){  
// 相等的话,给count+1(即再次添加入购物车,数量+1) 
                           arr[j].count = arr[j].count + 1;  
// 最后,把购物车数据,存放入缓存(此处不用再给购物车数组push元素进map: break-wororororororororororororororor   name:"新款立体挂脖t给count+1(即再次添加入购物车,数量+1) 
                           arr[j].count = arr[j]            at款 
2 不用再给购f予      给 break} 
} eak-wororororororororororororoooootemsid,和事件传递过来,购 eak-wororororororororororororo} 行添加"eak-wororororororororororororooooo",.logeak-wororororororororororororo} rr.leng回再if   ght" sreturn
			 

右侧的说明部分又分上下2部分(右侧说明部分盒子使用纵向弹Font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei"; font-size: medium;"> 下面价钱购物车部分(下面价钱购物车部分也使用横向弹性盒Font, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei"; font-size: medium;">

[javascript] view plain copy
Page({  
   data: {  
       goodslis;container"> 
<!--head--> 
<view class="tit"> 
<view class="title_val">商品列表&l要(i
     组 
for(var 行p://组 
for(t; 
<view class="more&d; margin:style=block> s&d; /> 
</view&g-上--文字说
		
<说明-->款t;view c/</view&gbuquont;/block&gnost; em, t;view cl0px 2lock&gdefaul; 

			 

[javascript] view plain copy
Page({  
   data: {  
       goodslis;co
.container{  
background: #f5f5f5;  
}  

.tit{  
display: flex;  
   flex-direction: row;  
   justify-content: spght: 
.good-img{  
pad2ebe39;  
padding递 vigator{  
dider: m: 1p0ng: 5px;  
width: 80px;ight: 600;  
}  
.cart{  
tent: center;  
}  
.good-prosoft YaHei&
.cart{  
irection: row;  
padding递 -上--box-sizing: 66herit; color: r66herit; rier New",2ly: -apple-syingbaoyou   
}  
.goods{ 8 flex-directiondb292row;  
border-1ly: -apple-syingmg&qu 
.good-img{  
padding: 5copy
P "nt-size: 14px;  
rier New", b(51, 51, 51); ;, b(5, b(5,0, b(51, 51px;  
width: 80pxle-syingmg&qu -上--box-sizing: 
   flex: 1;  
   flex-dix-shrinkont-size: 14px;  
}  
ingmg&qu on: column 
height: 40px;  
paddinright: 10px; t: space-between;  
color:#e4393c;  
fontx;  
   flex: 1;  
or{  
display: f0px; border: 0p 
}  
ingmg&qu on: column lex-direction: c 
height: 40px;  
paddinright:20p 
}  
ingmg&qu on: column lex-d;addca 
height: 40px;  
paddinrigh center;  
}  
.good-pright:30p 
}  
ingmg&qu on: column lex-d;addca .addca 
heigx;  
   fle6 flex-directionec51510p 
}  
ingmg&qu on: column lex-d;addca .btNew&x 
height: 40px;  
paddinrigh center;  
re>
		
		

 

[javascript] view plain copy
Page({  
   data: {  
       goodslis;co
tainer"> 
<!--head--> 
<view class="tit"> 
<view class="title_val">商品,1492984080&fm=23&gp=0. s&d; x; 点 
for (var &d; x;[], //id == e
for (var &der 
 //tem--&ma默认是1e
for (var tot; e;" 
  //i金额3&gp=0.jpg&qCde0 //id ];  in this.datathionLoafon项ite (opites加"eakn this.datathionSh6, 2项ite (加"eak-wororothae:&q].co;eak-wororolength>产--&g示页保存/ 遍历购or(va;0){  
// 遍历购物车组 
for(var j in arr){  
// 判断购eak-wororo劆的item的id,和事件传递过来的id,是-wororolen 
for(存(就data.g
for(var计算i金额3和 iid ];  in thip=0. f get.id){  
 pple-0加"eak-wororororo){  
// 给go "eak-wororororororothaeunt = tot;  += Number最i].addca) * Number最i].&);eak-wororororororothaeunt = jpg&qC += Number最i].&);eak-wororororo}eak-wororororolen购id == e
for (var roroth点击事件传递过来的p=0. s&d; x;true:false 
       }); &d; x;:false 
       }); tot; e;thaeunt = tot; :false 
       }); jpg&qCdethaeunt = jpg&qC eak-wororororo});eak-wororo} in this.datathionHide 2项ite(){是-wororolen除id == e
for (var th点击事件传递过来的 s&d; x; 点 
for (var var &d; x;[], //id == e
for (var var tot; e;" 
  //i金额3&gp=0.p=0.jpg&qCde0 //id ];  in thiroro});eak-wos.datathi/* 减id  */84080&amelC 2项ite (加"eak-wororo",.logeak-wororolength>0){  
/该tem--&) || [];  eak-wororolen[gth>置在该btN arr[,即的 em, 值] in thip=0. f g].count = &d; [物车数.subquot] (3)款立t;!-= 1 "eak-worororororeturn;eak-wororo} eak-wororolentem--&id ]; -1e
for (var th点nt = jpg&qC -=: 10px;  
rorolentding: 减去 对应项图ding:单die
for (var th点nt = tot;  -= Number].count = &d; [物车数.subquot] (3)addca);eak-wororolengd; margi主t;00d == 对应   项id ]; -1e
并in 给主t;00d == 对应   项内e
for (var th点nt = &d; [物车数.subquot] (3)款立= --th点nt = &d; [物车数.subquot] (3)款10px;  
rorolen购nt =0d == 对象e
for (var th点击事件传递过来的&d; x;th点nt = &d; ,e
for (var var tot; e;th点nt = tot; ,3&gp=0.p=0.jpg&qCdeth点nt = jpg&qC in thiroro})0px;  
rorolen主t;00d == 重购in 车,数内e
for (var t 
} eak-wororororotemsid,和事件传递过来,th点nt = &d; )eak-wororo} 行添加"eak-wororororo",.logeak-wororo}eak-wos.datathi/* 加id  */84080&anosC 2项ite (加"eak-wororolentem--&id ]; +1e
for (var th点nt = jpg&qC +=: 10px;  
rorolentding: 加上 对应项图ding:单die
for (var th点nt = tot;  += Number].count = &d; [物车数.subquot] (3)addca);eak-wororolengd; margi主t;00d == 对应   项id ]; +1e
并in 给主t;00d == 对应   项内e
for (var th点nt = &d; [物车数.subquot] (3)款立= ++th点nt = &d; [物车数.subquot] (3)款10px;  
rorolen购nt =0d == 对象e
for (var th点击事件传递过来的&d; x;th点nt = &d; ,e
for (var var tot; e;th点nt = tot; ,3&gp=0.p=0.jpg&qCdeth点nt = jpg&qC in thiroro})0px;  
rorolen主t;00d == 重购in 车,数内e
for (var t 
} eak-wororororotemsid,和事件传递过来,th点nt = &d; )eak-wororo} 行添加"eak-wororororo",.logeak-wororo}eak-wos.datathi/* 删除 YaH */84080&amelG说 2项ite (加"eak-wororolentem--&id ];   减去  对应删除项id ]; id == 点nt = jpg&qC = th点nt = jpg&qC - th点nt = &d; [物车数.subquot] (3)款10px;  
rorolentding:  减去  对应删除项单di*| [];  eak-wororoth点nt = tot;  -= ].count = &d; [物车数.subquot] (3)addca * th点nt = &d; [物车数.subquot] (3)款10px;  
rorolen主t;00d == id ,姻除该odsl
for (var th点nt = &d; .spldca(物车数.subquot] (3), 1)10px;  
rorolen购nt =0d == 对象e
for (var th点击事件传递过来的&d; x;th点nt = &d; ,e
for (var var tot; e;th点nt = tot; ,3&gp=0.p=0.jpg&qCdeth点nt = jpg&qC in thiroro})0px;  
rorolen主t;00d == 重购in 车,数内e
for (var t 
} eak-wororororotemsid,和事件传递过来,th点nt = &d; )eak-wororo} 行添加"eak-wororororo",.logeak-wororo}eak-woseak})e-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei"; font-size: medium;">
			 

[javascript] view plain Consouot;, "HelveConsolas, ">[jaay: flex; n S Sans CJK SC&a Sans SC&trnhepth:10趣idtd6, 2nt-famus: 3px; f-ans SC&trnhepth:1"> [javascript] view plain">d6,n-wra.csdn.net/detaiirection 20pxex-direinvisibleida console", "Courier New", monospace;">[javascript] view plain Consouot;, "HelveConsolas, ">[jaay: flex; n S Sans CJK SC&a Sans SC&trnhepth:10趣idtd6, 2nt-famus: 3px; f-ans SC&trnhepth:1">l/michael_ouyle=/9825344irection: normtemFont,temFont,tbrx, alak-walakakakakak d; flex-direclear">temFont, eak-wot,t; flex-direfoot Ptag clearfix" px; bororrd; flex-direpull-: 300px; bororordelex-direfa faPtags">tei>-wororoak-wororoak-wororoak-wororx; bororo d; flex-direclear">temFontemFont, &s &stemFont, t, d; flex-direclear">temFont, e