毕业设计/论文/答辩-微信小程序-店内点餐小程序

最近好多同学都在弄微信小程序的毕业设计，今天，小编就给大家分享一套毕业设计点餐小程序代码！

代码下载地址：https://download.csdn.net/download/weixin_43466318/18393423

目录(直接点击可达)：

1.1废话不多说，老规矩，先看效果：

1.1.1前端小程序展示：

1.1.2后端后台展示：

小程序功能：
（1）基本的首页广告
（2）菜品的上架与管理
（3）菜品的分类管理
（4）订单管理
（5）小程序基本信息设置

小程序实现了顾客点餐到上菜，到支付的整个过程，是不错的毕业设计，简洁明了，方便答辩和论文编写。

1.1.3小程序前端代码：

js

const app = getApp()
const fetch = app.fetch
Page({
  data: {
    swiper: [],
    ad: '',
    category: []
  },
  onLoad: function (options) {
    var callback = () => {
      wx.showLoading({
        title: '努力加载中',
        mask: true
      })
      fetch('food/index').then(data => {
        wx.hideLoading()
        this.setData({
          swiper: data.img_swiper,
          ad: data.img_ad,
          category: data.img_category
        })
      }, () => {
        callback()
      })
    }
    if (app.userInfoReady) {
      callback()
    } else {
      app.userInfoReadyCallback = callback
    }
  },
  start: function () {
    wx.navigateTo({
      url: '/pages/list/list',
    })
  }
})

wxml

<!-- 轮播图 -->
<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
  <block wx:for="{{swiper}}" wx:key="*this">
    <swiper-item>
      <image src="{{item}}"></image>
    </swiper-item>
  </block>
</swiper>
<!--开启点餐之旅 -->
<view class="menu-bar">
  <view class="menu-block" bindtap="start">
    <view class="menu-start">开启点餐之旅→</view>
  </view>
</view>
<!-- 中间部分 -->
<view class="ad-box">
  <image src="{{ad}}" class="ad-image"></image>
</view>
<!-- 底部商品图 -->
<view class="bottom-box">
  <view class="bottom-pic" wx:for="{{category}}" wx:key="*this">
    <image src="{{item}}" class="bottom-image"></image>
  </view>
</view>

wxss

/* 轮播图样式 */

.swiper {
  height: 350rpx;
}

.swiper image {
  width: 100%;
  height: 100%;
}

/* 开启点餐之旅 */

.menu-bar {
  display: flex;
  margin-top: 20rpx;
}

.menu-block {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.menu-start {
  text-align: center;
  font-size: 38rpx;
  color: #fff;
  padding: 16rpx 80rpx;
  background: #ff9c35;
  border-radius: 80rpx;
}

/* 中间部分广告 */

.ad-box {
  margin-top: 20rpx;
  width: 100%;
  text-align: center;
}

.ad-image {
  width: 710rpx;
  height: 336rpx;
}

/* 底部图片展示 */

.bottom-box {
  margin: 20rpx 0;
  display: flex;
  width: 100%;
  padding: 0 20rpx;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}

.bottom-pic {
  width: 49%;
  display: inline-block;
}

.bottom-image {
  width: 100%;
  height: 170rpx;
}

1.2完整代码已打包，可在小编论坛免费下载，开发过程中有疑问可随时扣小哥，一起交流，共同进步。加油吧，童鞋！