《PHP程序设计与微信小程序案例教程》 课件4.2 制作“菜单”页面

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'},