前言
写在前面
之前写了一篇《微信小程序实现各种特效实例》,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题。总的来说,收获了不少吧!
现在项目已经完成,还是要陆陆续续总结一下的,总结的过程也是对知识梳理和清晰的过程!
这次主要聊一下小程序前后端接口对接的一些事,
对于客户端与服务端接口的对接,微信小程序提供了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});
}
});
在控制台中也得到了我想要的接口中的数据:
但期间也遇到了几个问题,总结下来;
小程序开发的过程中,如果你涉及到文件的上传,就需要使用微信提供的API去上传文件:
1)网络请求与域名的合法性
微信小程序包括四种类型的网络请求:
-
普通HTTPS请求(wx.request)
-
上传文件(wx.uploadFile)
-
下载文件(wx.downloadFile)
-
WebSocket通信(wx.connectSocket)
关于“URL
域名不合法,请在后台配置后重试”的错误
小程序只允许与合法配置的域名进行数据交互
进入微信公共平台=>设置=>开发设置:设置需要交互的域名
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]
其实wx.uploadFile的操作是你把要请求的数据以及要请求的服务器URL传递给微信服务器,微信服务器再拿着这些数据进行三方服务器请求。具体可参见下图:(根据自己的理解画的,如果不对,欢迎指正)
所以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.网络请求