最近微信小店凋谢了,赶着微信全面凋谢之前,把本人的小程序开源进去给大家应用~
小程序成果
开发心得
如何在我的项目中集成云开发
一开始我的项目并非基于云开发而开发的,目前思考用云开发,因而,须要在我的项目中开启云开发的相干选项。
首先,在小程序文件夹中建设 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.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 调用和接口的实现。
绑定商户
在应用云开发提供的微信领取时,须要先执行微信领取的绑定,在云开发控制台增加相应的商户号
增加后微信会发来告诉
依据提醒,开明账号即可。
如果不绑定,将报“受理关系不存在”的谬误
函数代码调用
配置实现后,只须要在云函数中调用微信领取的接口,就能够实现相干调用的能力
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 } }}
总结
云开发体验下来,长处自不用多说,微信登录与领取原生反对,调用与调试都很不便,特地是不必启本地服务开发,真的好用;
这个小程序的源码我曾经开源了,你能够拜访云开发社区官网 获取源码,自行应用~
作者:黄秀杰,16年开始从事小程序开发与技术布道,同名集体公众号「黄秀杰」。
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为开发者提供高可用、主动弹性扩缩的后端云服务,蕴含计算、存储、托管等serverless化能力,可用于云端一体化开发多种端利用(小程序,公众号,Web 利用,Flutter 客户端等),帮忙开发者对立构建和治理后端服务和云资源,防止了利用开发过程中繁琐的服务器搭建及运维,开发者能够专一于业务逻辑的实现,开发门槛更低,效率更高。产品文档:https://cloud.tencent.com/product/tcb
技术文档:https://cloudbase.net
技术交换加Q群:601134960
最新资讯关注微信公众号【腾讯云云开发】