本章主要讲解商城小程序购物车界面和下单界面的实现。包含：购物车顶部菜单布局、购物车产品列表布局、下单页面底部菜单布局、下单页面其他界面的布局。
购物车首页底部菜单
本节主要讲解购物车页面底部菜单界面的实现，效果如图14-1所示。
1.布局分析
结构布局分析示意如图14-2所示。
根据上面的布局分析，我们会产生基础的框架，代码示例如下：
<view> <!—第1层-开始 --><view> <!—第2层-开始 --><view> <!—第2层-开始 --><view>> <!—第3层-开始 --><image> </image> </view>> <!—第3层-结束--><view>费用</view> <!—第3层--></view> <!—第2层-结束--></view> <!—第2层-结束--><view>去结算</view> <!—第2层--></view> <!—第1层-结束-->
根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。
2.功能实现
.wxml文件代码示例如下：
<view class="footer {{cost!=0?'active':''}}"><view class="howMuch" style='width:70%'><view class="che" style="background:{{cost!=0?'#FFD161':'#E7E7E7'}};"><image src="/images/sp02.png" style="width:60rpx;height:60rpx;"></image></view><view class="cost" hidden="{{cost==0}}">￥：253.00</view></view><view class="pay" bindtap='jiesuan' style='width:30%'>{{cost!=0?'去结算':'15元起送'}}</view></view>
.wxss文件代码示例如下：
/* 底部菜单*/.footer{<!—底部整体样式-->display: flex;position: absolute;right: 0;left: 0;bottom:0;height: 100rpx;}.che{<!—购物车图片样式-->position: absolute;height: 90rpx;width: 90rpx;border-radius: 100rpx;left: 20rpx;top: -45rpx;display: flex;align-items: center;justify-content: center;}.howMuch{position: relative;flex: 1;font-size: 28rpx;background: white;line-height: 100rpx;padding-left: 130rpx;}.pay{width: 200rpx;text-align: center;line-height: 100rpx;font-size: 30rpx;background: #FFD161;color: black;}.footer .cost{margin-top: 20rpx;color: red;font-size: 40rpx; font-weight: bold;line-height: 50rpx;height: 50rpx;margin-left: 50rpx;}.js文件代码示例如下：jiesuan:function(e){wx.navigateTo({<!—“去结算”按钮，跳转到下单页面-->url: '/pages/gouwuche/xiadan/01-xiadan',})}
小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】
（1）微信小程序学习路线 /
（2）Java微信小程序商城系统指导 /course/3066521
（3）PHP微信小程序商城系统指导 /course/3066518
（4）微信官方文档 https://developers./miniprogram/dev/framework/
16-微信小程序商城 购物车首页底部菜单（微信小程序商城开发 小程序毕业设计 小程序源代码）（黄菊华-微信小程序开发教程）
