pp电子

登录

免费开通

小程序商城购物车功效开发要领

—— 2018 ——

05/30

00:00

泉源：互联网

作者：佚名

栏目：小程序开发

2018/5/30 0:00:00 泉源：互联网作者：佚名

小程序商城购物车功效是很是普遍的一个为各人介绍的就是购物车，，，这里演示从商品列表中添加到购物车。。。。。

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

小程序商城购物车功效开发要领

结构剖析：

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

index.wxml：

<!--主盒子--> 
<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> 
<img class="good-img" src="{{item.imgUrl}}" /> 
</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> 
<img bindtap="addcart" class="cart" id="{{item.id}}" src=/miniprogramschool/images/new_73.jpg" /> 
</view> 
</view> 
</view> 
</block> 
</view> 
</view>

index.wxss：

<code class="language-text">[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:&#39;&#39;;  
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;  
}  
</code>

index.js：

数据部分，，，一般情形都是会见接口获取数据的，，，这里并没有使用网络会见，，，为了简化demo，，，直接把一组数据放在data工具中。。。。。同砚们可以凭证其数据结构自己编写后台接口。。。。。

<code class="language-text">[javascript] view plain copy
Page({  
   data: {  
       goodslist: [  
           {  
               id:&quot;001&quot;,  
               imgUrl:&quot;https://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;女装T恤中长款大码摆裙春夏新款&quot;,  
               price:&quot;65.00&quot; 
           },  
           {  
               id:&quot;002&quot;,  
               imgUrl:&quot;https://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;火亮年龄季 男青年修身款圆领男士T恤&quot;,  
               price:&quot;68.00&quot; 
           },  
           {  
               id:&quot;003&quot;,  
               imgUrl:&quot;https://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;新款立体挂脖t恤女短袖大码宽松条纹V领上衣显瘦休闲春夏&quot;,  
               price:&quot;86.00&quot; 
           },  
           {  
               id:&quot;004&quot;,  
               imgUrl:&quot;https://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;男运动上衣春季上新品 上衣盛行装青年&quot;,  
               price:&quot;119.00&quot; 
           },  
           {  
               id:&quot;005&quot;,  
               imgUrl:&quot;https://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮&quot;,  
               price:&quot;69.00&quot; 
           },  
           {  
               id:&quot;006&quot;,  
               imgUrl:&quot;https://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;新款立体挂脖t恤短袖大码宽松条纹V领上衣显瘦休闲春夏&quot;,  
               price:&quot;86.00&quot; 
           },  
           {  
               id:&quot;007&quot;,  
               imgUrl:&quot;https://img0.imgtn.bdimg.com/it/u=789486313,2033571593&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮&quot;,  
               price:&quot;119.00&quot; 
           },  
           {  
               id:&quot;008&quot;,  
               imgUrl:&quot;https://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;男运动上衣春季上新品 上衣盛行装青年&quot;,  
               price:&quot;69.00&quot; 
           },  
       ]  
   },  
// 加入购物车 
   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(&#39;cart&#39;) || [];  
// 若是购物车有数据 
if(arr.length&gt;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元素进去，，，由于这个是购物车有的，，，直接更新目今数组即可） 
try {  
                               wx.setStorageSync(&#39;cart&#39;, 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(&#39;cart&#39;, arr)  
// 返回（在if内使用return，，，跳出循环节约运算，，，节约性能） 
return;  
               } catch (e) {  
                   console.log(e)  
               }  
           }  
       }  
   }  
})  
</code>

编写购物车部分，，，如下图所示：

结构剖析：

首先一个list的主盒子，，，接着是item盒子，，，这是必需的。。。。。

然后把item分成左侧的图片部分，，，和右侧的说明部分（item盒子使用横向弹性盒）

右侧的说明部分又分上下2部分（右侧说明部分盒子使用纵向弹性盒）

下面价钱、购物加减、购物车部分（使用纵向弹性盒）

最下面的购物加减、购物车部分（使用横向弹性盒，，，中心使用justify-content: space-between;填充空缺）

cart.wxml：

<code class="language-text">[html] view plain copy
<!--要是够车内没有数据，，，就行显示没有数据--> 
<view class="cart" hidden="{{iscart}}"> 
<img src=/miniprogramschool/"/images/cart.png" /> 
<view>购物车什么都没有，，，赶忙去购物吧</view> 
</view> 
<!--要是有数据，，，就显示数据--> 
<view class="cartList" hidden="{{!iscart}}"> 
<!--header--> 
<view class="baoyou"></view> 
<!--list item--> 
<block wx:for="{{cart}}"> 
<view class="goods"> 
<!--左侧图片--> 
<view> 
<img class="good-img" src="{{item.imgUrl}}" /> 
</view> 
<!--右侧说明部分--> 
<view class="good-cont"> 
<!--文字说明--> 
<view class="goods-navigator"> 
<text class="good-name">{{item.name}}</text> 
</view> 
<!--价钱和购物加减的父盒子--> 
<view class="good-price"> 
<text class="price">￥{{item.price}}</text> 
<view class="btn-box"> 
<view class="btn"><button bindtap="delCount" id="del{{index}}" size="mini" type="default">-</button> 
<input value="{{item.count}}" /><button bindtap="addCount" id="add{{index}}" size="mini" type="default">+</button> 
</view> 
<img bindtap="delGoods" id="img{{index}}" src=/miniprogramschool/"/images/del2.png" /> 
</view> 
</view> 
</view> 
</view> 
</block> 
<!--footer--> 
<view class="total"> 
<view class="total_text">合计：<text>￥{{total}}</text></view><button class="total_js" size="mini">去结算({{goodsCount}})</button> 
</view> 
</view> 
</code>

cart.wxss：

<code class="language-text">[css] view plain copy
page {  
background: #f2ebe3;  
}  

.cart {  
padding: 100px 0 0 0;  
display: flex;  
 justify-content: center;  
 flex-direction: column;  
 align-items: center;  
color: #999;  
}  

.cart image {  
width: 66px;  
height: 66px;  
margin-bottom: 20px;  
}  

.baoyou {  
font-size: 18px;  
color: #db2929;  
padding: 10px;  
}  

.goods {  
background: #fff;  
border-top: 1px solid #ddd;  
margin-bottom: 10px;  
padding: 10px 10px 0 10px;  
display: flex;  
}  

.goods image {  
width: 80px;  
height: 80px;  
border: 1px solid #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-box image {  
width: 23px;  
height: 23px;  
border: 0;  
margin: 0;  
}  

.goods .good-cont .good-price .btn {  
display: flex;  
 flex-direction: row;  
}  

.goods .good-cont .good-price .btn input {  
margin: 0;  
width: 40px;  
text-align: center;  
border: 1px solid #eee;  
font-size: 16px;  
height: 28px;  
}  

.goods .good-cont .good-price .btn button {  
margin: 0;  
}  

.total {  
height: 40px;  
display: flex;  
 flex-direction: row;  
 justify-content: space-between;  
padding: 0 20px;  
}  

.total .total_text {  
display: flex;  
color: #777;  
}  

.total .total_text text {  
color: #ec5151;  
}  

.total .total_js {  
color: #fff;  
background: #ec5151;  
height: 30px;  
margin: 0;  
}  
</code></pre>
</p>
<p>cart.js：</p>
<p class="highlight">
<pre>
<code class="language-text">[html] view plain copy
Page({  
   data: {  
       iscart: false,  
       cart: [], //数据  
       count: 1,   //商品数目默认是1  
       total: 0,    //总金额  
       goodsCount: 0 //数目  
   },  
   onLoad: function (options) {  

   },  
   onShow: function () {  
       var that = this;  
       // 获取产品展示页生涯的缓存数据（购物车的缓存数组，，，没有数据，，，则赋予一个空数组）  
       var arr = wx.getStorageSync(&#39;cart&#39;) || [];  
       // 有数据的话，，，就遍历数据，，，盘算总金额 和 总数目  
       if (arr.length &gt; 0) {  
           for (var i in arr) {  
               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 &lt;= 1) {  
           return;  
       }  
       // 商品总数目-1  
       this.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(&#39;cart&#39;, this.data.cart)  
       } catch (e) {  
           console.log(e)  
       }  
   },  
   /* 加数 */  
   addCount: function (e) {  
       // 商品总数目+1  
       this.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(&#39;cart&#39;, 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(&#39;cart&#39;, this.data.cart)  
       } catch (e) {  
           console.log(e)  
       }  
   }  
})  
</code>

demo：https://download.csdn.net/detail/michael_ouyang/9825344

【本站声明】
1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，若有知识产权人并不肯意我们使用，，，若是有侵权请连忙联系。。。。。
2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，仅系客观性形貌，，，如您需要相识该类商品/服务详细的资讯，，，请您直接与该类商品/服务的提供者联系。。。。。

KESION pp电子软件
KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。
KESION 一直通过手艺立异，，，提供产品和服务，，，助力企业向数字化转型，，，通过科技驱动商业刷新，，，让商业变得更智慧！

▼点击进入pp电子官网相识更多

热门标签

SaaS

上/下篇

微信小程序开发之小程序组件使用教程

以下为各人介绍小程序开发历程中，，，小程序组件的使用教程。。。。。小程序组件是小程序开发中很是主要的部分，，，是开发者必需掌握的手艺。。。。。...

微信小程序开发微信小程序SaaS 2018/5/30 0:00:00
微信小程序api有哪些,微信小程序api列表及使用说明

框架提供富厚的微信原生API，，，可以利便的调起微信提供的能力，，，如获取用户信息，，，外地存储，，，支付功效等。。。。。...

微信小程序SaaS 2018/5/28 0:00:00

换一换相关推荐

精选内容

热门精选

运营学院
模板超市
课程超市
授权盘问
下载体验
资质办理服务
手艺论坛

© 2006-2026 pp电子版权所有

ICP证闽B2-20190777 闽ICP备06009871号-1 JdPFEevTjyc2gv0eqUhR+TZ0r6FNfW8rjQju4bIixlNWoxViStHHLcXeCAIttKrJsbXY0hzT2KM0EQovG3f6IszmdycbiD4+09Zt81Jtjk15+yLm9NtJUr0qTyxvOf53dkeWWqyk4cqk0KW0HISNBvNLwgrbW4OugAAAAASUVORK5CYII=

JdPFEevTjyc2gv0eqUhR+TZ0r6FNfW8rjQju4bIixlNWoxViStHHLcXeCAIttKrJsbXY0hzT2KM0EQovG3f6IszmdycbiD4+09Zt81Jtjk15+yLm9NtJUr0qTyxvOf53dkeWWqyk4cqk0KW0HISNBvNLwgrbW4OugAAAAASUVORK5CYII=

闽公网安备 35020302001540号统一社会信用代码：91350206MA2XN2XQ4A 国家高新手艺企业编号：GR201735100465 软件企业证书号：厦RQ-2017-0034 软件产品证书号：厦RC-2017-0005 认证同盟企业编号：928180109031687687593 国际权威认证：信息手艺服务治理系统标准（ISO 20000）信息清静治理系统国际认证（ISO/IEC 27001）

pp电子·模拟器(试玩游戏)官方网站

pp电子·模拟器(试玩游戏)官方网站

pp电子·模拟器(试玩游戏)官方网站

【网站地图】