微信小程序API_请求服务器数据API_文件上传与下载API

>请求服务器数据API

>小程序/服务器架构

>小程序和服务器通信的架构也可以称为C/S 架构

>请求过程：

>小程序先向服务器发起网络请求

>服务器收到请求后执行相关代码处理请求

>处理完毕后服务器向小程序回复并返回数据

>小程序相关接口将回调success()函数并对拿到的数据进行处理

注意事项：

>默认超时时间和最大超时时间都是60秒

>所涉及的三种接口API: request、uploadFile、downloadFile最大并发限制是10个

>小程序进入后台运行后，如果在5s内网络请求没有结束，会回调错误信息fail interrupted；在回到后台之前，网络请求接口调用都无法调用

>服务器域名配置

>每一个小程序在与指定域名进行网络通信前都必须将该域名添加到管理员后台白名单中

>配置方法：登录，点击左侧“开发”，在“开发设置”下的“服务器域名”中配置域名

>域名配置注意事项：

>开发者可将填入自己或第三方的域名地址

>域名只支持https(request、uploadFile、 downloadFile)和wss(connectSocket)协议

>域名不能使用IP地址或localhost

>域名必须经过ICP备案

>每类接口分别可以配置最多20个域名

>域名每个月只可以申请修改5次

>跳过域名校验

>如果开发者暂时无法登记有效域名，可以在开发和测试环节暂时跳过域名校验

>方法：点击开发者工具中的“详情”按钮，点击“本地设置”设置选项卡，勾选“不校验合法域名”项

>临时服务器部署

>通过以下软件实现：

>phpStudy

>xampp

>wamp

>访问方式（与前端开发的Tomcat服务器类似）

>如：http://localhost/ 或 http://127.0.0.1/

>发起请求

>小程序使用(OBJECT)发起网络请求

参数说明
属性	类型	默认值	必填	说明
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({



    url:'/',



    data:{



        x:'123',



        y:'456'




    },



    success:function(res){



        console.log()



    }



})

>文件上传与下载API

>文件传输主要包含文件的上传和下载功能

>其中：

>文件上传功能需要配合开发者服务器使用

>文件下载功能使用开发者服务器或第三方服务器均可

>文件上传

>小程序使用(OBJECT)可以将本地资源上传到开发者服务器

>上传时将从客户端发起一个HTTPS POST请求到服务器

OBJECT参数
属性	类型	必填	说明
url	string	是	开发者服务器接口地址
filePath	string	是	要上传文件资源的路径
name	string	是	文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
header	Object	否	HTTP 请求 Header，Header 中不能设置 Referer
fromData	Object	否	HTTP 请求中其他额外的 form data
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：





//.wxml



 




<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>




 




//.js



 




Page({



    data: {



        src: '' //上传图片的路径地址



    },



    chooseImage: function() {



        var that = this



        ({



            count: 1, // 默认9




            sizeType: ['original', 'compressed'], 




//可以指定是原图还是压缩图，默认二者都有



            sourceType: ['album', 'camera'], 




// 可以指定来源是相册还是相机，默认二者都有



            success: function(res) {



                let src = [0]



                ({



                    src: src



                })



            }



        })



    },



    uploadFile: function() {



        var that = this



        let src = this.data.src



        if (src == '') {



            ({



                title: '请先选择文件！',



                icon: 'none'




            })



        }else {




//发起文件上传请求



            var uploadTask = ({



            url: 'http://localhost/miniDemo/', 




//可以替换为开发者自己的服务器地址



            filePath: src,



            name: 'file',



            success: function(res) {



                (res)



                ({



                    title: res.data




                })



            }



        })



        ((res)=> {



            ('上传进度', )



            ('已经上传的数据长度', )



            ('预期需要上传的数据总长度', )



            })



        }



    }



})

>文件下载

>小程序使用(OBJECT)可以从服务器下载文件资源到本地

OBJECT参数
属性	类型	必填	说明
url	string	是	下载资源的 url
header	Object	否	HTTP 请求 Header，Header 中不能设置 Referer
filePath	string	否	指定文件下载后存储的路径
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码：





//.wxml



 




<view class='page-body'>




    <view class='demo-box'>




        <view class= ' title ' >文件下载演示</view>




            <block wx:if='{{isDownload}}'>




                <image mode='widthFix' src='{{src}}'></image>




                <button bindtap="reset">重置</button>




            </block>




            <button wx:else type="primary"bindtap="download">点击此处下载图片</button>




    </view>





</view>




 




//.js



 




Page({



    data: {



        isDownload: false




    },



    download: function () {



        var that = this



    //开始下载



        var downloadTask = ({



            url:                 '/images/20180821/tooopen_sl_135625562533875.jpg', 




//用户可自行更换



            success: function (res) {




// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容



                if ( === 200) {



                    let src = 



                    //文件临时路径地址



                    ({



                        src: src,



                        isDownload: true




                    })



                }



            }



    })




//任务对象监听下载进度



    ((res) => {



        ('下载进度',)



        ('已经下载的数据长度',)



        ('预期需要下载的数据总长度', )



    })



},




//清空下载图片




reset: function () {



    ({



        src: '',



        isDownload: false




    })



}



})

...持续学习完善中。

#学无止境#

秒客网

微信小程序API_请求服务器数据API_文件上传与下载API

>请求服务器数据API

>小程序/服务器架构

>服务器域名配置

>临时服务器部署

>发起请求

>文件上传与下载API

>文件上传

>文件下载

相关文章