小程序前端与后端的数据交互方式有哪些类型，前后端数据交互

一、本地配置

在生产环境中的小程序中对外请求只能通过https，且需要在小程序后台配置了该请求的域名。在开发环境(本地)，我们可以通过配置小程序，取消该限制。

点击开发工具“详情”，“本地配置” ，将“不校验合法域名、web-view(业务域名)，TlS版本以及HTTPS证书”勾选即可请求我们的服务(如下图)。需要注意的是在生产环境中，必须按照微信官方的要求配置https.

二、通过前端请求后端拉取数据并展示

我们日常生活中见到的网页数据都不会硬编码在前端代码上，需要实时拉取数据库中的数据。操作数据库是需要密码的，将密码放在前端是一个十分危险的动作。故前端请求后端，后端拥有数据库的操作权限，将数据从数据库获取，返回到前端(当然后端不仅仅获取数据库数据，还有业务逻辑的处理)。本处我们就是在小程序中实现这个过程。

1.编写微信小程序的前端代码（index.wxml）

  <view class="test_requests">
      <view bindtap="click_fn">
          <button> 请求后端 </button>
          <text>{{title}}</text>
          <text>{{time}}</text>
      </view>
  </view>

2， 编写动作函数（index.js）

Page({
  // 定义点击事件
  click_fn: function (params) {
    var self  =  this
    wx.request({
      url: "http://192.168.5.59:80/forTest",
      method: 'GET',
      header: {
        "content-type": "json"
      },
      success: function (res) {
        console.log(res.data)
        console.log(res.data.d)
        self.setData({
          title: res.data.d,
          time:res.data.f
        })
      },
      fail: function (error) {
        // fail
        console.log(error)
      }
    })
  }
})

我们自定义了一个函数叫click_fn 。 看到html代码，将其通过关键字bindtap绑定到了这个button 块上。

当我们点击这个块时，触发click_fn 函数，向后端服务“
http://192.168.5.59:7998/lz/api/v1/alive”发送了一个GET 请求。同时将后端返回的数据 通过setDate( ) 更新到我们的变量上，然后通过前端页面展示。这样我们便完成了一次前端请求后端，获取到数据后重新展示到前端页面。

这里有点小坑，按照上文的经验。使用 this.setData() 方法可以将数据进行更新到我们的变量中。但是在这个我们自定义的函数click_fn 里是不能直接使用 this。必须要声明一个变量来承接这个 this（这里有点想不明白，清楚的朋友可以讨论下）。

最后附上python编写的后端接口代码

from flask import jsonify
from flask_restful import Resource
from utils.response_data import success


class ForTest(Resource):
    def get(self):
        data = success(title='这是一个标题', time='假装这是时间')
        return jsonify(data)