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

看见就非常 2020-04-29

展开全文

前言：

近期需要开发一个打分的微信小程序，涉及到与后台服务器的数据交互，因为业务逻辑相对简单，故选择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>