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

4.5制作“订单”页面主讲人：谭丽君微信小程序开发

4.5.1“订单”wxml文件

“订单”页面效果和框架结构，如下图

4.5.1“订单”wxml文件

“订单”my-order.wxml文件中，数据绑定如下表序号名称使用组件类名组件部分属性、内容说明①订单列表vieworderwx:for="{{items}}"列表渲染，数组名为items②商品列表viewshopwx:for="{{order.goods}}"列表渲染，数组名为order.goods③商品标题viewlist-name<viewclass="list-name">{{item.title}}</view>view内容绑定了{{item.title}}④商品价格textlist-detail-left<textclass="list-detail-left">￥{{item.price}}</text>text内容绑定了{{item.price}}⑤商品数量textlist-detail-right<textclass="list-detail-right">x{{item.num}}</text>text内容绑定了{{item.num}}⑥支付金额textmeny-font02<textclass="meny-font02">￥{{item.total_price}}</text>text内容绑定了{{item.total_price}}⑦下单时间viewtime<viewclass="time">下单时间：{{order.create_time}}</view>view内容绑定了{{order.create_time}}4.5.2“订单”wxss文件“订单”页面效果和框架结构，序号选择器样式内容1.order宽度、高度、背景色、内边距、上外边距、溢出2.shop宽度、高度、上外边距、弹性布局3.shop-img宽度、高度4.shop-textflex=1、宽度、高度、左外边距5.shop-name字大小、字颜色、溢出6.shop-num字大小、字颜色、上外边距、底外边距7.shop-detail字大小、字颜色8.meny-font01字颜色9.meny-font02字颜色10.time宽度、高度、行高、上外边距、字大小、字颜色11.null宽度、高度、背景色、上外边距

4.5.3“订单”js文件

，1.“订单”页面显示时，会运行my-order.js文件中onShow函数，并发送网络请求给后台接口orderLis，前后端数据交互如下图

4.5.3“订单”js文件

，在导入的点餐小程序项目中，打开“订单”页面，打开调试器，单击orderList接口，单击Headers，可以查看接口地址和网络请求方式RequestMethod的值。如下图

4.5.3“订单”js文件

，单击Preview，可以查看orderList接口返回给前端的数据，如下图，并发送网络请求给后台接口submitOrder，前后端数据交互如下图

4.5.3“订单”js文件

，“订单”my-order.js文件代码模块如下表序号代码划分说明①constutils=require('../../utils/util.js');引入utils.js文件②Page初始化数据data初始化以下数据：items:[]函数onShow