前言

写在前面

之前写了一篇《微信小程序实现各种特效实例》，上次的小程序的项目我负责大部分前端后台接口的对接，然后学长帮我改了一些问题。总的来说，收获了不少吧！

现在项目已经完成，还是要陆陆续续总结一下的，总结的过程也是对知识梳理和清晰的过程！

这次主要聊一下小程序前后端接口对接的一些事，

 

对于客户端与服务端接口的对接，微信小程序提供了wx.request()的API接口，完美的实现前端后台的对接：

一个简单的栗子：

 wx.request({
     url: API_URL + '/api/category/categoryList',
     data: {
           applet_id: app.globalData.applet_id
      },
      method: 'POST',
      success: function (res) {
      wx.hideLoading();
      console.log(res.data.data, 'category data acquisition success');

            that.setData({category: res.data.data});
       }
  });

 在控制台中也得到了我想要的接口中的数据：

 银河国际平台官方网站 1

但期间也遇到了几个问题，总结下来；

小程序开发的过程中，如果你涉及到文件的上传，就需要使用微信提供的API去上传文件：

1）网络请求与域名的合法性

微信小程序包括四种类型的网络请求：

  • 普通HTTPS请求(wx.request)

  • 上传文件(wx.uploadFile)

  • 下载文件(wx.downloadFile)

  • WebSocket通信(wx.connectSocket)

关于“URL
域名不合法，请在后台配置后重试”的错误

银河国际平台官方网站 2

小程序只允许与合法配置的域名进行数据交互

进入微信公共平台=>设置=>开发设置：设置需要交互的域名

银河国际平台官方网站 3

wx.uploadFile()

2）对于接口调用http和https的问题

对于这一个问题，在之前来说，微信公共平台支持使用http测试项目，但是正式发布需要使用https的域名，

但是前几天看到了微信公众平台发的一则公告：

应该是要封杀http方式调用了，公告链接：为保证数据传输安全，提高业务安全性，公众平台将不再支持HTTP方式调用（时间2017年9月21日）

官方文档的解释这里就不多介绍了，主要看一下这个方法具体如何使用以及为什么这样使用。

3）关于method以及data数据

微信小程序多地方都严格区分大小写，所以要注意method的value需要为大写，request的默认的超时时间都是60s；

对于data数据，上次我们从接口中拿到的数据是json格式的，最终发送给服务器的数据是String类型，如果传入的
data 不是 String 类型，会被转换成 String 。

文档中提供的转换规则如下：

  • 对于 header['content-type'] 为 application/json 的数据，会对数据进行
    JSON 序列化

  • 银河国际平台官方网站，对于 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成
    query string；

（encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)…）

这个工作在我们设置header头为application/x-www-form-urlencoded后，在后面为我们进行。

正文

4）关于GET和POST请求

根据HTTP的规范，get是用于信息获取，post表示可能修改服务器的资源的请求

对于小程序post请求：’application/json’用在get请求中没有问题，但是用在POST请求中不好使了，content-type 默认为
‘application/json’; 

所以使用post请求时，将content-type设置为 application/x-www-form-urlencoded 

我们可以先看一下该API的参数说明：

写在后面

总结了以上四个问题，应该是比较常见也是容易遇到的，欢迎补充和指正，另外文档中api模块还有一些需要注意的问题，

项目我们在github已同步：StackOverflowChen；欢迎来访哟；

 

参考资料

[1] 

[2] 

 

银河国际平台官方网站 4

其实wx.uploadFile的操作是你把要请求的数据以及要请求的服务器URL传递给微信服务器，微信服务器再拿着这些数据进行三方服务器请求。具体可参见下图：(根据自己的理解画的，如果不对，欢迎指正)

银河国际平台官方网站 5

所以url也就是我们平时自己去请求我们自己的服务器接口的地址，如果你的服务器需要校验session或者token，你可以在formData中添加，例如把需要的uid放到里面：

 var formData = {
        uid: app.globalData.uid,
        sessionKey: wx.getStorageSync("SESSIONKEY")
      };

 

function upLoadFile(url, filePath, name, formData, success, fail) {

  wx.uploadFile({
    url: url,
    filePath: filePath,
    name: name,
    header: {
      'content-type': 'multipart/form-data'
    },
    formData:formData,    //请求额外的form data
    success:function(res) {
      console.log(res);
      if(res.statusCode ==200){
       typeof success == "function" && success(res.data);
      }else{
      typeof fail == "function" && fail(res.data);
      }
    },
    fail: function (res) {
      console.log(res);
      typeof fail == "function" && fail(res.data);
    }
  })
}

我这里直接对上传文件进行了封装，微信服务器通过我们给他的数据向我们的服务器发送数据请求，请求成功后，微信服务器会对我们自己的服务器返回的信息进行包装，放到res.data里面，这样我们就可以直接从res.data中获取到我们的服务器给我们反馈的信息了。 

 

为什么要这么做？而不是直接由我们向自己的服务器发送请求呢？

 常规来说，我们直接调用我们自己服务器的接口，然后我们自己的服务器返回数据小程序端即可。但是从uploadFile操作来说，其实是微信服务器把自己当做了中转站，所有的发送都要通过微信中转进行操作。个人觉得这样做的原因如下：

1.微信服务器有自己的一套临时图片链接，对于我们自己的服务器而言无法识别。

2.鉴于安全考虑，微信服务器会对图片进行留存，保证内容在微信平台上的合法性。

 

如果有其他的原因，也可以留言！我也在微信小程序开发中心做了提问，最新信息可以参见这里。

 

 

参考文档

1.网络请求