本文转自：http://blog.csdn.net/michael_ouyang/article/details/70755892

续上一篇的文章：微信小程序之商品属性分类  —— 微信小程序实战商城系列（4）

自从认识某人后，我收获了两个成功。登录成功、付款成功，而且还拥有了自己的一辆车：

购物车

也发现了自己的不足之处：

余额不足。

为大家介绍的就是购物车

这里演示从商品列表中添加到购物车

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

布局分析：

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

index.wxml：

  1. <!--主盒子-->
  2. <view class="container">
  3. <!--head-->
  4. <view class="tit">
  5. <view class="title_val">商品列表</view>
  6. <view class="more">更多</view>
  7. </view>
  8. <!--list-->
  9. <view class="goodslist">
  10. <!--item-->
  11. <block wx:for="{{goodslist}}">
  12. <view class="goods">
  13. <!--左侧图片盒子-->
  14. <view>
  15. <image src="{{item.imgUrl}}" class="good-img" />
  16. </view>
  17. <!--右侧说明部分-->
  18. <view class="good-cont">
  19. <!--上--文字说明-->
  20. <view class="goods-navigator">
  21. <text class="good-name">{{item.name}}</text>
  22. </view>
  23. <!--下--价格部分-->
  24. <view class="good-price">
  25. <text>￥{{item.price}}</text>
  26. <image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" />
  27. </view>
  28. </view>
  29. </view>
  30. </block>
  31. </view>
  32. </view>
<!--主盒子-->

<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：

  1. /**index.wxss**/
  2. page{
  3. height: 100%;
  4. }
  5. .container{
  6. background: #f5f5f5;
  7. }
  8. .tit{
  9. display: flex;
  10. flex-direction: row;
  11. justify-content: space-between;
  12. height: 30px;
  13. position: relative;
  14. }
  15. .tit::before{
  16. content:'';
  17. background: #ffcc00;
  18. width:5px;
  19. height: 100%;
  20. position: absolute;
  21. left: 0;
  22. top: 0;
  23. }
  24. .title_val{
  25. padding: 0 15px;
  26. font-size: 14px;
  27. color: #555;
  28. line-height: 30px;
  29. }
  30. .more{
  31. font-size: 12px;
  32. line-height: 30px;
  33. color: #999;
  34. padding: 0 5px 0 0 ;
  35. }
  36. .goodslist{
  37. background: #fff;
  38. display: flex;
  39. flex-direction: column;
  40. }
  41. .goods{
  42. display: flex;
  43. flex-direction: row;
  44. border-bottom: 1px solid #ddd;
  45. }
  46. .good-img{
  47. padding: 5px;
  48. width: 80px;
  49. height: 80px;
  50. }
  51. .good-cont{
  52. display: flex;
  53. flex: 1;
  54. flex-direction: column;
  55. font-size: 14px;
  56. }
  57. .goods-navigator{
  58. display: flex;
  59. flex: 1;
  60. flex-direction: column;
  61. justify-content: center;
  62. }
  63. .good-name{
  64. display: flex;
  65. flex: 1;
  66. flex-direction: column;
  67. color: #555;
  68. justify-content: center;
  69. }
  70. .good-price{
  71. display: flex;
  72. flex: 1;
  73. flex-direction: row;
  74. justify-content: space-between;
  75. color:#e4393c;
  76. font-weight: 600;
  77. }
  78. .cart{
  79. width: 40px;
  80. height: 40px;
  81. padding-right: 10px;
  82. }
/**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对象中。同学们可以根据其数据结构自己编写后台接口

  1. Page({
  2. data: {
  3. goodslist: [
  4. {
  5. id:"001",
  6. imgUrl:"http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg",
  7. name:"女装T恤中长款大码摆裙春夏新款",
  8. price:"65.00"
  9. },
  10. {
  11. id:"002",
  12. imgUrl:"http://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg",
  13. name:"火亮春秋季 男青年修身款圆领男士T恤",
  14. price:"68.00"
  15. },
  16. {
  17. id:"003",
  18. imgUrl:"http://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg",
  19. name:"新款立体挂脖t恤女短袖大码宽松条纹V领上衣显瘦休闲春夏",
  20. price:"86.00"
  21. },
  22. {
  23. id:"004",
  24. imgUrl:"http://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg",
  25. name:"男运动上衣春季上新品 上衣流行装青年",
  26. price:"119.00"
  27. },
  28. {
  29. id:"005",
  30. imgUrl:"http://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg",
  31. name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",
  32. price:"69.00"
  33. },
  34. {
  35. id:"006",
  36. imgUrl:"http://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg",
  37. name:"新款立体挂脖t恤短袖大码宽松条纹V领上衣显瘦休闲春夏",
  38. price:"86.00"
  39. },
  40. {
  41. id:"007",
  42. imgUrl:"http://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg",
  43. name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",
  44. price:"119.00"
  45. },
  46. {
  47. id:"008",
  48. imgUrl:"http://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg",
  49. name:"男运动上衣春季上新品 上衣流行装青年",
  50. price:"69.00"
  51. },
  52. ]
  53. },
  54. // 加入购物车
  55. addcart:function(e){
  56. this.setData({
  57. toastHidden:false
  58. });
  59. // 遍历列表 与 购物车列表
  60. for (var i in this.data.goodslist){
  61. // 列表中某一项item的id == 点击事件传递过来的id。则是被点击的项
  62. if(this.data.goodslist[i].id == e.target.id){
  63. // 给goodsList数组的当前项添加count元素，值为1，用于记录添加到购物车的数量
  64. this.data.goodslist[i].count = 1;
  65. // 获取购物车的缓存数组（没有数据，则赋予一个空数组）
  66. var arr = wx.getStorageSync('cart') || [];
  67. // 如果购物车有数据
  68. if(arr.length>0){
  69. // 遍历购物车数组
  70. for(var j in arr){
  71. // 判断购物车内的item的id，和事件传递过来的id，是否相等
  72. if(arr[j].id == e.target.id){
  73. // 相等的话，给count+1（即再次添加入购物车，数量+1）
  74. arr[j].count = arr[j].count + 1;
  75. // 最后，把购物车数据，存放入缓存（此处不用再给购物车数组push元素进去，因为这个是购物车有的，直接更新当前数组即可）
  76. try {
  77. wx.setStorageSync('cart', arr)
  78. } catch (e) {
  79. console.log(e)
  80. }
  81. // 返回（在if内使用return，跳出循环节约运算，节约性能）
  82. return;
  83. }
  84. }
  85. // 遍历完购物车后，没有对应的item项，把goodslist的当前项放入购物车数组
  86. arr.push(this.data.goodslist[i]);
  87. }
  88. // 购物车没有数据，把item项push放入当前数据（第一次存放时）
  89. else{
  90. arr.push(this.data.goodslist[i]);
  91. }
  92. // 最后，把购物车数据，存放入缓存
  93. try {
  94. wx.setStorageSync('cart', arr)
  95. // 返回（在if内使用return，跳出循环节约运算，节约性能）
  96. return;
  97. } catch (e) {
  98. console.log(e)
  99. }
  100. }
  101. }
  102. }
  103. })
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元素进去，因为这个是购物车有的，直接更新当前数组即可）

                            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)

                }

            }

        }

    }

})

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

布局分析：

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

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

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

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

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

cart.wxml：

  1. <!--要是够车内没有数据，就行显示没有数据-->
  2. <view class="cart" hidden="{{iscart}}">
  3. <image src="/images/cart.png"/>
  4. <view>购物车什么都没有，赶快去购物吧</view>
  5. </view>
  6. <!--要是有数据，就显示数据-->
  7. <view class="cartList" hidden="{{!iscart}}">
  8. <!--header-->
  9. <view class="baoyou"></view>
  10. <!--list item-->
  11. <block wx:for="{{cart}}">
  12. <view class="goods">
  13. <!--左侧图片-->
  14. <view>
  15. <image src="{{item.imgUrl}}" class="good-img"/>
  16. </view>
  17. <!--右侧说明部分-->
  18. <view class="good-cont">
  19. <!--文字说明-->
  20. <view class="goods-navigator">
  21. <text class="good-name">{{item.name}}</text>
  22. </view>
  23. <!--价钱和购物加减的父盒子-->
  24. <view class="good-price">
  25. <text class="price">￥{{item.price}}</text>
  26. <view class="btn-box">
  27. <view class="btn">
  28. <button id="del{{index}}" type="default" size="mini" bindtap="delCount">-</button>
  29. <input  value="{{item.count}}"/>
  30. <button id="add{{index}}" type="default" size="mini" bindtap="addCount">+</button>
  31. </view>
  32. <image id="img{{index}}" src="/images/del2.png" bindtap="delGoods"/>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. </block>
  38. <!--footer-->
  39. <view class="total">
  40. <view class="total_text">合计：<text>￥{{total}}</text></view>
  41. <button class="total_js" size="mini">去结算({{goodsCount}})</button>
  42. </view>
  43. </view>
<!--要是够车内没有数据，就行显示没有数据-->

<view class="cart" hidden="{{iscart}}">

    <image src="/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>

                <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 class="price">￥{{item.price}}</text>

                    <view class="btn-box">

                        <view class="btn">

                            <button id="del{{index}}" type="default" size="mini" bindtap="delCount">-</button>

                            <input  value="{{item.count}}"/>

                            <button id="add{{index}}" type="default" size="mini" bindtap="addCount">+</button>

                        </view>

                        <image id="img{{index}}" src="/images/del2.png" bindtap="delGoods"/>

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

cart.wxss：

  1. page {
  2. background: #f2ebe3;
  3. }
  4. .cart {
  5. padding: 100px 0 0 0;
  6. display: flex;
  7. justify-content: center;
  8. flex-direction: column;
  9. align-items: center;
  10. color: #999;
  11. }
  12. .cart image {
  13. width: 66px;
  14. height: 66px;
  15. margin-bottom: 20px;
  16. }
  17. .baoyou {
  18. font-size: 18px;
  19. color: #db2929;
  20. padding: 10px;
  21. }
  22. .goods {
  23. background: #fff;
  24. border-top: 1px solid #ddd;
  25. margin-bottom: 10px;
  26. padding: 10px 10px 0 10px;
  27. display: flex;
  28. }
  29. .goods image {
  30. width: 80px;
  31. height: 80px;
  32. border: 1px solid #ddd;
  33. }
  34. .goods .good-cont {
  35. display: flex;
  36. flex: 1;
  37. flex-direction: column;
  38. color: #555;
  39. font-size: 14px;
  40. padding: 5px;
  41. height: 100px;
  42. }
  43. .goods .good-cont .goods-navigator {
  44. display: flex;
  45. flex: 2;
  46. }
  47. .goods .good-cont .good-price {
  48. display: flex;
  49. flex-direction: column;
  50. flex: 3;
  51. }
  52. .goods .good-cont .good-price .price {
  53. font-size: 16px;
  54. color: #ec5151;
  55. }
  56. .goods .good-cont .good-price .btn-box {
  57. display: flex;
  58. flex-direction: row;
  59. justify-content: space-between;
  60. }
  61. .goods .good-cont .good-price .btn-box image {
  62. width: 23px;
  63. height: 23px;
  64. border: 0;
  65. margin: 0;
  66. }
  67. .goods .good-cont .good-price .btn {
  68. display: flex;
  69. flex-direction: row;
  70. }
  71. .goods .good-cont .good-price .btn input {
  72. margin: 0;
  73. width: 40px;
  74. text-align: center;
  75. border: 1px solid #eee;
  76. font-size: 16px;
  77. height: 28px;
  78. }
  79. .goods .good-cont .good-price .btn button {
  80. margin: 0;
  81. }
  82. .total {
  83. height: 40px;
  84. display: flex;
  85. flex-direction: row;
  86. justify-content: space-between;
  87. padding: 0 20px;
  88. }
  89. .total .total_text {
  90. display: flex;
  91. color: #777;
  92. }
  93. .total .total_text text {
  94. color: #ec5151;
  95. }
  96. .total .total_js {
  97. color: #fff;
  98. background: #ec5151;
  99. height: 30px;
  100. margin: 0;
  101. }
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;

}

cart.js：

  1. Page({
  2. data: {
  3. iscart: false,
  4. cart: [], //数据
  5. count: 1,   //商品数量默认是1
  6. total: 0,    //总金额
  7. goodsCount: 0 //数量
  8. },
  9. onLoad: function (options) {
  10. },
  11. onShow: function () {
  12. var that = this;
  13. // 获取产品展示页保存的缓存数据（购物车的缓存数组，没有数据，则赋予一个空数组）
  14. var arr = wx.getStorageSync('cart') || [];
  15. // 有数据的话，就遍历数据，计算总金额 和 总数量
  16. if (arr.length > 0) {
  17. for (var i in arr) {
  18. that.data.total += Number(arr[i].price) * Number(arr[i].count);
  19. that.data.goodsCount += Number(arr[i].count);
  20. }
  21. // 更新数据
  22. this.setData({
  23. iscart: true,
  24. cart: arr,
  25. total: that.data.total,
  26. goodsCount: that.data.goodsCount
  27. });
  28. }
  29. },
  30. onHide: function(){
  31. // 清除数据
  32. this.setData({
  33. iscart: false,
  34. cart: [], //数据
  35. total: 0,    //总金额
  36. goodsCount: 0 //数量
  37. });
  38. },
  39. /* 减数 */
  40. delCount: function (e) {
  41. console.log(e)
  42. // 获取购物车该商品的数量
  43. // [获取设置在该btn的id,即list的index值]
  44. if (this.data.cart[e.target.id.substring(3)].count <= 1) {
  45. return;
  46. }
  47. // 商品总数量-1
  48. this.data.goodsCount -= 1;
  49. // 总价钱 减去 对应项的价钱单价
  50. this.data.total -= Number(this.data.cart[e.target.id.substring(3)].price);
  51. // 购物车主体数据对应的项的数量-1  并赋给主体数据对应的项内
  52. this.data.cart[e.target.id.substring(3)].count = --this.data.cart[e.target.id.substring(3)].count;
  53. // 更新data数据对象
  54. this.setData({
  55. cart: this.data.cart,
  56. total: this.data.total,
  57. goodsCount: this.data.goodsCount
  58. })
  59. // 主体数据重新赋入缓存内
  60. try {
  61. wx.setStorageSync('cart', this.data.cart)
  62. } catch (e) {
  63. console.log(e)
  64. }
  65. },
  66. /* 加数 */
  67. addCount: function (e) {
  68. // 商品总数量+1
  69. this.data.goodsCount += 1;
  70. // 总价钱 加上 对应项的价钱单价
  71. this.data.total += Number(this.data.cart[e.target.id.substring(3)].price);
  72. // 购物车主体数据对应的项的数量+1  并赋给主体数据对应的项内
  73. this.data.cart[e.target.id.substring(3)].count = ++this.data.cart[e.target.id.substring(3)].count;
  74. // 更新data数据对象
  75. this.setData({
  76. cart: this.data.cart,
  77. total: this.data.total,
  78. goodsCount: this.data.goodsCount
  79. })
  80. // 主体数据重新赋入缓存内
  81. try {
  82. wx.setStorageSync('cart', this.data.cart)
  83. } catch (e) {
  84. console.log(e)
  85. }
  86. },
  87. /* 删除item */
  88. delGoods: function (e) {
  89. // 商品总数量  减去  对应删除项的数量
  90. this.data.goodsCount = this.data.goodsCount - this.data.cart[e.target.id.substring(3)].count;
  91. // 总价钱  减去  对应删除项的单价*数量
  92. this.data.total -= this.data.cart[e.target.id.substring(3)].price * this.data.cart[e.target.id.substring(3)].count;
  93. // 主体数据的数组移除该项
  94. this.data.cart.splice(e.target.id.substring(3), 1);
  95. // 更新data数据对象
  96. this.setData({
  97. cart: this.data.cart,
  98. total: this.data.total,
  99. goodsCount: this.data.goodsCount
  100. })
  101. // 主体数据重新赋入缓存内
  102. try {
  103. wx.setStorageSync('cart', this.data.cart)
  104. } catch (e) {
  105. console.log(e)
  106. }
  107. }
  108. })
Page({

    data: {

        iscart: false,

        cart: [], //数据

        count: 1,   //商品数量默认是1

        total: 0,    //总金额

        goodsCount: 0 //数量

    },

    onLoad: function (options) {

    },

    onShow: function () {

        var that = this;

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

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

        // 有数据的话，就遍历数据，计算总金额 和 总数量

        if (arr.length > 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 <= 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('cart', 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('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)

        }

    }

})

运行结果：

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

更多小程序的教程

微信开发者工具的快捷键

微信小程序的文件结构 —— 微信小程序教程系列（1）

微信小程序的生命周期实例演示 —— 微信小程序教程系列（2）

微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）

微信小程序的新建页面 —— 微信小程序教程系列（4）

微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）

微信小程序的页面跳转 —— 微信小程序教程系列（6）

微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）

微信小程序的作用域和模块化 —— 微信小程序教程系列（8）

微信小程序视图层的数据绑定 —— 微信小程序教程系列（9）

微信小程序视图层的条件渲染 —— 微信小程序教程系列（10）

微信小程序视图层的列表渲染 —— 微信小程序教程系列（11）

微信小程序视图层的模板 —— 微信小程序教程系列（12）

微信小程序wxss的尺寸单位rpx —— 微信小程序教程系列（13）

微信小程序的网络请求 —— 微信小程序教程系列（14）

微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）

微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）

微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）

微信小程序之顶部导航栏实例 —— 微信小程序实战系列（1）

微信小程序之上拉加载（分页加载）实例 —— 微信小程序实战系列（2）

微信小程序之轮播图实例 —— 微信小程序实战系列（3）

微信小程序之仿android fragment之可滑动的底部导航栏实例  —— 微信小程序实战系列（4）

微信小程序之登录页实例 —— 微信小程序实战系列（5）

微信小程序之自定义toast实例 —— 微信小程序实战系列（6）

微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）

微信小程序之自定义模态弹窗（带动画）实例 —— 微信小程序实战系列（8）

微信小程序之侧栏分类 —— 微信小程序实战商城系列（1）

微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）

微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）

微信小程序之商品属性分类 —— 微信小程序实战商城系列（4）

更多小程序的教程请查看：http://blog.csdn.net/michael_ouyang/article/details/54700871

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

 

阅读全文      

        版权声明：本文为博主原创文章，转载务必注明出处，http://blog.csdn.net/michael_ouyang。

[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）的更多相关文章

  1. [转]微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）

    本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: ...

  2. 微信小程序 - 实现购物车结算

    示例源码下载:小程序-实现购物车结算

  3. 微信小程序一：微信小程序UI组件、开发框架、实用库

    作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/8079095.html 内容持续更新,维护中 邮箱 ...

  4. 微信小程序一步步搭建商城系列-01-开篇

    1.小程序介绍 小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用.也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题.应用将无处不 ...

  5. 微信小程序开发详解——小程序，大颠覆！

    微信小程序开发 联系 苏念 188.1414.7927  微信小程序系统开发 微信新功能开发 小程序开发 小程序怎么开发 app小程序开发 简化小程序开发 微信小程序定制 小程序制作 开发微信小程序  ...

  6. 微信小程序来了，小程序都能做些什么

    2017年的微信大动作就是微信小程序了,到底小程序都能做些什么?这是很多人关注的热点,小程序开发对企业又有什么帮助呢?下面让厦门微信小程序开发公司来为你就分析下.       微信小程序与APP的关系 ...

  7. 微信公众号支付|微信H5支付|微信扫码支付|小程序支付|APP微信支付解决方案总结

    最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付.APP微信支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存. 先说注意 ...

  8. C#开发微信门户及应用(47) - 整合Web API、微信后台管理及前端微信小程序的应用方案

    在微信开发中,我一直强调需要建立一个比较统一的Web API接口体系,以便实现数据的集中化,这样我们在常规的Web业务系统,Winform业务系统.微信应用.微信小程序.APP等方面,都可以直接调用基 ...

  9. 微信小程序中实现微信支付

    最近在做微信小程序,今天刚好做到小程序里的微信支付这块,踩过不少坑,特此写个博客记录下,希望能帮到其它人吧. 我总结了一下,小程序中的微信支付和之前其它的公众号里的微信支付有两个区别,第一就是小程序必 ...

随机推荐

  1. Code Chef TSUM2（动态凸包+点分治）

    题面 传送门 题解 真是毒瘤随机化算法居然一分都不给 首先这种树上的题目一般想到的都是点分 我们考虑如何统计经过当前点的路径的贡献,设当前点\(u\)在序列中是第\(c\)个,那么一条路径的贡献就是 ...

  2. Golang 实现守护主进程

    package main import ( "fmt" "runtime" "sync" "time" ) func t ...

  3. tenda某路由器信息泄露查找

    本文作者:i春秋作家——icqb32d3a26 1: 前期准备: (1) 路由器固件 一般获取固件的方法有以下几种 官方网站根据对应版本下载(√),点击下载 在点击更新固件时抓取对应的更新固件链接 拆 ...

  4. Zookeeper原理分析之存储结构ZkDatabase

    ZKDatabase在内存中维护了zookeeper的sessions, datatree和commit logs集合. 当zookeeper server启动的时候会将txnlogs和snapsho ...

  5. ReentrantReadWriteLock源码分析（一）

    此处源码分析,主要是基于读锁,非公平机制,JDK1.8. 问题: 1.ReentrantReadWriteLock是如何创建读锁与写锁? 2.读锁与写锁的区别是什么? 3.锁的重入次数与获取锁的线程数 ...

  6. git aliases

    单独的 alias git config --global alias.co checkout git config --global alias.br branch git config --glo ...

  7. Hbuilder用ajax连接eclipse中的servlet例子以及注意事项

    今天用前端神器Hbuilder连接eclipse中的servlet,真是费了九牛二虎之力,才把问题解决 Hbuilder中的代码: test.html <!DOCTYPE html> &l ...

  8. POJ 2393

    #include <iostream> #include <algorithm> using namespace std; int main() { //freopen(&qu ...

  9. U8API——向U8数据库表导入数据

    一.打开API资源管理器 替换两个引用 打开应用实例,选择相应的功能 复制相应的封装类到自己的目录下 在数据库新建临时表,与目标表相同 数据导入: 思路:先将要导入的数据导入到与U8目标表相同的临时表 ...

  10. Anaconda 入门详解

    Anaconda Anaconda简介 Anaconda是一个免费开源的Python和R语言的发行版本,用于计算科学(数据科学.机器学习.大数据处理和预测分析),Anaconda致力于简化包管理和部署 ...