實戰丨如何製作一個完整的外賣小程式（已開源）
用雲開發實現的開源的外賣小程式，現在來啦
最近微信小店開放了，趕著微信全面開放之前，把自己的小程式開源出來給大家使用～
小程式效果
開發心得
如何在專案中整合雲開發
一開始專案並非基於雲開發而開發的，目前考慮用雲開發，因此，需要在專案中開啟雲開發的相關選項。
首先，在小程式資料夾中建立 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
技術交流加Q群：601134960
最新資訊關注微信公眾號【騰訊云云開發】
相關文章
- mpvue實戰開發美團外賣小程式Vue
- [開源]一個完整的黃頁小程式
- 美團外賣小程式的探索與實踐丨掘金開發者大會
- 花店小程式：如何開通製作鮮花店的微信小程式？微信小程式
- mpvue外賣小程式Vue
- 如何製作一個線上預約旅遊的微信小程式？微信小程式
- 如何用PS製作一個小泡泡呢？
- 美團外賣小程式的探索和實踐（演講內容整理）丨掘金開發者大會
- 小程式賣貨怎麼樣，怎樣快速開發一個賣貨的商城小程式呢
- 外賣橫幅設計教程，教你如何製作橫幅
- 實踐，製作一個高擴充套件、視覺化低程式碼前端，詳實、完整套件視覺化前端
- 神了！兩個開源的高仿外賣專案！
- 外賣小程式對接飛鵝小票列印的實現
- Hybrid 實戰：如何完整下載一個 wap 頁面
- 家電行業商家如何開發製作自己的商城小程式？行業
- 混合開發實戰：App里拉起一個小程式（IOS篇）APPiOS
- 高仿美團外賣小程式
- 小程式開發製作公司哪家好
- 藉助實時資料推送快速製作線上對戰五子棋小遊戲丨實戰遊戲
- 如何製作 Sketch 外掛
- Java製作驗證碼的完整程式碼Java
- 小白必看！教你四步製作賣傢俱的微信小程式商城！微信小程式
- Android開源庫的製作Android
- 開源一個功能完整的SpringBoot專案框架Spring Boot框架
- 微信抽獎小程式如何製作？教你快速製作微信公眾號抽獎小程式！
- 開源一個製作小工具的小工具，順便求個 star
- 鬥圖神器–純前端實現視訊轉GIF製作表情包（已開源）前端
- 實戰：雲開發·實現奶茶店小程式（一）
- 自己做一個ChatGPT微信小程式(程式碼開源)ChatGPT微信小程式
- 如何製作一個CocoaPods私有庫
- 如何製作一個 RPM 檔案
- 自己如何製作一個網頁網頁
- 如何開發健身房小程式？教你4步製作健身房約課小程式
- Mac小技巧：來使用照片程式製作一個幻燈片吧！Mac
- webpack實戰（一）：真實專案中一個完整的webpack配置Web
- 傢俱行業如何製作自己的商城類小程式？行業
- 小程式外賣專案實踐之-左右選單聯動
- 《小程式開發原理與實戰》資源連結清單