近期需要開發一個打分的微信小程序,涉及到與后臺服務器的數據交互,因為業務邏輯相對簡單,故選擇Python的輕量化web框架Flask來搭建后臺程序。因為是初次接觸小程序,經過一番摸索和嘗試,個人覺得的微信小程序與后臺的交互有點像ajax,所以有ajax開發經驗的同學開發小程序應該很容易上手,因為本文著重講解后臺程序的搭建,所以,微信小程序的前端開發將一筆帶過,有興趣學習小程序前端語言的同學可移步網易云課堂的一套快速入門課程《輕松玩轉微信小程序》。
分三步講解微信小程序與Python后臺交互數據的全過程
小程序向后臺服務器提交數據。微信小程序為數據提交開發了一個API,其實是一個js函數,詳細介紹可參考官方API文檔《微信小程序API文檔》。下面貼下我開發的項目的數據提交js代碼。
.request({
url: 'https://我的后臺服務器網址/score',
data: {
acc_nbr:JSON.stringify(acc_nbr),
grade1: JSON.stringify(grade1), //將數據格式轉為JSON
grade2: JSON.stringify(grade2), //將數據格式轉為JSON
grade3: JSON.stringify(grade3), //將數據格式轉為JSON
txt1:JSON.stringify(txt1),
txt2:JSON.stringify(txt2),
txt3:JSON.stringify(txt3)
},
method: "POST",
header: {
'content-type': 'application/x-www-form-urlencoded',
'chartset': 'utf-8'
}
代碼參數講解:
url: 'https://我的后臺服務器地址/score',url參數是數據提交的地址,有點像html里表單提交里的action,微信小程序對后臺接入的服務器要求很高,需要具備已備案的能夠解析的https域名,我的服務器使用的阿里云,網站架構使用的是
Nginx+supervisor+gunicorn+flask經典Python_flask 部署架構,此架構的部署學習可移步我的云筆記flask部署。
data: data參數是要提交的數據,數據需要轉換成json格式,使用JSON的stringify函數,可以看到data的數據類型是JavaScript的對象類型,也就是俗稱的鍵值對。
methon:是數據提交的請求方式,默認是post請求方式,后臺在處理請求時會判斷請求方式。
header:是數據的頭文件,需要設置字符類型為utf-8,即'charset':'utf-8',防止傳輸中文數據時出現亂碼。
wx.requset()函數被調用后,會向后臺服務器發起數據的post請求,此時小程序會把data里的數據以post形式向url對應的服務器提交,下面講解第二部分也是本文重點,即后臺服務器接受到小程序的請求后,怎么處理并返回信息
后臺服務器處理請求并返回信息。后臺服務器處理請求是使用的Python-flask的輕量化web框架,對于想學習flask的同學可以移步flask的快速入門課程。下面貼下我開發的項目的后臺處理部分的Python-flask代碼。
# coding=utf8
import sys
defaultencoding = 'utf-8'
if sys.getdefaultencoding() != defaultencoding:
reload(sys)
sys.setdefaultencoding(defaultencoding)
from flask import Flask,render_template,request,json
from DB import *
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('index.html')
@app.route('/score',methods=['POST'])
def score():
in_acc_nbr = str(json.loads(request.values.get("acc_nbr")))
input_grade1=int(json.loads(request.values.get("grade1")))
input_grade2 = int(json.loads(request.values.get("grade2")))
input_grade3 = int(json.loads(request.values.get("grade3")))
input_txt1=str(json.loads(request.values.get("txt1")))
input_txt2=str(json.loads(request.values.get("txt2")))
input_txt3=str(json.loads(request.values.get("txt3")))
score_db=db('mysql數據庫ip地址',3306,'數據庫用戶名','數據庫密碼','數據庫','utf8')
conn=score_db.connect_db()
cursor=conn.cursor()
sql=''' insert into grade (acc_nbr,grade1,grade2,grade3,txt1,txt2,txt3,insert_time) values (%s,%s,%s,%s,'%s','%s','%s',now())
'''%(in_acc_nbr,input_grade1,input_grade2,input_grade3,input_txt1,input_txt2,input_txt3)
cursor.execute(sql)
res=cursor.rowcount
conn.commit()
cursor.close()
conn.close()
if res==1:
# print res
res='數據提交成功'
return json.dumps(res.decode('utf8'))
else:
print res
res='數據提交失敗'
return json.dumps(res.decode('utf8'))
if __name__ == '__main__':
app.run(debug=True)
代碼詳解:
可以看到這是一段很基礎的flask的代碼。大家應該看到了 @app.route('/score',methods=['POST'])這條語句,這就是flask的路由函數,沒錯,/score 正是小程序提交請求是url里的score路徑,所以這個路由對應的函數正是處理請求的后臺程序。methods=['POST'] 說明這個路由只處理POST請求。
in_acc_nbr = str(json.loads(request.values.get("acc_nbr"))),這段語句是獲取請求的數據,首先request.values.get()函數是獲得request請求里最初的數據。"acc_nbr"是小程序data對象里的鍵,因為data里的數據是json格式,所以request獲取的數據也是json格式,使用flask自帶的json.loads 函數獲取字符數據。至此,我們已經拿到了小程序提交的數據了。
將json數據轉換成字符數據后,就可以進行相關業務邏輯的處理,這里我的代碼是將相關數據提交到mysql數據庫里。
業務邏輯處理完畢后,需要向小程序返回消息和數據,return json.dumps(res.decode('utf8')) 這段語句是本文的核心。因為小程序接受數據需要json格式,所以我們的返回數據也需要轉換成json格式,使用flask自帶的json.dumps函數即可將字符類型的數據轉換成json格式的數據。
后臺程序返回了數據后,第三步就是小程序該怎么接收返回數據并進行相關業務邏輯處理。
小程序接收返回數據。Python-Flask向小程序返回了JSON格式的數據后,小程序的wx.requset()函數里的SUCESS回調函數用來處理返回數據。下面貼下項目中wx.requset()函數中sucess回調函數。
success: function (res) {
console.log(res.data);
wx.showToast({
title: res.data,//這里打印出登錄成功
icon: 'success',
duration: 1000
});
var acc_nbr = that.data.phoneNum;
wx.redirectTo({
url: '../graderesult/graderesult?phoneNum=' + acc_nbr
})
}
res入參存儲的數據,即res.data,就是第二步后臺返回的數據??梢杂胏onsole.log(res.data)看下返回的數據是否正確。
我的項目在拿到后臺返回的數據,進行了彈窗展示返回數據wx.showToast和頁面的跳轉wx.redirectTo,大家可以根據自己的業務需求在sucess回調函數編寫自己的業務邏輯。
結尾:
至此,微信小程序和Python后臺交互數據的步驟已經講完。正如文章開頭所講,學過ajax的同學讀完會發現微信小程序與后臺交互數據非常像ajax,所以,文章結尾貼出一個彩蛋,即神奇的ajax代碼,出自我的另一個web項目,供大家品鑒^_^~