用云开发实现的开源的外卖小程序，现在来啦(附带源码)

近期微小店对外开放了，急着手机微信全方位对外开放以前，把自己的小程序开源系统出去给我们应用～

小程序实际效果

开发设计体会心得怎样在项目中集成化云开发

一开始项目并不是根据云开发而研发的，现阶段考虑到用云开发，因而，必须在项目中打开云开发的有关选择项。

最先，在小程序文件夹中创建 cloud 文件夹，并在package文档中配备，创建账号登录的云函数并上传至手机微信小程序云间。有关的操控可以参照官方网文本文档。

我还在项目文件目录中增加了 cloud 和 miniprogram 2个文件目录，并在 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.isEdit) { const category = this.data.category db.collection('Category') .doc(category._id) .update({ data: form }) .then(res => { console.log(res) showModal() }) } else { db.collection('Category') .add({ data: form }) .then(res => { console.log(res) showModal() }) } }, showModal() { // 提交成功提醒并返回上一页 wx.showModal({ title: this.data.isEdit ? '改动取得成功' : '加上取得成功', showCancel: false, success: () => { wx.navigateBack() } }) }, delete: function() { // 确认删除提示框 wx.showModal({ title: '确认删除', success: res => { if (res.confirm) { const category = this.data.category db.collection('Category') .doc(category._id) .remove() .then(res => { console.log(res) wx.showToast({ title: '删掉取得成功' }) wx.navigateBack() }) } } }) }})联表查看

在应用数据库查询时，免不了要开展联表查看，云开发适用在云函数侧开展联表查看，你能参照我的编码，来完成联表查看的作用。

const cloud = require('wx-server-sdk')cloud.init()const db = cloud.database()// 云函数通道函数公式exports. ** in = async (event, context) => { const result = await db.collection('Food') .aggregate() .lookup({ from: 'Category', localField: 'category', foreignField: '_id', as: 'categories' }) .end() // .orderBy('priority', 'asc') // .get() console.log(result) return result.list}上传文件

在小程序的实际操作中，在所难免碰到要开展上传图片的情景。在开展上传图片时，云开发给予了方便快捷的云储存供大家查看数据信息。

在获得到文档的当地途径后，启用 wx.cloud.uploadFile 就可以文件上传。

chooseI ** ge() { wx.chooseI ** ge({ count: 1, // 默认设置9 sizeType: ['compressed'], // 可以特定是原照或是压缩图，默认设置二者都是有 sourceType: ['album', 'camera'], // 可以特定由来是相册图片或是照相机，默认设置二者都是有 success: res => { const tempFilePaths = res.tempFilePaths const file = tempFilePaths[0] const name = utils.random_filename(file) //提交的高清图片的别称，提议可以用日期取名 console.log(name) wx.cloud.uploadFile({ cloudPath: name, filePath: file, // 文件路径 }).then(res => { console.log(res) const fileId = res.fileID // 将文档id储存到数据库表中 db.collection('Seller').doc(this.data.seller._id) .update({ data: { logo_url: fileId } }).then(() => { wx.showToast({ title: '提交取得成功' }) // 3D渲染当地头像图片 this.setData({ new_logo: fileId }) }, err => { console.log(err) wx.showToast({ title: '提交不成功' }) }) }) } }) }微信付款逻辑性的完成

做为一个商城系统，在所难免有微信付款有关逻辑性的完成。在这样的情况下，可以依靠云开发给予的微信付款云启用作用完成更快的 API 启用和端口的完成。

关联商家

在应用云开发给予的微信付款时，必须先实行微信付款的关联，在云开发控制面板加上对应的商户号

加上后手机微信会发过来通告

依据提醒，开启账户就可以。

如果不关联，将报“审理关联不会有”的不正确

函数公式编码启用

配备成功后，只要在云函数中启用微信付款的插口，就可以完成有关启用的工作能力

const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV})// 云函数通道函数公式exports. ** in = async (event, context) => { console.log('要求中') console.log(cloud.getWXContext().ENV) let { orderId, amount, body } = event const wxContext = cloud.getWXContext() const res = await cloud.cloudPay.unifiedOrder({ body: body, outTradeNo: orderId, spbillCreateIp: '127.0.0.1', subMchId: '1447716902', totalFee: amount, envId: 'dinner-cloud', functionName: 'pay_cb' }) return res.payment}

这儿 functionName: 'pay_cb'指的就是支付成功后，微信支付那侧给我的回调信息，后面我们就用它来更新我们的订单状态

小程序端代码调用

调用云函数后，会获得微信支付所需要的各种参数，

这个时候，就可以在小程序端调用微信支付接口，进行支付，相关代码可以参考

const { result: payData } = res wx.requestPayment({ timeStamp: payData.timeStamp, nonceStr: payData.nonceStr, package: payData.package, signType: 'MD5', paySign: payData.paySign, success: res => { console.log('支付成功', res) wx.showModal({ title: '支付成功', showCancel: false, success: () => { // 跳转订单详情页 wx.navigateTo({ url: '/order/detail/detail?objectId=' + order._id }) } }) },...微信支付回调处理

微信统一下单里一个pay_cb回调函数，它是一个云函数，后续微信支付的支付信息将会发送在这个函数中，相应的，我们需要编写处理的方法

// 云函数入口文件const cloud = require('wx-server-sdk')cloud.init({ // API 调用都保持和云函数当前所在环境一致 env: cloud.DYNAMIC_CURRENT_ENV})const db = cloud.database()// 云函数入口函数exports. ** in = async (event, context) => { console.log('支付回调') console.log(event) console.log(cloud.getWXContext().ENV) const orderId = event.outTradeNo const resultCode = event.resultCode if (resultCode === 'SUCCESS') { const res = await db .collection('Order') .doc(orderId) .update({ data: { status: 1 } }) console.log(res) return { errcode: 0 } }}总结

云开发体验下来，优点自不必多说，微信登录与支付原生支持，调用与调试都很方便，特别是不用启本地服务开发，真的好用；

这个小程序的源码我已经开源了，你可以获取源码，自行使用～

用云开发实现的开源的外卖小程序，现在来啦 | 云开发CloudBase - 一站式后端云服务

作者：黄秀杰，16年开始从事小程序开发与技术布道，同名个人公众号「黄秀杰」。

云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等serverless化能力，可用于云端一体化开发多种端应用（小程序，公众号，Web 应用，Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。 产品文档：https://cloud.tencent.com/product/tcb 技术文档：https://cloudbase.net 技术交流加Q群：601134960 最新资讯关注微信公众号【腾讯云云开发】