4.2制作“菜單”頁面主講人：譚麗君微信小程序開發

4.2.1“菜單”頁面wxml文件

“菜單”頁面包括輪播圖、商品信息列表

4.2.1“菜單”頁面wxml文件

輪播圖對應的wxml代碼如下序號名稱使用組件數據綁定說明①輪播列表swiper-itemwx:for="{{movies}}"列表渲染，movies為數組名。②圖片imagesrc="{{item.url}}"src屬性值綁定了movies數組中當前元素的url值輪播圖中數據綁定

4.2.1“菜單”頁面wxml文件

每個商品信息對應的wxml代碼每個商品信息中數據綁定序號名稱使用組件組件部分屬性、內容說明①商品列表viewwx:for="{{goods}}"列表渲染，goods為數組名②商品圖片imagesrc="{{item.cover}}"src屬性值綁定了goods數組中當前元素的cover值③商品名稱view<viewclass="list-title">{{item.title}}</view>view內容綁定了goods數組中當前元素的title值。

④商品價格text<textclass="list-price">￥{{item.price}}</text>text內容綁定了goods數組中當前元素的price值。

⑤加入購物車textbindtap="addCart"data-id="{{item.id}}"綁定了事件函數addCart自定義了一個屬性data-id，其值為goods數組中當前元素的id值。

4.2.2“菜單”頁面wxss文件

輪播圖效果和框架序號選擇器樣式內容①.head寬度、高度、頂上內邊距、背景圖片（創建一個線性漸變的"圖像"(從上到下)）②.swiper寬度、高度、水平位置居中、頂上外邊距③.swiperimage寬度、高度、設置圓角邊框輪播圖樣式代碼輪播圖樣式設置

4.2.2“菜單”頁面wxss文件

每個商品信息效果和框架結構1.一行寬度100%，一行要放2個商品，每個商品各占父親的一半50%，但每個商品外面有外邊距，因此每個商品寬度設置45%,高度為460rpx..shop-list{width:45%;height:460rpx;}2.圖片寬度超出手機屏幕的45%，所以要設置圖片寬度(和父親shop-list一樣寬)100%,圖片高度460-2行文字的高度-行間距=300rpximage{width:100%;height:300rpx;}在index.wxml文件中，再復制一個商品信息

4.2.2“菜單”頁面wxss文件

2.每個商品信息效果和框架結構3.設置一行放2個商品.shop-list{float:left;}4.設置每個商品的外邊距,(100%-45%*2)/4=2.5%,因為還有邊框線的位置，所以外邊距為2%.shop-list{margin:2%}

4.2.2“菜單”頁面wxss文件

每個商品信息效果和框架結構5.需要給每個商品信息加外邊框和圓角.shop-list{border:2rpxsolid#eee;border-radius:16rpx;}在index.wxml文件中，再復制一個商品信息6.圖片離2行文字太近，需要設置圖片下外邊距.list-img{margin-bottom:30rpx}

4.2.2“菜單”頁面wxss文件

每個商品信息效果和框架結構在index.wxml文件中，再復制一個商品信息7.分別設置標題文字和第2行文字大小和行高.list-title{

font-size:

30rpx;

line-height:

40rpx;}.list-text{

font-size:

26rpx;

line-height:

40rpx;}8..list-text設置彈性布局，“價格”和“加入購物車”兩端對齊.list-text{

display:flex;

justify-content:

space-between;}

4.2.3“菜單”頁面js文件

util.js文件1.封裝網絡請求wx.request，創建下面2個函數_get（url,data,success,error）_post(url,data,success,error)2.小程序頁面調用這2個函數的方法在需要調用_get和_post的文件中，引入util.js文件。constutils=require("../../utils/util.js);

4.2.3“菜單”頁面js文件

（1）單擊“編譯”時，會運行index.js文件中onLoad函數，并發送網絡請求給后臺goodsList接口，前后端數據交互如下圖。4.2.3“菜單”頁面js文件onLoad（）{}function(){}單擊“編譯”，會自動執行onLoad函數自定義函數調用自定義函數this.函數名()

函數名(){}普通函數匿名函數調用普通函數4.2.3“菜單”頁面js文件onLoad()函數1.把res.data.data的值賦值給result2.把result的賦值給data里的goodsgetList函數utils._get（'goods/goodsList',param||{},匿名函數）function(res){console.log(res)varresult=res.data.data;that.setData(){goods:result;}}res是從服務器返回來的數據4.2.3“菜單”頁面js文件getList函數功能顯示加載提示框wx.showLoadingvarthat=this使用util.js文件中_get函數（'goods/goodsList',param||{},函數）1.關閉加載提示框2.把res.data.data的值賦值給result3.把result的賦值給data里的goodsfunction(res){wx.hideLoading();varresult=res.data.data;that.setData(){goods:result;}}res是從服務器返回來的數據4.2.3“菜單”頁面js文件getList函數功能顯示加載提示框wx.showLoadingvarthat=this使用util.js文件中_get函數（'goods/goodsList',param||{},函數）function(res){wx.hideLoading();varresult=res.data.data;that.setData(){goods:result;}}1.關閉加載提示框2.把res.data.data的值賦值給result3.把result的賦值給data里的goods

4.2.3“菜單”頁面js文件

單擊調試器-->Network-->XHR，單擊goodsList接口，單擊Headers，可以查看接口地址和網絡請求方式RequestMethod的值。

4.2.3“菜單”頁面js文件

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

4.2.3“菜單”頁面js文件

（2）點擊“加入購物車”時，會運行index.js文件中addCart事件函數，并發送網絡請求給后臺add接口，前后端數據交互如下圖addCart事件函數addCart()函數判斷res.data.code的值是否為200，如果是彈出成功模態框，持續2秒獲取點擊加入購物車的商品id值utils._post（'cart/add',param,匿名函數）function(res){if(200==res.data.code){wx.showToast({title:res.data.msg||'操作成功',icon:'success',duration:2000}varparam={'goods_id':goods_id};vargoods_id=e.target.dataset.id;

res是從服務器返回來的數據

4.2.3“菜單”頁面js文件

在導入的點餐小程序項目中，在菜單頁中分別單擊思念絲娃娃和紅湯羊肉火鍋“加入購物車”，每單擊一次“加入購物車”，就會觸發一次事件，因此在調試器中會出現兩個add接口，單擊add接口，單擊Headers，可以查看接口地址和網絡請求方式RequestMethod的值，如左下圖。還可以查看add接口接收的前端數據，如右下圖。

4.2.3“菜單”頁面js文件

單擊Preview，可以查看add接口返回給前端的數據4.2.3“菜單”頁面js文件2.“菜單”index.js文件代碼模塊如下表序號模塊說明①constutils=require('../../utils/util.js');引入utils.js文件②Page

初始數據data初始數據：//輪播圖movies:[{url:'/static/banner1.jpg'},{url:'/static/banner2.jpg'},