Home » Uncategorized » Python Flask 搭建微信小程序后台详解

Python Flask 搭建微信小程序后台详解

《轻松玩转微信小程序》

分三步讲解微信小程序与Python后台交互数据的全过程

  1. 小程序向后台服务器提交数据。微信小程序为数据提交开发了一个API,其实是一个js函数,详细介绍可参考官方API文档《微信小程序API文档》 。下面贴下我开发的项目的数据提交js代码。
    1. wx.request({
    2. url: ‘https://我的后台服务器网址/score’,
    3. data: {
    4. acc_nbr:JSON.stringify(acc_nbr),
    5. grade1: JSON.stringify(grade1), //将数据格式转为JSON
    6. grade2: JSON.stringify(grade2), //将数据格式转为JSON
    7. grade3: JSON.stringify(grade3), //将数据格式转为JSON
    8. txt1:JSON.stringify(txt1),
    9. txt2:JSON.stringify(txt2),
    10. txt3:JSON.stringify(txt3)
    11. },
    12. method: “POST”,
    13. header: {
    14. ‘content-type’: ‘application/x-www-form-urlencoded’,
    15. ‘chartset’: ‘utf-8’
    16. }

    代码参数讲解:
    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对应的服务器提交,下面讲解第二部分也是本文重点,即后台服务器接受到小程序的请求后,怎么处理并返回信息

  2. 后台服务器处理请求并返回信息。后台服务器处理请求是使用的Python-flask的轻量化web框架,对于想学习flask的同学可以移步flask的快速入门课程 。下面贴下我开发的项目的后台处理部分的Python-flask代码。
    1. # coding=utf8
    2. import sys
    3. defaultencoding = ‘utf-8’
    4. if sys.getdefaultencoding() != defaultencoding:
    5. reload(sys)
    6. sys.setdefaultencoding(defaultencoding)
    7. from flask import Flask,render_template,request,json
    8. from DB import *
    9. app = Flask(__name__)
    10. @app.route(‘/’)
    11. defhello_world():
    12. return render_template(‘index.html’)
    13. @app.route(‘/score’,methods=[‘POST’] )
    14. defscore():
    15. in_acc_nbr = str(json.loads(request.values.get(“acc_nbr”)))
    16. input_grade1=int(json.loads(request.values.get(“grade1”)))
    17. input_grade2 = int(json.loads(request.values.get(“grade2”)))
    18. input_grade3 = int(json.loads(request.values.get(“grade3”)))
    19. input_txt1=str(json.loads(request.values.get(“txt1”)))
    20. input_txt2=str(json.loads(request.values.get(“txt2”)))
    21. input_txt3=str(json.loads(request.values.get(“txt3”)))
    22. score_db=db(‘mysql数据库ip地址’,3306,‘数据库用户名’,‘数据库密码’,‘数据库’,‘utf8’)
    23. conn=score_db.connect_db()
    24. cursor=conn.cursor()
    25. sql=”’ insert into grade (acc_nbr,grade1,grade2,grade3,txt1,txt2,txt3,insert_time) values (%s,%s,%s,%s,’%s’,’%s’,’%s’,now())
    26. ”’%(in_acc_nbr,input_grade1,input_grade2,input_grade3,input_txt1,input_txt2,input_txt3)
    27. cursor.execute(sql)
    28. res=cursor.rowcount
    29. conn.commit()
    30. cursor.close()
    31. conn.close()
    32. if res==1:
    33. # print res
    34. res=‘数据提交成功’
    35. return json.dumps(res.decode(‘utf8’))
    36. else:
    37. print res
    38. res=‘数据提交失败’
    39. return json.dumps(res.decode(‘utf8’))
    40. if __name__ == ‘__main__’:
    41. 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格式的数据。
    后台程序返回了数据后,第三步就是小程序该怎么接收返回数据并进行相关业务逻辑处理。

  3. 小程序接收返回数据。Python-Flask向小程序返回了JSON格式的数据后,小程序的wx.requset()函数里的SUCESS回调函数用来处理返回数据。 下面贴下项目中wx.requset()函数中sucess回调函数。
    1. wx.request({
    2. url: ‘https://我的后台服务器网址/score’,
    3. data: {
    4. acc_nbr:JSON.stringify(acc_nbr),
    5. grade1: JSON.stringify(grade1), //将数据格式转为JSON
    6. grade2: JSON.stringify(grade2), //将数据格式转为JSON
    7. grade3: JSON.stringify(grade3), //将数据格式转为JSON
    8. txt1:JSON.stringify(txt1),
    9. txt2:JSON.stringify(txt2),
    10. txt3:JSON.stringify(txt3)
    11. },
    12. method: “POST”,
    13. header: {
    14. ‘content-type’: ‘application/x-www-form-urlencoded’,
    15. ‘chartset’: ‘utf-8’
    16. },
    17. success: function (res) {
    18. console.log(res.data);
    19. wx.showToast({
    20. title: res.data,//这里打印出登录成功
    21. icon: ‘success’,
    22. duration: 1000
    23. });
    24. var acc_nbr = that.data.phoneNum;
    25. wx.redirectTo({
    26. url: ‘../graderesult/graderesult?phoneNum=’ + acc_nbr
    27. })
    28. }
    29. })

    代码详解:单独拿出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项目,供大家品鉴^_^~

    1. <script type=“text/javascript”>
    2. $(function () {
    3. $(‘.btn’).click(function () {
    4. var $result = $(‘#result’);
    5. var $result1=$(‘#result1’);
    6. var $acc_nbr = $(‘input[name=”acc_nbr”] ’).val();
    7. $.ajax({
    8. url: ‘/query’,
    9. data: $(‘form’).serialize(),
    10. type: ‘POST’,
    11. dataType: ‘json’,
    12. success: function (data) {
    13. if (data.length !=0){
    14. console.log(data.length);
    15. var str = “”;
    16. var str1=“<input value='”+data[0][8]+“‘class=’form-control’ type=’hidden’ name=’acct_id’>” +
    17. “<input value='”+Math.ceil(data[0][7]*1.5)+“‘class=\”form-control\” type=\”text\” name=’credit_amount’ readonly >” +
    18. ” <button type=\”submit\” class=\”btn btn-primary\”>确认</button>”;
    19. for (s in data) {
    20. if(data[s] 4] == ‘后付费’) {
    21. str = str + “<tr class=\”danger\”>”
    22. + “<td>”+ data[s] 0] + “</td>”
    23. + “<td>”+ data[s] 1] + “</td>”
    24. + “<td>”+ data[s] 2] + “</td>”
    25. + “<td>”+ data[s] 3] + “</td>”
    26. + “<td>”+ data[s] 4] + “</td>”
    27. + “<td>”+ data[s] 5] + “</td>”
    28. + “<td>”+ data[s] 6] + “</td>”
    29. + “</tr>”
    30. }
    31. else {
    32. str = str + “<tr class=\”success\”>”
    33. + “<td>”+ data[s] 0] + “</td>”
    34. + “<td>”+ data[s] 1] + “</td>”
    35. + “<td>”+ data[s] 2] + “</td>”
    36. + “<td>”+ data[s] 3] + “</td>”
    37. + “<td>”+ data[s] 4] + “</td>”
    38. + “<td>”+ data[s] 5] + “</td>”
    39. + “<td>”+ data[s] 6] + “</td>”
    40. + “</tr>”
    41. }
    42. };
    43. $result1.html(str1);
    44. $result.html(str);
    45. }
    46. else {
    47. alert(‘此号码不在派单内!!’);
    48. }
    49. }
    50. }
    51. )
    52. });
    53. });
    54. </script>