用雲開發實現的開源的外賣小程式，現在來啦

最近微信小店開放了，趕著微信全面開放之前，把自己的小程式開源出來給大家使用～

小程式效果

開發心得

如何在專案中整合雲開發

一開始專案並非基於雲開發而開發的，目前考慮用雲開發，因此，需要在專案中開啟雲開發的相關選項。

首先，在小程式資料夾中建立 cloud 資料夾，並在package檔案中配置，建立使用者登入的雲函式並上傳到微信小程式雲中。相關的操作可以參考官方文件。

我在專案目錄中新增了 cloud 和 miniprogram 兩個目錄，並在 project.config.json 資料夾進行配置

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 } } }

總結

雲開發體驗下來，優點自不必多說，微信登入與支付原生支援，呼叫與除錯都很方便，特別是不用啟本地服務開發，真的好用；

這個小程式的原始碼我已經開源了，你可以訪問 Gitee 獲取原始碼，自行使用～

雲開發（Tencent CloudBase，TCB）是騰訊雲提供的雲原生一體化開發環境和工具平臺，為開發者提供高可用、自動彈性擴縮的後端雲服務，包含計算、儲存、託管等serverless化能力，可用於雲端一體化開發多種端應用（小程式，公眾號，Web 應用，Flutter 客戶端等），幫助開發者統一構建和管理後端服務和雲資源，避免了應用開發過程中繁瑣的伺服器搭建及運維，開發者可以專注於業務邏輯的實現，開發門檻更低，效率更高。

產品文件：https://cloud.tencent.com/product/tcb

技術文件：https://cloudbase.net

技術交流加Q群：601134960

最新資訊關注微信公眾號【騰訊云云開發】