前言：
近期需要开发一个打分的微信小程序，涉及到与后台服务器的数据交互，因为业务逻辑相对简单，故选择Python的轻量化web框架Flask来搭建后台程序。因为是初次接触小程序，经过一番摸索和尝试，个人觉得的微信小程序与后台的交互有点像ajax，所以有ajax开发经验的同学开发小程序应该很容易上手，因为本文着重讲解后台程序的搭建，所以，微信小程序的前端开发将一笔带过
分三步讲解微信小程序与Python后台交互数据的全过程
- 小程序向后台服务器提交数据。微信小程序为数据提交开发了一个API，其实是一个js函数，详细介绍可参考官方API文档《微信小程序API文档》。下面贴下我开发的项目的数据提交js代码。
wx.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回调函数。
wx.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'
},
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
})
}
})代码详解：单独拿出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,就是第二步后台返回的数据。可以用console.log(res.data)看下返回的数据是否正确。
我的项目在拿到后台返回的数据，进行了弹窗展示返回数据wx.showToast和页面的跳转wx.redirectTo，大家可以根据自己的业务需求在sucess回调函数编写自己的业务逻辑。
结尾：
至此，微信小程序和Python后台交互数据的步骤已经讲完。正如文章开头所讲，学过ajax的同学读完会发现微信小程序与后台交互数据非常像ajax,所以，文章结尾贴出一个彩蛋，即神奇的ajax代码，出自我的另一个web项目，供大家品鉴^_^~
<script type="text/javascript">
$(function () {
$('.btn').click(function () {
var $result = $('#result');
var $result1=$('#result1');
var $acc_nbr = $('input[name="acc_nbr"]').val();
$.ajax({
url: '/query',
data: $('form').serialize(),
type: 'POST',
dataType: 'json',
success: function (data) {
if (data.length !=0){
console.log(data.length);
var str = "";
var str1="<input value='"+data[0][8]+"'class='form-control' type='hidden' name='acct_id'>" +
"<input value='"+Math.ceil(data[0][7]*1.5)+"'class=\"form-control\" type=\"text\" name='credit_amount' readonly >" +
" <button type=\"submit\" class=\"btn btn-primary\">确认</button>";
for (s in data) {
if (data[s][4] == '后付费') {
str = str + "<tr class=\"danger\">"
+ "<td>" + data[s][0] + "</td>"
+ "<td>" + data[s][1] + "</td>"
+ "<td>" + data[s][2] + "</td>"
+ "<td>" + data[s][3] + "</td>"
+ "<td>" + data[s][4] + "</td>"
+ "<td>" + data[s][5] + "</td>"
+ "<td>" + data[s][6] + "</td>"
+ "</tr>"
}
else {
str = str + "<tr class=\"success\">"
+ "<td>" + data[s][0] + "</td>"
+ "<td>" + data[s][1] + "</td>"
+ "<td>" + data[s][2] + "</td>"
+ "<td>" + data[s][3] + "</td>"
+ "<td>" + data[s][4] + "</td>"
+ "<td>" + data[s][5] + "</td>"
+ "<td>" + data[s][6] + "</td>"
+ "</tr>"
}
};
$result1.html(str1);
$result.html(str);
}
else {
alert('此号码不在派单内！！');
}
}
}
)
});
});
</script>
