4.3制作“购物车”页面主讲人：谭丽君微信小程序开发
4.3.1“购物车”页面wxml文件
购物车”页面包括右上角编辑、中间的商品信息和下面的结算。
4.3.1“购物车”页面wxml文件
1.“编辑/完成”框架②text组件内容为三元运算表达式，adminShow值为真时，显示“完成”，adminShow值为假时，显示“编辑”。①text组件，绑定了点击事件adminTap。
4.3.1“购物车”页面wxml文件
2.“购物车”页面会有以下两种情况：购物车是空的和购物车有商品购物车是空的购物车有商品
4.3.1“购物车”页面wxml文件
3.每个商品信息效果和框架结构如下图，
4.3.1“购物车”页面wxml文件
4.“购物车”中底部结算效果和框架结构，
4.3.2“购物车”页面wxss文件
1.“编辑/完成”效果和框架结构，序号选择器样式内容①.edit宽度、高度、背景颜色、行高、固定定位、顶上位置为0、弹性布局、右对齐②.edittext右外边距、字颜色、字大小、“编辑/完成”wxss样式设置“编辑/完成”wxss样式代码
4.3.2“购物车”页面wxss文件
2.每个商品信息的效果和框架，wxss样式设置序号选择器样式内容1.shop宽度、顶上内边距、底下内容边距、自适应居中、底下外边距2.empty文本水平居中、内边距、字颜色3.shop-content底下外边距、溢出隐藏、弹性布局4.shop_check_box顶上外边距、左边外边距5.check_img宽度、高度、顶上外边距、左边外边距6.shop_img宽度、高度、外边距7.shop_detail该元素flex为1即填满剩下的宽，右外边距8.shop_name字大小、行高9.shop_detail_bottom弹性布局、顶上外边距10.shop_price行高、本元素flex为1即填满剩下的宽，11.num_change弹性布局、顶上内边距12.minus_icon宽度、高度13.shop_num行高、高度、宽度、文本居中、字大小14.add_icon宽度、高度
4.3.2“购物车”页面wxss文件
3.结算框架效果和框架结构，wxss样式设置序号选择器样式内容1.footer宽度、高度、固定定位、底下0px、背景色、弹性布局2.check_box该元素flex为1即填满剩下的宽，弹性布局、行高、字大小3.check_img宽度、高度、顶上外边距、左边外边距4.check_text左外边距、行高5.footer_total_text字颜色、行高、该元素flex为1即填满剩下的宽6.footer_tatal_price字颜色7.footer_total,.deleteshop宽度、高度、背景色、字大小、字颜色、文本水平居中、行高
4.3.3“购物车”页面js文件
1.显示“购物车”页面时，会运行cart.js文件中onShow函数，并发送网络请求给后台接口cartList，前后端数据交互，接口地址
4.3.3“购物车”页面js文件
，单击Preview，可以查看cartList接口返回给前端的数据
4.3.3“购物车”页面js文件
2.在购物车页面，单击“加号”或“减号”时，会运行cart.js文件中numchangeTap事件函数，并发送网络请求给后台接口syncNum，前后端数据交互如下图，
4.3.3“购物车”页面js文件
在导入的点餐小程序项目中，在购物车页面，单击思恋丝娃娃“加号”，在调试器中，单击syncNum接口，单击Headers，可以查看接口地址和网络请求方式RequestMethod的值。如左下图。还可以查看接口从前端接收的数据，如右下图。，
4.3.3“购物车”页面js文件
，单击Preview，可以查看goodsList接口返回给前端的数据
4.3.3“购物车”页面js文件
3.在购物车页面，选择商品，单击右下角删除时，会运行cart.js文件中delete事件函数，并发送网络请求给后台接口syncDelete，前后端数据交互如下图，
4.3.3“购物车”页面js文件
在导入的点餐小程序项目中，在购物车页面，点击“编辑”，选择“红汤羊肉火锅”，点击删除，在调试器中，单击syncDelete接口，单击Headers，可以查看接口地址和网络请求方式RequestMethod的值。如左下图。还可以查看接口接收的前端数据，如右下图。，
4.3.3“购物车”页面js文件
单击Preview，可以查看syncDelete接口返回给前端的数据
4.3.3“购物车”页面js文件
4.在购物车页面，选择商品后，单击结算按钮，会运行cart.js文件中goClearing事件函数，跳转到确认订单页面，如下图，