外卖微信小程序开发教程，开启便捷餐饮新体验

碧彤 . 发布于 2025-04-20 21:12:35 157 浏览

在当今快节奏的生活中，外卖已经成为许多人解决用餐问题的首选方式，随着微信用户数量的庞大，开发一款外卖微信小程序能够为商家拓展业务渠道，为用户提供更加便捷的点餐服务，本文将详细介绍外卖微信小程序的开发教程,帮助你一步步搭建出属于自己的外卖小程序。

准备工作

注册微信公众平台账号 你需要前往微信公众平台（mp.weixin.qq.com）注册一个账号，选择“小程序”类型进行注册，按照系统提示填写相关信息，包括邮箱、密码、手机号等,并完成身份验证。
获取小程序 AppID 注册成功后，登录微信公众平台，在“设置”-“开发设置”中可以找到小程序的 AppID，AppID 是小程序的唯一标识,后续开发过程中会经常用到。
下载微信开发者工具 微信开发者工具是用于开发和调试微信小程序的官方工具，你可以从微信公众平台的“开发”-“开发工具”页面下载适合你操作系统的版本，下载安装完成后,打开开发者工具并使用刚刚注册的微信账号登录。

搭建项目结构

创建项目 打开微信开发者工具，点击“新建项目”，在弹出的窗口中，填写项目名称、项目目录等信息，项目目录建议选择一个便于管理的路径，例如在桌面创建一个“外卖小程序项目”文件夹，将 AppID 填入相应位置，点击“创建”按钮,即可创建一个新的小程序项目框架。
项目结构介绍 创建完成后,项目目录结构如下：

pages 目录：存放小程序的各个页面文件，每个页面都有对应的.js、.wxml、.wxss 和.json 文件。
- .js 文件：页面的脚本逻辑文件，用于处理页面的业务逻辑，如数据请求、事件处理等。
- .wxml 文件：页面的模板文件，类似于 HTML,用于构建页面的结构布局。
- .wxss 文件：页面的样式表文件，类似于 CSS,用于定义页面的样式。
- .json 文件：页面的配置文件，用于配置页面的一些属性，如页面标题、导航栏样式等。
utils 目录：用于存放一些工具函数或模块,方便在多个页面中复用。
app.js 文件：小程序的入口文件，用于初始化小程序实例，设置全局数据、生命周期函数等。
app.json 文件：小程序的全局配置文件，用于配置小程序的一些全局属性，如页面路径、窗口样式、tabBar 等。
app.wxss 文件：小程序的全局样式表文件,用于定义小程序的整体样式。

页面设计

首页设计 在 pages 目录下创建一个名为“index”的文件夹，用于存放首页的相关文件。

index.wxml

<view class="container">
<view class="header">
<text>外卖小程序</text>
</view>
<view class="search-bar">
<input type="text" placeholder="搜索美食"/>
<button>搜索</button>
</view>
<view class="category-list">
<view wx:for="{{categories}}" wx:key="id" class="category-item">
<image src="{{item.iconUrl}}" mode="widthFix"/>
<text>{{item.name}}</text>
</view>
</view>
<view class="recommend-list">
<view wx:for="{{recommendFoods}}" wx:key="id" class="food-item">
<image src="{{item.imageUrl}}" mode="widthFix"/>
<text>{{item.name}}</text>
<text>￥{{item.price}}</text>
</view>
</view>
</view>

index.wxss

.container {
padding: 20rpx;
}
.header {
text-align: center;
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.search-bar {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.search-bar input {
flex: 1;
padding: 15rpx;
border: 1px solid #ccc;
border-radius: 5rpx;
}
.search-bar button {
margin-left: 10rpx;
padding: 15rpx 20rpx;
background-color: #1aad19;
color: white;
border-radius: 5rpx;
}
.category-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 20rpx;
}
.category-item {
text-align: center;
}
.category-item image {
width: 80rpx;
height: 80rpx;
}
.recommend-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.food-item {
text-align: center;
margin-bottom: 20rpx;
}
.food-item image {
width: 150rpx;
height: 150rpx;
}

index.js

Page({
data: {
categories: [
{ id: 1, name: '快餐', iconUrl: 'icon1.png' },
{ id: 2, name: '川菜', iconUrl: 'icon2.png' },
{ id: 3, name: '粤菜', iconUrl: 'icon3.png' }
],
recommendFoods: [
{ id: 1, name: '汉堡套餐', imageUrl: 'food1.jpg', price: 25 },
{ id: 2, name: '宫保鸡丁', imageUrl: 'food2.jpg', price: 18 },
{ id: 3, name: '白切鸡', imageUrl: 'food3.jpg', price: 22 }
]
}
})

index.json

{
"navigationBarTitleText": "外卖首页"
}

商家列表页设计 在 pages 目录下创建一个名为“merchant-list”的文件夹，用于存放商家列表页的相关文件。

merchant-list.wxml

<view class="container">
<view wx:for="{{merchants}}" wx:key="id" class="merchant-item">
<image src="{{item.logoUrl}}" mode="widthFix"/>
<text>{{item.name}}</text>
<text>评分：{{item.rating}}</text>
<button bindtap="goToMerchantDetail" data-merchant-id="{{item.id}}">查看详情</button>
</view>
</view>

merchant-list.wxss

.container {
padding: 20rpx;
}
.merchant-item {
display: flex;
align-items: center;
margin-bottom: 20rpx;
border: 1px solid #ccc;
padding: 15rpx;
border-radius: 5rpx;
}
.merchant-item image {
width: 60rpx;
height: 60rpx;
margin-right: 10rpx;
}
.merchant-item button {
margin-left: auto;
padding: 10rpx 20rpx;
background-color: #1aad19;
color: white;
border-radius: 5rpx;
}

merchant-list.js

Page({
data: {
merchants: [
{ id: 1, name: '美味餐厅', logoUrl: 'logo1.png', rating: 4.5 },
{ id: 2, name: '欢乐食府', logoUrl: 'logo2.png', rating: 4.2 },
{ id: 3, name: '实惠菜馆', logoUrl: 'logo3.png', rating: 4.0 }
]
},
goToMerchantDetail: function(e) {
const merchantId = e.currentTarget.dataset.merchantId;
wx.navigateTo({
url: `/pages/merchant-detail/merchant-detail?id=${merchantId}`
});
}
})

merchant-list.json

{
"navigationBarTitleText": "商家列表"
}

商家详情页设计 在 pages 目录下创建一个名为“merchant-detail”的文件夹，用于存放商家详情页的相关文件。

merchant-detail.wxml

<view class="container">
<image src="{{merchant.logoUrl}}" mode="widthFix"/>
<text>{{merchant.name}}</text>
<text>评分：{{merchant.rating}}</text>
<view class="food-list">
<view wx:for="{{merchant.foods}}" wx:key="id" class="food-item">
<image src="{{item.imageUrl}}" mode="widthFix"/>
<text>{{item.name}}</text>
<text>￥{{item.price}}</text>
<button bindtap="addToCart" data-food-id="{{item.id}}">加入购物车</button>
</view>
</view>
</view>

merchant-detail.wxss

.container {
padding: 20rpx;
text-align: center;
}
.container image {
width: 150rpx;
height: 150rpx;
margin-bottom: 20rpx;
}
.food-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.food-item {
text-align: center;
margin-bottom: 20rpx;
margin: 0 15rpx;
}
.food-item image {
width: 120rpx;
height: 120rpx;
}
.food-item button {
padding: 10rpx 20rpx;
background-color: #1aad19;
color: white;
border-radius: 5rpx;
}

merchant-detail.js

Page({
data: {
merchant: {
id: 1,
name: '美味餐厅',
logoUrl: 'logo1.png',
rating: 4.5,
foods: [
  { id: 1, name: '汉堡套餐', imageUrl: 'food1.jpg', price: 25 },
  { id: 2, name: '宫保鸡丁', imageUrl: 'food2.jpg', price: 18 },
  { id: 3, name: '白切鸡', imageUrl: 'food3.jpg', price: 22 }
]
}
},
addToCart: function(e) {
const foodId = e.currentTarget.dataset.foodId;
wx.showToast({
title: '已加入购物车',
icon: 'success'
});
}
})

merchant-detail.json

{
"navigationBarTitleText": "商家详情"
}

购物车页设计 在 pages 目录下创建一个名为“cart”的文件夹，用于存放购物车页的相关文件。

cart.wxml

<view class="container">
<view wx:for="{{cartItems}}" wx:key="id" class="cart-item">
<image src="{{item.imageUrl}}" mode="widthFix"/>
<text>{{item.name}}</text>
<text>￥{{item.price}}</text>
<view class="quantity-control">
<button bindtap="decreaseQuantity" data-item-id="{{item.id}}">-</button>
<text>{{item.quantity}}</text>
<button bindtap="increaseQuantity" data-item-id="{{item.id}}">+</button>
</view>
<button bindtap="removeFromCart" data-item-id="{{item.id}}">删除</button>
</view>
<view class="total-price">
<text>总价：￥{{totalPrice.toFixed(2)}}</text>
</view>
<button bindtap="checkout">结算</button>
</view>

cart.wxss

.container {
padding: 20rpx;
}
.cart-item {
display: flex;
align-items: center;
margin-bottom: 20rpx;
border: 1px solid #ccc;
padding: 15rpx;
border-radius: 5rpx;
}
.cart-item image {
width: 80rpx;
height: 80rpx;
margin-right: 10rpx;
}
.quantity-control {
display: flex;
align-items: center;
margin: 0 10rpx;
}
.quantity-control button {
padding: 5rpx 10rpx;
background-color: #ccc;
border: none;
border-radius: 5rpx;
}
.total-price {
text-align: center;
margin-top: 20rpx;
font-size: 20rpx;
font-weight: bold;
}
.checkout {
width: 100%;
padding: 15rpx;
background-color: #1aad19;
color: white;
border-radius: 5rpx;
text-align: center;
margin-top: 20rpx;
}

cart.js

Page({
data: {
cartItems: [
{ id: 1, name: '汉堡套餐', imageUrl: 'food1.jpg', price: 25, quantity: 1 },
{ id: 2, name: '宫保鸡丁', imageUrl: 'food2.jpg', price: 18, quantity: 2 }
],
totalPrice: 61
},
decreaseQuantity: function(e) {
const itemId = e.currentTarget.dataset.itemId;
const cartItems = this.data.cartItems;
const newCartItems = cartItems.map(item => {
if (item.id === itemId && item.quantity > 1) {
  item.quantity--;
  this.setData({
    totalPrice: this.data.totalPrice - item.price
  });
}
return item;
});
this.setData({
cartItems: newCartItems
});
},
increaseQuantity: function(e) {
const itemId = e.currentTarget.dataset.itemId;
const cartItems = this.data.cartItems;
const newCartItems = cartItems.map(item => {
if (item.id === itemId) {
  item.quantity++;
  this.setData({
    totalPrice: this.data.totalPrice + item.price
  });
}
return item;
});
this.setData({
cartItems: newCartItems
});
},
removeFromCart: function(e) {
const itemId = e.currentTarget.dataset.itemId;
const cartItems = this.data.cartItems;
const newCartItems = cartItems.filter(item => item.id!== itemId);
const removedItem = cartItems.find(item => item.id === itemId);
this.setData({
cartItems: newCartItems,
totalPrice: this.data.totalPrice - removedItem.price * removedItem.quantity
});
wx.showToast({
title: '已从购物车删除',
icon: 'success'
});
},
checkout: function() {
wx.showToast({
title: '结算成功',
icon: 'success'
});
}
})

cart.json

{
"navigationBarTitleText": "购物车"
}

功能实现

数据请求 为了获取商家和商品数据，我们可以使用微信小程序的 wx.request 方法向服务器发送请求，假设我们有一个后端 API，提供商家列表和商品列表数据。在 app.js 中添加以下代码：

App({
onLaunch: function() {
 this.getMerchants();
 this.getFoods();
},
getMerchants: function() {
 wx.request({
   url: 'https://your-api.com/merchants',
   success: res => {
     this.globalData.merchants = res.data;
   }
 });
},
getFoods: function() {
 wx.request({
   url: 'https://your-api.com/foods',
   success: res => {
     this.globalData.foods = res.data;
   }
 });
},
globalData: {
 merchants: [],
 foods: []
}
})

在需要使用商家数据的页面，如 merchant-list.js 中，可以通过 this.getApp().global

外卖微信小程序开发教程