总体设计 ：用户点到购物车页面后显示添加到购物车的商品清单，
用户可以删除某个商品，更改购买的商品数量，并勾选商品进行支付。
页面如下 ：
页面代码如下 ：
1 <view class="container">
2
3
4 <checkbox-group class="cbgroup1" bindchange="bindCheck">
5 <view class="list1" wx:for="{{productList}}" wx:key="produceId">
6 <view>
7 <checkbox checked="true" value="{{item.productId}}"></checkbox>
8 </view>
9 <view>
10 <image class="image1" src="{{item.imageUrl}}"
11 data-productid="{{item.productId}}" bindtap="tapDetail"></image>
12 </view>
13 <view class="detail1">
14 <text>{{index+1}}. {{item.productName}}</text>
15
16 <view class="priceInfo1">
17 <text class="price1">￥{{item.price}}</text>
18 <text class="oriPrice1">{{item.originalPrice}}</text>
19 </view>
20
21 <view class="qtyinfo1">
22 <text class="minus1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="tapMinus">-</text>
23 <input class="qty1" type="text" data-productid="{{item.productId}}" data-index="{{index}}" value="{{item.productQty}}" />
24 <text class="plus1" data-productid="{{item.productId}}" data-index="{{index}}" bindtap="tapPlus">+</text>
25 </view>
26
27 </view>
28
29 </view>
30 </checkbox-group>
31
32
33
34 <view class="orderInfo1">
35 <view>
36 <text>总金额:</text>
37 <text class="amount1">{{amount}}</text>
38 </view>
39 <view>
40 <button class="order1" bindtap="bindOrder">下订单</button>
41 </view>
42 </view>
43
44 </view>
和之前的index.wxml不同，此页面中加入一些新的页面控件（具体见红色代码标注的部分 ），
1 .
在小程序中，多选框要放到 <checkbox-group class="cbgroup1" bindchange="bindCheck"> </checkbox-group>之中，
当用户选择或取消选择的时候，会触发bindchange事件，在该事件要将总金额从新计算后更新到页面中。
2 .
显示商品名称和序号的地方<text>{{index+1}}. {{item.productName}}</text>我们将索引+1使得页面的编号是从1开始的，
这样比较符号用户习惯。
3 .
显示价格的地方我们对价格的字体加大并用红色显示，提醒卖家注意，同时将原价加了删除线，让买家有个对比，
增加卖家购买的几率。
<view class="priceInfo1">
<text class="price1">￥{{item.price}}</text>
<text class="oriPrice1">{{item.originalPrice}}</text>
</view>
4 .
对于底部价格下订单的部分标记如下：
34 <view class="orderInfo1">
35 <view>
36 <text>总金额:</text>
37 <text class="amount1">{{amount}}</text>
38 </view>
39 <view>
40 <button class="order1" bindtap="bindOrder">下订单</button>
41 </view>
42 </view>
我们定义了一个orderInfo1的样式，该样式如下：
1 .orderInfo1
2 {
3 position:fixed;
4 bottom: 0;
5 width: 100%;
6 background-color: #f0f0f0;
7
8 display: flex;
9 flex-direction: row;
10 flex-wrap: nowrap;
11 justify-content: space-between;
12 }
第3-4行是将该标签中的内容在页面底部固定，即使有多个商品滑动，这里也是固定的，便于用户的操作。
第8-11行是将标签中的元素分别靠左右两端展示，便于用户操作，其余css略。
接下来我们再来看shoppingcart.js中的代码：
1 data: {
2 productList: [],
3 selectedProductId:"0",
4 amount:0
5 },
在data属性中定义三个变量，productList用来记录添加到购物车中的商品清单，amount用来记录商品总金额 ，
selectedProductId用来记录用户选中的商品ID，多个以“，”分割，第一次进入时全部选中。
多选框的bindCheck事件函数代码如下：
1 bindCheck:function(options)
2 {
3 let productIds = options.detail.value;
4 this.countAmount(productIds);
5 },
6
7 countAmount:function(ids)
8 {
9 let arr1 = this.data.productList;
10
11 if(arr1.length<1){return false;}
12
13 let amt=0.00;
14 let selectIds="";
15 for(let i=0;i<arr1.length;i++) {
16 if (ids=="0" || ids.indexOf(arr1[i].productId.toString())>=0)
17 {
18 amt += arr1[i].price;
19 }
20 selectIds += ","+arr1[i].productId;
21 }
22 selectIds = selectIds.substring(1);
23
24 //从bindCheck函数调用本函数
25 if(ids!="0") selectIds=ids;
26
27 this.setData({amount:amt.toFixed(2)});
28 this.setData({selectedProductId:selectIds});
29 },
函数 bindCheck:function(options){}只有两行代码，第一行是获取选中的商品productId值，多个值用“,”连接，
第二行调用countAmount:function(ids){}去重新计算商品总金额，加总后的金额用函数
this.setData({amount:amt.toFixed(2)});设置给data属性中定义的amount变量达到更新页面金额的目的。this.setData({selectedProductId:selectIds});的作用是将用户选中的productId设置到data属性
中的selectedProductId变量，当用户点下订单的时候根据selectedProductId去更新数据库中购物车表，
确保生成订单中的商品是用户勾选的商品，没有勾选的商品不要生成订单。
注 ：用户第一次进入到购物车页面的时候要调用countAmout()函数计算amount，见第4行。
1 success:function(res){
2 var products=res.data;
3 _this.setData({productList:products});
4 _this.countAmount("0");
5 }
下订单事件函数 bindOrder的代码如下 ：
1 bindOrder: function () {
2 let ids = this.data.selectedProductId;
3 if(ids=="") return false;
4
5 var _this=this;
6 wx.request({
7 url: 'http://www.tm.com/webapi/generateOrder',
8 data:{
9 'selectedProductId':ids,
10 'selectedProductQty':'11,1'
11 },
12 method:'GET',
13 success:function(res){
14 //var products=res.data;
15 wx.redirectTo({
16 url: '../shoppingcart/orderDetail',
17 })
18 }
19 })
20
21 },
此函数功能很简单，先根据用户选择的商品及数量去更新数据库并生成订单，更新成功后调用系统API函数wx.redirectTo()跳转到订单页。
我们在shoppingcart中新建页面orders就可以看到执行的效果了。