微信小程序实战（完结篇）-第8章 一个全面的项目-点餐系统

微信小程序实战（完结篇）-第8章 一个全面的项目-点餐系统

8.1 开发前准备

8.1.1项目展示

8.1.2项目分析

8.1.3项目初始化

8.1.4封装网络请求

fetch.js页面

module.exports = function(path, data, method) {
   
   
  return new Promise((resolve, reject) => {
   
   
    wx.request({
   
   
      url: '',   // 接口地址
      method: method,  data: data,  header: {
   
   'Content-Type': 'json' }, 
      success: resolve,
      fail: function() {
   
   // 请求失败执行fail操作
        reject()
        wx.showModal({
   
    showCancel: false, title: '失败' }) }
    })
  }) }

请求接口页面

// 引入fetch.js文件
const fetch = require('../../utils/fetch.js')
// 接口请求
fetch(path).then((res) => {
   
   
  // 请求成功的操作
 },() => {
   
   
  // 请求失败操作
});

8.2 【任务1】商家首页

8.2.1任务分析

8.2.2焦点图切换

在首页顶部区域，设置了焦点图切换的效果，图片资源通过请求接口获取数据。焦点图区域的布局：

index.wxml

<block wx:for="{
   
   {listData}}">
  <swiper>
      <swiper-item>
        <image></image>
      </swiper-item>
  </swiper>
</block>

8.2.3中间区域单击跳转到菜单列表

首页中间部分展示了手机点餐的推广banner图，单击“开启订餐之旅”跳转到菜单列表，引导顾客进行点餐，中间区域的布局：

index.wxml

<block wx