基于flask框架的实现python作为微信小程序后端的方法（个人版）

Flask基础语法

引入Flask类
from flask import Flask
创建一个app，也就是Flask类的一个对象
app = Flask(__name__)
接下来写每个路径对应的函数
如

@app.route('/')
def test()# 这里函数可以任意命名，这个函数会在访问括号里路径的时候被调用
	return "helloworld"

这三行代码可以实现当访问 http://127.0.0.1:5000 （也就是本机地址的5000端口）时，显示helloworld

实现微信小程序获取后端数据——wx.request方法

这里是微信官方对request方法给的样例

wx.request({
  url: 'example.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

我们只需要在这个框架上修修补补就可以了

如果想要获取后端的数据，我们只需要写一个函数，里面包含我们喜欢的wx.request方法，url里写我们自己的地址（如example.php），接着调用这个函数，就可以获取到flask里对应地址映射的函数的返回值，如果按上面helloworld的例子的话，就是helloworld

一个实操案例

我们随便找一个wxml文件，写下这样一段代码

<view>
<button bind:tap="get_data">测试按钮</button>
</view>

这段代码执行的结果，是渲染一个按钮，效果如下

点击这个按钮，会访问bind:tap的函数，也就是getdata，它的名字叫事件处理函数

下面写getdata函数

get_data()
  {
  wx.request({
    url: 'http://127.0.0.1:5000/test', 
    success (res) {
      console.log('请求成功', res.data)
    },
    fail(res)
    {
      console.log('请求失败', res)
    }
  })
  },

这里success那块的意思是如果请求成功，则输出‘请求成功’，然后输出获取到的数据，
fail的意思是如果请求失败，则输出‘请求失败’，然后输出res对象

接下来写后端的对应内容

@app.route('/test')
def index():
    return "helloworld"

这样简单写个函数就行，最终的效果是点击测试按钮，控制台输出‘请求成功 helloworld’

实现后端获取微信小程序表单的数据——flask里的request对象

因为要键入数据，前端要换个方式写了,就写一个最简单的表单吧

<form bindsubmit="formA">
	<input type="text" placeholder="请输入内容" name="atest"/>
	<button type="primary" formType="submit">确定</button>
</form>

对应的结果是这么个输入框和按钮，name的作用是把输入的内容在事件对象里存储为一个名为atest的数据

不过这个按钮有玄机，按下它就会执行formA函数

formA函数这样写

formA(e)
  {
    console.log(e)
    wx.request({

      url: 'http://127.0.0.1:5000/form', 

      method:'POST',

      header:
      {
        'content-type': 'application/x-www-form-urlencoded'
      },

      data:
      {
        "atest": e.detail.value.atest,
      },
      success (res) {
        console.log('请求成功', res.data)
      },
      fail(res)
      {
        console.log('请求失败', res)
      }
    })
  }

这里的e是一个对象，它叫事件对象，具体我也不懂，反正大概意思就是把这个form事件的各类信息都存下来了

注意，这里的header里面的content-type要写成'application/x-www-form-urlencoded'，这样才能传输文本，不然传输的是一个json对象

因为是向后端传东西，所以method要用POST

通过request方法获取前端数据
request是一个对象，首先要从引入

from flask import request

接下来用flask.form.get()方法
括号里面写上要获取的数据名字，比如这里就写flask.form.get('atest')

完整代码如下

@app.route('/form', methods = ['POST', 'GET'])
def getform():
    str1 = request.form.get("atest")
    print(str1)
    return "form_gotten"

str1里存储的就是从表单里获取的字符数据

实现小程序前后端传输音频——base64编码

如何使用小程序录音

先在wxml里写两个按钮，用来开始录音和停止录音

<view class="container">
	<button bind:tap="start">开始录音</button>
	<button bind:tap="stop">结束录音</button>
</view>

这里的start和stop函数分别用于开始和结束录音

代码部分首先要获取一下recorderManager，在js文件里这么写

const recorderManager = wx.getRecorderManager();

接下来对这个recorderManager进行监听，分别写一下开始录音，停止录音，录音错误的对应情况
录音开始

recorderManager.onStart(() => {

  console.log('开始录音');
  
});

录音结束

recorderManager.onStop((res) => {

  console.log('结束录音', res.tempFilePath);
  
  let path = res.tempFilePath;
  //获取录音文件的临时路径
  
});

录音错误

recorderManager.onError((res) => {

  console.log('录音错误', res.errMsg);
  
});

编写用户开始录音和结束录音的程序
（写在page对象里）

start()
{
  wx.getSetting({
    success(res) {
      if (!res.authSetting['scope.record']) {
        wx.authorize({
          scope: 'scope.record',
		  
          success() {
            // 用户已经授权，可以开始录制
            startRec()
          },
		  
          fail() {
            // 用户拒绝授权，无法录制
            wx.showToast({
              title: '授权失败',
              icon: 'none',
            });
          },
        });
      } else {
        // 用户已经授权，可以开始录制
        startRec()
      }
    },
  });
},


stop() {
  recorderManager.stop();
}

现在startRec这个函数，也就是让recorderManager开始录音并设置初始值的函数还没有写
先定义一下两个常量：

const sampleRate = 44100  // 采样率
const encodeBitRate = 64000  // 编码率

(这一段写在page对象外面，所以要加function)

function startRec()
{
  recorderManager.start({
  
    duration: 60000,
    format: 'wav',
    sampleRate: sampleRate,
    encodeBitRate: encodeBitRate
	
  })
}

这样，录音的部分就算完成了

如何把录好的音频传输到后端

把音频传输到后端的方法有两种

一种是直接通过wx.uploadFile()方法，将文件上传至服务器，再使用request.file.get()方法进行接收
然而这种方法需要ssl证书，价格较为昂贵，因此我并不是它的目标受众
另一种方法就是先把音频文件转为base64编码，也就是变成了一段字符串的形式，再通过form表单的方式进行传输，后端接收到编码后再进行解码，变回原音频

这里使用第二种方法

我们要对前面写的结束录音后执行的函数进行修改

首先进行转码，使用wx.getFileSystemManager()对象的readFile()方法

recorderManager.onStart(() => {

  console.log('开始录音');

  const fs = wx.getFileSystemManager();
  var file;  // 声明一个全局变量，用于存储文件的base64编码

  fs.readFile({
    filePath: path,
    encoding: 'base64',

    success(res){
      console.log('转码成功')
      file = res.data  // 将生成的编码赋值给file变量
    }
    
    fail(res){
      console.log('转码失败', res.errMsg)
    }
	
  })
});

转码成功后要发送给后端，所以再修改，加入request请求

recorderManager.onStop((res) => {

  console.log('结束录音', res.tempFilePath);
  
  let path = res.tempFilePath
  const fs = wx.getFileSystemManager()

  fs.readFile({
    filePath: path,
    encoding: 'base64',

    success(res){
      console.log('转码成功')
      file = res.data

      wx.request({
	  
        url: 'http://127.0.0.1:5000/audio',
		
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
		
        method: 'POST',  // 这里必须是post，不然后端无法接收
		
        data:{
          "file": file
        },
		
        success (res) {
          console.log('请求成功', res.data)
        },
		
        fail(res)
        {
          console.log('请求失败', res)
        }
      })  
    },

    fail(res){
      console.log('转码失败', res.errMsg)
    }
  })
});

接下来该写后端了

这时需要再引入一个base64库

import base64

# 传输音频的路由
@app.route('/audio', methods = ['POST', 'GET'])
def getAudio():
    audio_file = request.form.get('file')  # 接收base64编码的音频
	
    binary_audio = base64.b64decode(audio_file)  # 把base64编码变成2进制编码
	
    wav_result = open('audio.wav', 'wb')  # 创建一个空文件，从头开始写入
	
    wav_result.write(binary_audio)  # 把二进制代码写入这个wav文件
	
    return "audio_gotten"