餐饮小程序极速开发指南：从0到1搭建外卖点餐系统-优快云博客

餐饮小程序极速开发指南：从0到1搭建外卖点餐系统

【免费下载链接】bee 微信小程序-餐饮点餐外卖-开箱即用项目地址: https://gitcode.com/gooking2/bee

引言：餐饮商家的数字化转型痛点与解决方案

你是否还在为餐饮外卖系统开发周期长、成本高而烦恼？是否面临第三方平台抽成过高、客户数据无法沉淀的困境？本文将带你深入了解如何利用gooking2/bee微信小程序框架，以最低成本、最快速度搭建一套完整的餐饮点餐外卖系统。

读完本文后，你将能够：

掌握gooking2/bee框架的核心架构与组件使用
实现从商品展示、购物车到支付的完整业务流程
配置多语言支持与门店管理功能
部署一套可直接上线运营的餐饮小程序

一、项目架构与技术选型

1.1 整体架构概览

gooking2/bee采用经典的微信小程序架构，基于原生小程序框架开发，同时整合了Vant Weapp组件库，形成了高效、可扩展的技术体系。

mermaid

1.2 核心技术栈

技术	说明	版本
微信小程序原生框架	基础开发框架	最新
Vant Weapp	轻量、可靠的小程序UI组件库	最新
JavaScript	主要开发语言	ES6+
WXML/WXSS	页面结构与样式	最新
Apifm-wxapi	后端API接口封装	最新

1.3 项目目录结构

gooking2/bee/
├── app.js                 # 应用入口文件
├── app.json               # 全局配置
├── app.wxss               # 全局样式
├── config.js              # 项目配置
├── components/            # 自定义组件
│   ├── parser/            # HTML解析组件
│   └── payment/           # 支付组件
├── i18n/                  # 国际化配置
├── images/                # 图片资源
├── miniprogram_npm/       # npm依赖包
├── pages/                 # 页面文件
│   ├── home/              # 首页
│   ├── goods/             # 商品相关
│   ├── cart/              # 购物车
│   ├── order/             # 订单相关
│   ├── pay/               # 支付相关
│   └── my/                # 个人中心
└── utils/                 # 工具函数
    ├── pay.js             # 支付工具
    ├── auth.js            # 授权工具
    └── util.js            # 通用工具

二、环境搭建与项目初始化

2.1 开发环境准备

安装微信开发者工具
获取微信小程序AppID
安装Node.js环境
配置Git环境

2.2 项目获取与安装

# 克隆项目仓库
git clone https://gitcode.com/gooking2/bee.git

# 进入项目目录
cd gooking2/bee

# 安装依赖
npm install

2.3 配置项目

项目的核心配置文件为config.js，主要包含以下配置项：

module.exports = {
  version: "25.04.24",
  note: '我的礼品卡显示送礼人头像和昵称',
  subDomain: "beeorder", // 子域名，需根据教程设置
  merchantId: 27, // 商户ID，可在后台查看
  customerServiceType: 'QW' // 客服类型，QW为企业微信
}

配置说明：

subDomain：需根据官方教程设置自己的子域名
merchantId：商户ID，在后台工厂设置-商户信息中查看
customerServiceType：客服类型，默认企业微信客服

三、核心功能模块实现

3.1 应用入口与全局配置

app.js是应用的入口文件，负责应用的初始化、生命周期管理等核心功能：

App({
  onLaunch: function() {
    // 初始化国际化
    i18n.getLanguage()
    this.setTabBarLanguage()
    
    // 初始化API
    WXAPI.init(CONFIG.subDomain)
    WXAPI.setMerchantId(CONFIG.merchantId)
    
    // 检测新版本
    const updateManager = wx.getUpdateManager()
    updateManager.onUpdateReady(function () {
      wx.showModal({
        confirmText: $t.common.confirm,
        cancelText: $t.common.cancel,
        content: $t.common.upgrade,
        success(res) {
          if (res.confirm) {
            updateManager.applyUpdate()
          }
        }
      })
    })
    
    // 网络状态监测
    wx.getNetworkType({/* ... */})
    wx.onNetworkStatusChange(function(res) {/* ... */})
    
    // 加载配置信息
    WXAPI.queryConfigBatch('mallName,myBg,mapPos,...').then(res => {/* ... */})
  },
  
  onShow: function(e) {
    // 处理页面显示逻辑，如登录状态检查、分享参数处理等
  },
  
  // 其他核心方法...
  getUserApiInfo() {/* ... */},
  initLanguage(_this) {/* ... */},
  changeLang(_this) {/* ... */},
  setTabBarLanguage() {/* ... */},
  
  globalData: {
    isConnected: true
  }
})

3.2 商品展示与购物车功能

3.2.1 商品列表实现

商品列表页面(pages/goods/list.js)负责展示商品信息，支持分类筛选、搜索等功能：

// 核心代码片段
Page({
  data: {
    goodsList: [],
    categories: [],
    activeCategoryId: 0,
    page: 1,
    pageSize: 10,
    loading: false,
    searchKeyword: ''
  },
  
  onLoad: function(options) {
    getApp().initLanguage(this)
    this.getCategories()
    this.getGoodsList()
  },
  
  // 获取分类
  async getCategories() {
    const res = await WXAPI.goodsCategory()
    if (res.code == 0) {
      this.setData({
        categories: res.data,
        activeCategoryId: res.data.length > 0 ? res.data[0].id : 0
      })
    }
  },
  
  // 获取商品列表
  async getGoodsList() {
    wx.showLoading({ title: '' })
    this.setData({ loading: true })
    
    const res = await WXAPI.goods({
      categoryId: this.data.activeCategoryId,
      keyword: this.data.searchKeyword,
      page: this.data.page,
      pageSize: this.data.pageSize
    })
    
    wx.hideLoading()
    if (res.code == 0) {
      this.setData({
        goodsList: this.data.page === 1 ? res.data : this.data.goodsList.concat(res.data),
        loading: false
      })
    }
  },
  
  // 分类切换
  onCategoryChange(e) {
    this.setData({
      activeCategoryId: e.currentTarget.dataset.id,
      page: 1,
      goodsList: []
    })
    this.getGoodsList()
  },
  
  // 搜索功能
  onSearch(e) {
    this.setData({
      searchKeyword: e.detail,
      page: 1,
      goodsList: []
    })
    this.getGoodsList()
  },
  
  // 加入购物车
  addToCart(e) {
    const goods = e.currentTarget.dataset.goods
    // 调用购物车工具添加商品
    getApp().globalData.cart.add(goods, 1)
    wx.showToast({ title: '已加入购物车' })
  }
  
  // 其他方法...
})

3.2.2 购物车实现

购物车功能主要在pages/cart/index.js和pages/cart/order.js中实现：

// pages/cart/order.js 核心代码
Page({
  data: {
    orderInfo: null,
    goodsList: [],
    paymentShow: false,
    money: 0,
    paySuccess: false
  },
  
  onLoad: function(options) {
    getApp().initLanguage(this)
    wx.setNavigationBarTitle({ title: this.data.$t.cart.ordered })
  },
  
  onShow: function() {
    this.fetchOrder()
  },
  
  // 获取订单信息
  async fetchOrder() {
    wx.showLoading({ title: '' })
    const res = await WXAPI.orderList({
      token: wx.getStorageSync('token'),
      status: 0
    })
    wx.hideLoading()
    
    if (res.code == 0) {
      this.setData({
        orderInfo: res.data.orderList[0],
        goodsList: res.data.goodsMap[res.data.orderList[0].id]
      })
    }
  },
  
  // 去支付
  async goPayOrder() {
    const code = await AUTH.wxaCode()
    let res = await WXAPI.authorize({ code })
    
    if (res.code != 0) {
      wx.showModal({/* ... */})
      return
    }
    
    wx.setStorageSync('payToken', res.data.token)
    this.setData({
      paymentShow: true,
      money: this.data.orderInfo.amountReal,
      nextAction: {/* ... */}
    })
  },
  
  // 支付成功回调
  paymentOk(e) {
    this.setData({
      paymentShow: false,
      paySuccess: true
    })
  },
  
  // 取消支付
  paymentCancel() {
    this.setData({ paymentShow: false })
  }
})

3.3 支付功能实现

支付功能是系统的核心模块之一，主要由utils/pay.js工具类实现：

// utils/pay.js 核心代码
const WXAPI = require('apifm-wxapi')
const i18n = require("../i18n/index")
const $t = i18n.$t()

/**
 * 微信支付函数
 * @param {string} type - 支付类型：order(订单)、recharge(充值)、paybill(优惠买单)
 * @param {number} money - 支付金额
 * @param {string} orderId - 订单ID
 * @param {string} redirectUrl - 支付完成后跳转的URL
 * @param {object} data - 扩展数据对象
 */
function wxpay(type, money, orderId, redirectUrl, data) {
  const postData = {
    token: wx.getStorageSync('token'),
    money: money,
    remark: "在线充值",
  }
  
  // 根据支付类型设置不同参数
  if (type === 'order') {
    postData.remark = "支付订单 ：" + orderId;
    postData.nextAction = { type: 0, id: orderId };
  }
  
  if (type === 'paybill') {
    postData.remark = $t.my.youhuimaidan + " ：" + data.money;
    postData.nextAction = { type: 4, uid: wx.getStorageSync('uid'), money: data.money };
  }
  
  postData.payName = postData.remark;
  if (postData.nextAction) {
    postData.nextAction = JSON.stringify(postData.nextAction);  
  }
  
  // 发起支付请求
  WXAPI.wxpay(postData).then(function(res) {
    if (res.code == 0) {
      // 调用微信支付接口
      wx.requestPayment({
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        package: res.data.package,
        signType: res.data.signType,
        paySign: res.data.paySign,
        fail: function(aaa) {
          console.error(aaa)
          wx.showToast({ title: aaa })
          if (redirectUrl) wx.redirectTo({ url: redirectUrl })
        },
        success: function() {
          wx.showToast({ title: $t.asset.success })
          if (redirectUrl) wx.redirectTo({ url: redirectUrl })
        }
      })
    } else {
      wx.showModal({/* 错误处理 */})      
    }
  })
}

module.exports = { wxpay: wxpay }

3.4 用户认证与授权

用户认证与授权功能主要在utils/auth.js中实现：

// 简化版auth.js
const WXAPI = require('apifm-wxapi')

/**
 * 检查是否已登录
 */
function checkHasLogined() {
  const token = wx.getStorageSync('token')
  if (!token) {
    return false
  }
  return true
}

/**
 * 执行授权登录
 */
function authorize() {
  return new Promise((resolve, reject) => {
    wx.login({
      success: res => {
        WXAPI.login_wx(res.code).then(res => {
          if (res.code == 10000) {
            // 未注册
            register().then(res => {
              resolve(res)
            }).catch(err => {
              reject(err)
            })
            return
          }
          if (res.code == 0) {
            wx.setStorageSync('token', res.data.token)
            wx.setStorageSync('uid', res.data.uid)
            resolve(res)
          } else {
            reject(res)
          }
        })
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

// 其他辅助方法...
module.exports = {
  checkHasLogined,
  authorize,
  // 其他导出...
}

3.5 国际化实现

系统支持多语言切换，主要通过i18n目录下的配置文件实现：

// i18n/index.js
import en from './en'
import zh_CN from './zh_CN'

const locales = {
  en,
  'zh_CN': zh_CN
}

module.exports = {
  langs: [
    { code: 'zh_CN', name: '简体中文' },
    { code: 'en', name: 'English' }
  ],
  
  getLanguage() {
    const language = wx.getStorageSync('Language')
    if (language) {
      return language
    }
    // 默认根据手机系统语言
    const systemInfo = wx.getSystemInfoSync()
    const lang = systemInfo.language
    if (lang.indexOf('zh') > -1) {
      return 'zh_CN'
    } else {
      return 'en'
    }
  },
  
  $t() {
    const language = this.getLanguage()
    return locales[language]
  },
  
  setTabBarLanguage() {
    const $t = this.$t()
    if (typeof $t.tabBar == 'object') {
      wx.setTabBarItem({ index: 0, text: $t.tabBar.home })
      wx.setTabBarItem({ index: 1, text: $t.tabBar.cate })
      wx.setTabBarItem({ index: 2, text: $t.tabBar.cart })
      wx.setTabBarItem({ index: 3, text: $t.tabBar.my })
    }
  }
}

四、核心业务流程解析

4.1 用户点餐流程

mermaid

4.2 订单状态流转

mermaid

五、系统配置与部署

5.1 关键配置项说明

在config.js中配置项目关键信息：

module.exports = {
  version: "25.04.24",          // 版本号
  note: '我的礼品卡显示送礼人头像和昵称', // 更新说明
  subDomain: "beeorder",        // 子域名，需根据教程设置
  merchantId: 27,               // 商户ID，在后台查看
  customerServiceType: 'QW'     // 客服类型，QW为企业微信
}

5.2 部署流程

准备工作
- 注册微信小程序账号并获取AppID
- 完成微信支付商户认证
- 配置服务器域名

代码上传与审核

# 克隆代码库
git clone https://gitcode.com/gooking2/bee.git

# 进入项目目录
cd gooking2/bee

# 安装依赖
npm install

使用微信开发者工具
- 导入项目
- 配置AppID
- 填写项目名称和目录
- 编译运行测试
上传审核
- 在微信开发者工具中点击"上传"
- 填写版本号和更新说明
- 提交审核
- 等待审核通过后发布

六、常见问题与解决方案

6.1 支付功能异常

问题现象：调用支付接口失败或支付后状态不正确。

解决方案：

检查config.js中的merchantId是否正确配置
确认微信支付商户号已完成认证并与小程序绑定
检查支付参数是否完整，特别是nextAction参数的JSON序列化
检查网络连接是否正常
查看控制台日志，分析具体错误信息

6.2 商品数据不显示

问题现象：商品列表页面空白，不显示商品数据。

解决方案：

检查subDomain配置是否正确
确认后端服务是否正常运行
检查网络请求是否成功，可在开发者工具中查看Network面板
确认用户是否已登录，token是否有效
检查后端商品数据是否已正确录入

6.3 多语言切换不生效

问题现象：切换语言后界面文字未更新。

解决方案：

检查页面是否正确调用initLanguage方法
确认所有文本都使用了$t函数进行国际化处理
检查i18n配置文件是否完整
尝试清除小程序缓存后重新打开

七、总结与扩展

7.1 项目特点总结

gooking2/bee作为一款开箱即用的餐饮点餐外卖小程序，具有以下特点：

快速部署：提供完整的前后端解决方案，无需从零开发
功能全面：涵盖商品展示、购物车、订单、支付等完整流程
良好体验：基于Vant组件库，界面美观，交互流畅
多语言支持：内置国际化功能，支持中英文切换
易于扩展：模块化设计，便于功能扩展和二次开发

7.2 功能扩展建议

基于现有框架，可以考虑以下功能扩展：

会员积分系统：增加用户积分、等级和兑换功能
营销活动模块：添加优惠券、秒杀、拼团等营销工具
数据分析功能：增加销售数据统计和用户行为分析
多门店管理：支持连锁餐饮品牌的多门店管理
外卖配送对接：对接第三方配送平台API

7.3 性能优化建议

图片优化：使用微信小程序的图片压缩和懒加载功能
数据缓存：合理使用本地缓存减少网络请求
分包加载：对小程序进行分包处理，优化启动速度
代码精简：移除未使用的代码和资源
接口优化：合并请求，减少接口调用次数

八、开发资源与社区支持

8.1 官方文档

8.2 项目地址

https://gitcode.com/gooking2/bee

8.3 开发者交流

项目Issues：提交问题和建议
技术社区：可在相关技术论坛交流使用经验

通过本文档的指导，您应该能够快速部署和使用gooking2/bee餐饮小程序，并根据实际需求进行定制开发。祝您的餐饮业务蒸蒸日上！

【免费下载链接】bee 微信小程序-餐饮点餐外卖-开箱即用项目地址: https://gitcode.com/gooking2/bee

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考