4.1请求服务器数据API
4.1.1小程序/服务器架构
- 小程序和服务器通信的架构也可以称为C/S架构
- 请求过程:
1.小程序先向服务器发起网络请求
2.服务器收到请求后执行相关代码处理请求
3.处理完毕后服务器向小程序回复并返回数据
4.小程序相关接口将回调success()函数并对拿到的数据进行处理
注意事项
- 默认超时时间和最大超时时间都是60秒
- 所涉及的三种接口API: request、uploadFile、downloadFile最大并发限制是10个
- 小程序进入后台运行后，如果在5s内网络请求没有结束，会回调错误信息fail interrupted;在回到后台之前，网络请求接口调用都无法调用
4.1.2服务器域名配置
- 每一个小程序在与指定域名进行网络通信前都必须将该域名添加到管理员
- 后台自名单中配置方法:
1.登录mp.weixin.qq.com
2.点击左侧“开发”，在“开发设置”下的“服务器域名”中配置域名
注意事项
- 开发者可将填入自己或第三方的域名地址
- 域名只支持https(request、uploadFile、downloadFile)和wss(connectSocket)协议
- 域名不能使用IP地址或localhost
- 域名必须经过ICP备案
- 每类接口分别可以配置最多20个域名
- 域名每个月只可以申请修改5次
如果开发者暂时无法登记有效域名，可以在开发和测试环节暂时跳过域名校验
方法:
- 点击开发者工具中的“详情”按钮
- 点击“本地设置”设置选项卡
- 勾选“不校验合法域名”项
4.1.3临时服务器部署(建议学习)
软件
- phpStudy
- xampp
- wamp
- Node.js
访问方式：如: http: / / localhost/或http://127.0.0.1/
4.1.4发起请求
小程序使用wx.request(OBJECT)发起网络请求
wx.request参数说明如下表
| 属性 |
类型 |
默认值 |
必填 |
说明 |
| url |
string |
|
是 |
开发者服务器接口地址 |
| data |
string/object / ArrayBuffer |
|
否 |
请求的参数 |
| header |
Object |
|
否 |
设置请求的header，header中不能设置Referer。content-type默认为application / json |
| method |
string |
GET |
否 |
HTTP请求方法 |
| dataType |
string |
json |
否 |
返回的数据格式 |
| responseType |
string |
text |
否 |
响应的数据类型 |
| success |
|
function |
|
否 |
| fail |
function |
|
否 |
接口调用失败的回调函数 |
| complete |
function |
|
否 |
接口调用结束的回调函数（调用成功、失败都会执行) |
wx.request({
ur1:'https: / / www.test.com/ ',
data:{
x:'123',
y: '456'
},
success:function(res){
console.log(res.data)
}
})
4.2文件上传与下载
4.2.1 wx.uploadFile文件上传
- 文件上传功能需要配合开发者服务器使用
- 小程序使用wx.uploadFile(OBJECT)可以将本地资源上传到开发者服务器
- 上传时将从客户端发起一个HTTPS POST请求到服务器
OBJECT参数如下表
| 属性 |
类型 |
必填 |
说明 |
| url |
string |
是 |
开发者服务器地址 |
| filePath |
string |
是 |
要上传文件资源的路径 |
| name |
string |
是 |
文件对应的key，开发者在服务端可以通过这个key 获取文件的二进制内容 |
| header |
Object |
否 |
HTTP请求Header，Header中不能设置Referer |
| formData |
Object |
否 |
HTTP请求中其他额外的form data |
| success |
function |
否 |
接口调用成功的回调函数 |
| fail |
function |
否 |
接口调用失败的回调函数 |
| complete |
function |
否 |
接口调用结束的回调函数（调用成功、失败都会执行) |
<view class='page-body'>
<view class='demo-box'>
<view class='title'>文件上传演示</view>
<image wx:if='{
{src}}' src='{
{src}}' mode='widthFix'></image>
<button bindtap="chooseImage">选择文件</button>
<button type="primary" bindtap="uploadFile">开始上传</button>
</view>
</view>
Page({
data:{
src: "//上传图片的路径地址"
},
chooseImage: function(){
var that=this
wx.chooselmage({
count: 1,//默认9
sizeType:['original', 'compressed'],//可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'],//可以指定来源是相册还是相机，默认二者都有
success: function(res){
let src = res.tempFilePaths[0]
that.setData({
src: src
})
}
})
},
uploadFile: function(){
var that = this
let src = this.data.src
if (src==''){
wx.showToast({
title: '请先选择文件!',
icon:'none'
})
}
else {
//发起文件上传请求
var uploadTask=wx.uploadFile({
url:'http:/localhost/miniDemo/upload.php',//可以替换为并发者自己的服务器地址
filePath:src,
name: 'file',
success: fuinction(res){
console.log(res)
wx.showToast
