4.1创建点餐微信小程序微信小程序开发

4.1创建点餐微信小程序

1.创建微信小程序项目3.打开以下文件，删除部分代码4.拷贝图片文件序号文件名修改内容①index.js只保留下面代码Page({})②index.wxml删除该文件里所有内容③index.wxss删除该文件里所有内容④app.json{pages:[pages/index/index]，⑤app.wxss删除该文件里所有内容⑥app.js只保留下面代码App({})2.删除logs文件夹项目目录选择D:\phpstudy_pro\www\shop\小程序。

4.1.1初始化app.json文件

1.在app.json文件中添加页面路径对应页面依次为：菜单购物车确认订单订单

4.1.1初始化app.json文件

2.在app.json文件中设置底部导航栏属性描述color底部导航栏上的文字默认颜色selectedColor底部导航栏上的文字选中时的颜色，listlist是数组①pagePath属性：页面路径②text属性：底部导航栏上按钮文字③iconPath属性：图片路径，icon大小限制为40kb，建议尺寸为81px*81px。④selectedIconPath属性：选中时的图片路径，icon大小限制为40kb，建议尺寸为81px*81px。list是数组，该数组中最少2个、最多5个tab元素。tab按数组的顺序排序，每个项都是一个对象。运行效果代码页面底部导航栏tabBar属性及值

4.1.2初始化app.js文件

getApp().globalData.api1.定义全局数据2.其它页面使用全局数据的方法全局数据api，存放后台接口文件相同的部分。

4.1.3初始化util.js文件

1.封装网络请求：在点餐小程序每个页面的js文件中，都需要使用wx.request发起网络请求，获取后台数据。为了减少重复写代码，在util.js文件中以_get和_post方法对wx.request进行封装。_get和_post使用箭头函数的定义格式函数名：（参数列表）={函数体}★url:服务器接口地址★data：发送到服务器的数据★success:网络请求成功回调函数★error:网络请求失败回调函数（1）通过module.exports对外暴露接口，其它的js文件中才可以使用_get和_post函数。

4.1.3初始化util.js文件

调用全局数据getApp().globalData.api（2）封装API请求代码

4.1.3初始化util.js文件utils._post(参数1,参数2,function(res){});2.小程序页面调用模块的方法constutils=require(../../utils/util.js);utils._get(参数1,参数2,function(res){});（1）在需要调用_get和_post模块的js文件中，引入util.js文件。（2）调用_get模块的代码（3）调用_post模块的代码

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值③商品名称viewviewclass=list-title{{item.title}}/viewview内容绑定了goods数组中当前元素的title值。④商品价格texttextclass=list-price￥{{item.price}}/texttext内容绑定了goods数组中当前元素的price值。⑤加入购物车textbindtap=addCartdata-id={{item.id}}绑定了事件函数addCart自定义了一个属性data-id