实战丨如何制作一个完整的外卖小程序（已开源）

最新推荐文章于 2024-08-10 21:28:14 发布

Tencent_TCB

最新推荐文章于 2024-08-10 21:28:14 发布

阅读量5.6k

点赞数 20

分类专栏：小程序·云开发 CloudBase 技术文章标签：前端开源小程序外卖小程序全栈

本文链接：https://blog.csdn.net/TCB_CloudBase/article/details/107636995

版权

本文分享了如何制作一个完整的外卖小程序，包括如何集成云开发、开通数据库、进行数据操作、联表查询、文件上传和实现微信支付逻辑。通过实际操作，详细解析每个步骤，提供开源代码供参考，帮助开发者高效构建小程序。

摘要由CSDN通过智能技术生成

最近微信小店开放了，赶着微信全面开放之前，把自己的小程序开源出来给大家使用～

小程序效果

开发心得

如何在项目中集成云开发

一开始项目并非基于云开发而开发的，目前考虑用云开发，因此，需要在项目中开启云开发的相关选项。

首先，在小程序文件夹中建立 cloud 文件夹，并在package文件中配置，建立用户登录的云函数并上传到微信小程序云中。相关的操作可以参考官方文档。

我在项目目录中添加了 cloud 和 miniprogram 两个目录，并在 project.config.json 文件夹进行配置

{
   
   "miniprogramRoot": "./miniprogram"
   "cloudfunctionRoot": "./cloud/"
}

开通云开发

配置完成后,可以点击控制台中的「云开发」来开通云开发。

在云开发的界面中配置，并开通云开发。

开通数据库集合

云开发不会自动创建数据库集合，因此，你需要手动创建集合。分别创建店铺表Seller、分类表Category、商品表Food、订单表Order、地址表Address、用户表*_User*。

数据操作

有了数据库的表后，就可以在代码中对数据进行操作了。

下方是我进行目录操作的代码。

const db = wx.cloud.database()
const {
    showModal } = require('../../utils/utils')

Page({
   
  onLoad: function(options) {
   
    // 管理员认证
    getApp().auth()
    if (options.objectId) {
   
      // 缓存数据
      this.setData({
   
        isEdit: true,
        objectId: options.objectId
      })
      // 请求待编辑的分类对象
      db.collection('Category')
        .doc(options.objectId)
        .get()
        .then(res => {
    
        // 获取分类信息
          this.setData({
   
            category: res.data
          })
        })
    }
  },
  add: function(e) {
   
    var form = e.detail.value
    if (form.title == '') {
   
      wx.showModal({
   
        title: '请填写分类名称',
        showCancel: false
      })
      return
    }
    form.priority = Number.parseInt(form.priority)

    // 添加或者修改分类
    // 修改模式
    if (this.data