《PHP程序設計與微信小程序案例教程》 課件4.3 制作“購物車”頁面

4.3制作“購物車”頁面主講人：譚麗君微信小程序開發(fā)

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、彈性布局、右對齊②.edit>text右外邊距、字顏色、字大小、“編輯/完成”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函數，并發(fā)送網絡請求給后臺接口cartList，前后端數據交互，接口地址

4.3.3“購物車”頁面js文件

，單擊Preview，可以查看cartList接口返回給前端的數據

4.3.3“購物車”頁面js文件

2.在購物車頁面，單擊“加號”或“減號”時，會運行cart.js文件中numchangeTap事件函數，并發(fā)送網絡請求給后臺接口syncNum，前后端數據交互如下圖，

4.3.3“購物車”頁面js文件

在導入的點餐小程序項目中，在購物車頁面，單擊思戀絲娃娃“加號”，在調試器中，單擊syncNum接口，單擊Headers，可以查看接口地址和網絡請求方式RequestMethod的值。如左下圖

。還可以查看接口從前端接收的數據，如右下圖。，

4.3.3“購物車”頁面js文件

，單擊Preview，可以查看goodsList接口返回給前端的數據

4.3.3“購物車”頁面js文件

3.在購物車頁面，選擇商品，單擊右下角刪除時，會運行cart.js文件中delete事件函數，并發(fā)送網絡請求給后臺接口syncDelete，前后端數據交互如下圖，

4.3.3“購物車”頁面js文件

在導入的點餐小程序項目中，在購物車頁面，點擊“編輯”，選擇“紅湯羊肉火鍋”，點擊刪除，在調試器中，單擊syncDelete接口，單擊Headers，可以查看接口地址和網絡請求方式RequestMethod的值。如左下圖。還可以查看接口接收的前端數據，如右下圖。，

4.3.3“購物車”頁面js文件

單擊Preview，可以查看syncDelete接口返回給前端的數據

4.3.3“購物車”頁面js文件

4.在購物車頁面，選擇商品后，單擊結算按鈕，會運行cart.js文件中goClearing事件函數，跳轉到確認訂單頁面，如下圖，

4.3.3“購物車”頁面js文件

在導入的點餐小程序項目中，在購物車頁面，選擇思戀絲娃娃，單擊結算按鈕，打開調試器，單擊Headers，可以查看跳轉地址，如左下圖。還可以查看跳轉頁面時傳遞的參數，如右下圖，

4.3.3“購物車”頁面js文件

，單擊Preview，可以查看“確認訂單”頁面中，發(fā)送網絡請求給confirm接口，返回給前端的數據

4.3.3“購物車”頁面js文件

，序號代碼劃分說明①constutils=require('../../utils/util.js');引入utils.js文件②Page

初始數據data初始化以下數據：adminShow:false,//編輯items:[],//購物車數據total:0,//總金額checkedAll:false,//全選checkedGoods:[],//已選擇的商品

函數onShow功能：調用getList。getList功能：utils._get函數，發(fā)送網絡請求給后臺接口cartList，并返回購物車表中商品數據信息到前端。adminTap功能：切換顯示“編輯”或“完成”checkTap功能：點擊單個復選框,如果選中了該商品，則計算商品價格。judgmentAll功能：判斷是否為全選numchangeTap功能：調用syncNum函數syncNum功能：調用utils._post函數，發(fā)送網絡請求給后臺接口syncNum。對選中的商品進行數量修改。allcheckTap功能：實現全選或全部未選中goClearing功能：結算已