記一次基于mpvue的小程序開發(fā)及上線實(shí)戰(zhàn)
- 小程序名稱：一起打車吧
- 項(xiàng)目地址：客戶端：https://github.com/jrainlau/t...
服務(wù)端：https://github.com/jrainlau/t...
- 小程序二維碼：
經(jīng)過為期兩個(gè)晚上下班時(shí)間的努力，終于把我第一個(gè)小程序開發(fā)完成并發(fā)布上線了。整個(gè)過程還算順利，由于使用了mpvue方案進(jìn)行開發(fā)，故可以享受和vue一致的流暢開發(fā)體驗(yàn)；后臺(tái)系統(tǒng)使用了python3+flask框架進(jìn)行，使用最少的代碼完成了小程序的后臺(tái)邏輯。除了開發(fā)之外，還實(shí)實(shí)在在地體驗(yàn)了一把微信小程序的開發(fā)流程，包括開發(fā)者工具的使用、體驗(yàn)版的發(fā)布、上線的申請(qǐng)等等。這些開發(fā)體驗(yàn)都非常值得被記錄下來，于是便趁熱打鐵，寫下這篇文章。
一、需求&功能
由于公司里有相當(dāng)多的同事都住在同一個(gè)小區(qū)，所以上下班的時(shí)候經(jīng)常會(huì)在公司群里組織拼車。但是由于完全依賴聊天記錄，且上下班拼車的同事也很多，依賴群聊很容易把消息刷走，而且容易造成信息錯(cuò)亂。既然如此，那么完全可以開發(fā)一個(gè)小工具把這些問題解決。
發(fā)起拼車的人把出發(fā)地點(diǎn)、目的地點(diǎn)、打車信息以卡片的形式分享出來，參與拼車的人點(diǎn)擊卡片就能選擇參加拼車，并且能看到同車拼友是誰(shuí)，拼單的信息等等內(nèi)容。
交互流程如下：
可以看到，邏輯是非常簡(jiǎn)單的，我們只需要保證生成拼單、分享拼單、進(jìn)入拼單和退出拼單這四個(gè)功能就好。
需求和功能已經(jīng)確定好，首先按照小程序官網(wǎng)的介紹，注冊(cè)好小程序并拿到appId，接下來可以開始進(jìn)行后臺(tái)邏輯的開發(fā)。
二、后臺(tái)邏輯開發(fā)
由于時(shí)間倉(cāng)促，功能又簡(jiǎn)單，所以并沒有考慮任何高并發(fā)等復(fù)雜場(chǎng)景，僅僅考慮功能的實(shí)現(xiàn)。從需求的邏輯可以知道，其實(shí)后臺(tái)只需要維護(hù)兩個(gè)列表，分別存儲(chǔ)當(dāng)前所有拼車單以及當(dāng)前所有參與了拼車的用戶即可，其數(shù)據(jù)結(jié)構(gòu)如下：
- 當(dāng)前所有拼單列表billsList
- 當(dāng)前所有參與了拼車的用戶列表inBillUsers
當(dāng)用戶確定并分享了一個(gè)拼單之后，會(huì)直接新建一個(gè)拼單，同時(shí)把該用戶添加到當(dāng)前所有參與了拼車的用戶列表列表里面，并且添加到該拼單的成員列表當(dāng)中：
只要維護(hù)好這兩個(gè)列表，接下來就是具體的業(yè)務(wù)邏輯了。
為了快速開發(fā)，這里我使用了python3+flask框架的方案。不懂python的讀者看到這里也不用緊張，代碼非常簡(jiǎn)單且直白，看看也無(wú)妨。
首先新建一個(gè)BillController類：
class BillController:
billsList = []
inBillUsers = []
接下來會(huì)在這個(gè)類的內(nèi)部添加創(chuàng)建拼單、獲取拼單、參與拼單、退出拼單、判斷用戶是否在某一拼單中、圖片上傳的功能。
1、獲取拼單getBill()
該方法接收客戶端傳來的拼單ID，然后拿這個(gè)ID去檢索是否存在對(duì)應(yīng)的拼單。若存在則返回對(duì)應(yīng)的拼單，否則報(bào)錯(cuò)給客戶端。
def getBill(self, ctx):
ctxBody = ctx.form
billId = ctxBody['billId']
try:
return response([item for item in self.billsList if item['billId'] == billId][0])
except IndexError:
return response({
'errMsg': '拼單不存在！',
'billsList': self.billsList,
}, 1)
2、創(chuàng)建拼單createBill()
該方法會(huì)接收來自客戶端的用戶信息和拼單信息，分別添加到billsList和inBillUsers當(dāng)中。
def createBill(self, ctx):
ctxBody = ctx.form
user = {
'userId': ctxBody['userId'],
'billId': ctxBody['billId'],
'name': ctxBody['name'],
'avatar': ctxBody['avatar']
}
bill = {
'billId': ctxBody['billId'],
'from': ctxBody['from'],
'to': ctxBody['to'],
'time': ctxBody['time'],
'members': [user]
}
if ctxBody['userId'] in [item['userId'] for item in self.inBillUsers]:
return response({
'errMsg': '用戶已經(jīng)在拼單中！'
}, 1)
self.billsList.append(bill)
self.inBillUsers.append(user)
return response({
'billsList': self.billsList,
'inBillUsers': self.inBillUsers
})
創(chuàng)建完成后，會(huì)返回當(dāng)前的billsList和inBillUsers到客戶端。
3、參與拼單joinBill()
接收客戶端傳來的用戶信息和拼單ID，把用戶添加到拼單和inBillUsers列表中。
def joinBill(self, ctx):
ctxBody = ctx.form
billId = ctxBody['billId']
user = {
'userId': ctxBody['userId'],
'name': ctxBody['name'],
'avatar': ctxBody['avatar'],
'billId': ctxBody['billId']
}
if ctxBody['userId'] in [item['userId'] for item in self.inBillUsers]:
return response({
'errMsg': '用戶已經(jīng)在拼單中！'
}, 1)
theBill = [item for item in self.billsList if item['billId'] == billId]
if not theBill:
return response({
'errMsg': '拼單不存在'
}, 1)
theBill[0]['members'].append(user)
self.inBillUsers.append(user)
return response({
'billsList': self.billsList,
'inBillUsers': self.inBillUsers
})
4、退出拼單leaveBill()
接收客戶端傳來的用戶ID和拼單ID，然后刪除掉兩個(gè)列表里面的該用戶。
這個(gè)函數(shù)還有一個(gè)功能，如果判斷到這個(gè)拼單ID所對(duì)應(yīng)的拼單成員為空，會(huì)認(rèn)為該拼單已經(jīng)作廢，會(huì)直接刪除掉這個(gè)拼單以及所對(duì)應(yīng)的車輛信息圖片。
def leaveBill(self, ctx):
ctxBody = ctx.form
billId = ctxBody['billId']
userId = ctxBody['userId']
indexOfUser = [i for i, member in enumerate(self.inBillUsers) if member['userId'] == userId][0]
indexOfTheBill = [i for i, bill in enumerate(self.billsList) if bill['billId'] == billId][0]
indexOfUserInBill = [i for i, member in enumerate(self.billsList[indexOfTheBill]['members']) if member['userId'] == userId][0]
# 刪除拼單里面的該用戶
self.billsList[indexOfTheBill]['members'].pop(indexOfUserInBill)
# 刪除用戶列表里面的該用戶
self.inBillUsers.pop(indexOfUser)
# 如果拼單里面用戶為空，則直接刪除這筆拼單
if len(self.billsList[indexOfTheBill]['members']) == 0:
imgPath = './imgs/' + self.billsList[indexOfTheBill]['img'].split('/getImg')[1]
if os.path.exists(imgPath):
os.remove(imgPath)
self.billsList.pop(indexOfTheBill)
return response({
'billsList': self.billsList,
'inBillUsers': self.inBillUsers
})
5、判斷用戶是否在某一拼單中inBill()
接收客戶端傳來的用戶ID，接下來會(huì)根據(jù)這個(gè)用戶ID去inBillUsers里面去檢索該用戶所對(duì)應(yīng)的拼單，如果能檢索到，會(huì)返回其所在的拼單。
def inBill(self, ctx):
ctxBody = ctx.form
userId = ctxBody['userId']
if ctxBody['userId'] in [item['userId'] for item in self.inBillUsers]:
return response({
'inBill': [item for item in self.inBillUsers if ctxBody['userId'] == item['userId']][0],
'billsList': self.billsList,
'inBillUsers': self.inBillUsers
})
return response({
'inBill': False,
'billsList': self.billsList,
'inBillUsers': self.inBillUsers
})
6、圖片上傳uploadImg()
接收客戶端傳來的拼單ID和圖片資源，先存儲(chǔ)圖片，然后把該圖片的路徑寫入對(duì)應(yīng)拼單ID的拼單當(dāng)中。
def uploadImg(self, ctx):
billId = ctx.form['billId']
file = ctx.files['file']
filename = file.filename
file.save(os.path.join('./imgs', filename))
# 把圖片信息掛載到對(duì)應(yīng)的拼單
indexOfTheBill = [i for i, bill in enumerate(self.billsList) if bill['billId'] == billId][0]
self.billsList[indexOfTheBill]['img'
