当前位置： 借助开源项目,学习软件开发-android开发开源框架
一个用云开发实现的开源外卖小程序，现在就在这里
近日，微信小店已经开通。 在微信全面开放之前，我会把自己的小程序开源出来供大家使用~
小程序效果开发心得 如何在项目中融入云开发
项目一开始并不是基于云开发的。 目前考虑云开发。 因此需要在项目中启用云开发相关选项。
首先在小程序文件夹中创建一个cloud文件夹，在package文件中进行配置，创建一个用户登录的cloud函数并上传到微信小程序云中。 相关操作请参考官方文档。
我在项目目录下添加了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.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.main = 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上传文件。
chooseImage() {
wx.chooseImage({
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: '上传成功'
})
// 渲染本地头像
this.setData({
new_logo: fileId
})
}, err => {
console.log(err)
wx.showToast({
title: '上传失败'
})
})
})
}
})
}微信支付逻辑的实现
作为商场，难免会有微信支付相关逻辑的实现。 这种情况下，可以使用云开发提供的微信支付云调用功能，实现快速的API调用和接口实现。
绑定商户
使用云开发提供的微信支付时，需要先绑定微信支付，在云开发控制台添加对应的商户号
添加后微信会发通知
按照说明开设账户。
如果没有绑定，会报“Acceptance relationship does not exist”的错误
函数代码调用
配置完成后，只需要在云函数中调用微信支付接口即可实现调用的能力
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函数入口函数
exports.main = 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.main = 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 }
}
}总结
云开发体验优势不用多说，微信登录和支付原生支持，调用和调试都非常方便，尤其是在不启用本地服务开发的情况下，真的好用；
这个小程序的源码我已经开源了，大家可以去社区官网获取源码自己使用~
作者：黄秀杰，2016年开始从事小程序开发和技术布道，个人公众号同名“黄秀杰”。
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生集成开发环境和工具平台。 为开发者提供高可用、自动弹性伸缩的后端云服务，包括计算、存储、托管等Serverless能力。 ，可用于云端各种端应用（小程序、公众号、Web应用、Flutter客户端等）的集成开发，帮助开发者统一构建和管理后端服务和云资源，在应用开发过程中避免了繁琐的服务器构建和运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。
产品文档：
技术文档：
技术交流加Q群：601134960
上一篇 
