微信小程序开发图解案例教程课件 第5章 微信小程序API

第5章必备的微信小程序API微信小程序提供了大量API，以供开发使用，包括请求服务器数据API、文件上传与下载API、WebSocket会话API、图片处理API、文件操作API、数据缓存API、位置信息API、设备应用API、交互反馈API、用户及授权设置API、微信支付API等。本章将详细介绍这些常用的API。本章导读Thechapter’sintroduction目录导航5.1请求服务器数据API5.3

WebSocket会话API5.5文件操作API5.6数据缓存API5.2文件上传与下载API5.4图片处理API5.7位置信息API5.8设备应用API5.9交互反馈API5.11微信支付API5.12沙场大练兵：仿“豆瓣电影”微信小程序5.13小结5.10用户及授权设置API5.1请求服务器数据API创建一个小程序项目“api”（实例位置：源码\第5章\api），用于存放API相关操作代码。配置服务器域名如图4.1所示。配置服务器域名5.1请求服务器数据APIwx.request（Object）参数说明属性类型是否必填说明urlstring是开发者服务器接口地址datastring/object/ArrayBuffer否请求的参数headerobject否设置请求的header。header中不能设置Referer。content-type默认为application/jsontimeoutnumber否超时时间，单位为ms。默认值为60000methodstring否默认为GET。有效值为OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECTdataTypestring否默认为JSON。如果设置了dataType为.json文件，则会尝试对响应的数据做一次JSON.parse；设置其他值，则不对返回的内容进行JSON.parseresponseTypestring否响应的数据类型，text表示响应的数据为文本，arraybuffer表示响应的数据为ArrayBuffersuccessfunction否收到开发者服务成功返回的回调函数，res={data:'开发者服务器返回的内容'}failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.1请求服务器数据API服务器域名可在“小程序后台”→“开发”→“开发管理”→“开发设置”→“服务器域名”中进行配置。配置时应注意以下几点。域名只支持https（wx.request、wx.uploadFile、wx.downloadFile）和wss（wx.connectSocket）协议。域名不能使用IP地址（小程序的局域网IP除外）或localhost。可以配置端口，如:8888。

但

是

配

置

后

只

能

向https://api.mofun365.com:8888发起请求。如果不配置端口，如https://，那么请求的URL中也不能包含端口。域名必须经过ICP备案。出于安全考虑，

不能被配置为服务器域名，相关API也不能在小程序内调用。开发者应将AppSecret保存到后台服务器中，通过服务器使用getAccessToken接口获取access_token，并调用相关API。5.1请求服务器数据API示例代码如下Page({onLoad:function(){wx.request({url:':8888/api/address/getAddressList',data:{provinceId:'3'},method:'GET',success:function(res){console.log(res);},fail:function(){//fail},complete:function(){//complete}});}})服务器返回数据5.1请求服务器数据API最终发送给服务器的数据是string类型。如果传入不是string类型，会被转换。转换规则如下。对于GET方法的数据，会将数据转换成querystring(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)。对于POST方法且header['content-type']为application/json的数据，会对数据进行JSON序列化。对于POST方法且header['content-type']为application/x-www-form-urlencoded的数据，会将数据转换成querystring(encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...)。发起wx.request请求时也创建了RequestTask对象，这个对象提供了以下4种方法。RequestTask.abort()，表示中断请求任务。RequestTask.onHeadersReceived(functioncallback)，表示监听HTTPResponseHeader事件。RequestTask.offHeadersReceived(functioncallback)，表示取消监听HTTPResponseHeader事件。requestTask.onChunkReceived和requestTask.offChunkReceived：在客户端接收到部分数据块（chunk）HTTP响应时触发，通常用于处理大型HTTP响应，以便可以在下载/接收过程中处理响应，而不需要等待整个响应下载/接收完毕；可以应用于流式传输文件。5.1请求服务器数据API示例代码如下Page({onLoad:function(){varrequestTask=wx.request({url:':8888/api/address/getAddressList',data:{provinceId:'3'},method:'GET',success:function(res){console.log(res);}});//监听HTTPResponseHeader事件requestTask.onHeadersReceived(function(res){console.log("监听HTTPResponseHeader事件");console.log(res);});//取消监听HTTPResponseHeader事件requestTask.offHeadersReceived(function(){console.log("取消监听HTTPResponseHeader事件");});//监听数据块ChunkReceived事件requestTask.onChunkReceived(function(res){console.log("监听Transfer-EncodingChunkReceived事件");console.log(res);});//取消监听数据块ChunkReceived事件requestTask.offChunkReceived(function(){console.log("取消监听Transfer-EncodingChunkReceived事件");});//中断请求任务requestTask.abort();}})目录导航5.1请求服务器数据API5.3

WebSocket会话API5.5文件操作API5.6数据缓存API5.2文件上传与下载API5.4图片处理API5.7位置信息API5.8设备应用API5.9交互反馈API5.11微信支付API5.12沙场大练兵：仿“豆瓣电影”微信小程序5.13小结5.10用户及授权设置API5.2.1wx.uploadFile文件上传APIwx.uploadFile（Object）参数说明属性类型是否必填说明urlstring是开发者服务器URLfilePathstring是要上传文件资源的路径namestring是文件对应的key。开发者在服务器端通过这个key可以获取到文件二进制内容headerobject否HTTP请求Header。Header中不能设置RefererformDataobject否HTTP请求中其他额外的formdatatimeoutnumber

超时时间，单位为mssuccessfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.2.1wx.uploadFile文件上传API示例代码如下Page({onLoad:function(){wx.chooseImage({count:9, //最多可以选择的图片张数，默认为9sizeType:['original','compressed'], //original表示原图，compressed表示压缩图。默认二者都有sourceType:['album','camera'], //album表示从相册选图，camera表示使用相机。默认二者都有success:function(res){vartempFilePaths=res.tempFilePaths;//创建uploadTask对象constuploadTask=wx.uploadFile({url:':8888/api/banner/wxUploadFile',filePath:tempFilePaths[0],name:'file',header:{'content-type':'Application/json'},formData:{imgName:'我是图片名称',imgSize:'122KB',position:'wx' //自定义文件存放的文件夹},success:function(res){console.log(res);}

5.2.1wx.uploadFile文件上传API

});//监听HTTPResponseHeader事件

uploadTask.onHeadersReceived(function(res){console.log("监听HTTPResponseHeader事件");console.log(res);});//取消监听HTTPResponseHeader事件uploadTask.offHeadersReceived(function(){console.log("取消监听HTTPResponseHeader事件");});//监听上传进度变化事件uploadTask.onProgressUpdate(function(res){console.log("监听上传进度变化事件");console.log(res);});//取消监听上传进度变化事件uploadTask.offProgressUpdate(function(){console.log("取消监听上传进度变化事件");});//中断请求任务uploadTask.abort();}})}})5.2.1wx.uploadFile文件上传API文件上传成功后，利用wx.uploadFile里的success回调函数可以查看文件是否上传成功。输出日志如图所示。5.2.2wx.downloadFile文件下载APIwx.downloadFile参数说明属性类型是否必填说明urlstring是开发者服务器urlheaderobject否HTTP请求Header。Header中不能设置Referertimeoutnumber否超时时间，单位为msfilePathstring否指定文件下载后存储的路径（本地路径）successfunction否收到开发者服务成功返回的回调函数，res={data:'开发者服务器返回的内容'}failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）下面我们演示一下wx.downloadFile文件下载API的使用。服务器传递一张图片给微信小程序客户端，客户端将其下载到本地，并显示出来。5.2.2wx.downloadFile文件下载API（1）在WXML文件里添加image组件，用来显示服务器传递过来的图片。具体代码如下。<!--index.wxml--><imagesrc="{{src}}"style="width:270px;height:126px;"></image>（2）在JS文件里下载服务器的一张图片，将它的临时路径赋值给src。具体代码如下。//index.jsPage({data:{src:''},onLoad:function(){varpage=this;constdownloadTask=wx.downloadFile({url:"/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png",type:'image'//下载资源的类型，用于客户端识别处理，有效值为image/audio/videosuccess:function(res){console.log(res);vartempPath=res.tempFilePath;page.setData({src:tempPath});}})5.2.2wx.downloadFile文件下载API//监听HTTPResponseHeader事件

downloadTask.onHeadersReceived(function(res){console.log("监听HTTPResponseHeader事件");console.log(res);});//取消监听HTTPResponseHeader事件

downloadTask.offHeadersReceived(function(){console.log("取消监听HTTPResponseHeader事件");});//监听下载进度变化事件

downloadTask.onProgressUpdate(function(res){console.log("监听下载进度变化事件");console.log(res);});//取消监听下载进度变化事件

downloadTask.offProgressUpdate(function(){console.log("取消监听下载进度变化事件");});//中断请求任务

downloadTask.abort();}})5.2.2wx.downloadFile文件下载API下载图片如图

所示。wx.downloadFile文件下载最大并发限制是10个，默认超时时间和最大超时时间都是60s，网络请求的referer是不可以设置的。下载图片目录导航5.1请求服务器数据API5.3

WebSocket会话API5.5文件操作API5.6数据缓存API5.2文件上传与下载API5.4图片处理API5.7位置信息API5.8设备应用API5.9交互反馈API5.11微信支付API5.12沙场大练兵：仿“豆瓣电影”微信小程序5.13小结5.10用户及授权设置API5.3

WebSocket会话APIWebSocket会话用来创建一个会话连接。创建会话连接后用户间可以相互通信，如微信聊天和QQ聊天。它会用到以下7个API。wx.connectSocket（object）：创建一个会话连接。wx.onSocketOpen（callback）：监听WebSocket连接打开事件。wx.onSocketError（callback）：监听WebSocket错误。wx.sendSocketMessage（object）：发送数据。wx.onSocketMessage（callback）：监听WebSocket接收到服务器的消息事件。wx.closeSocket()：关闭WebSocket连接。wx.onSocketClose（callback）：监听WebSocket关闭。5.3

WebSocket会话APIwx.connectSocket（object）的属性如下表所示。wx.connectSocket（object）的属性属性类型是否必填说明urlstring是开发者服务器urlheaderobject否HTTP请求Header，Header中不能设置Refererprotocolsarray.<string>否子协议数组tcpNoDelayboolean否建立TCP连接的时候的TCP_NODELAY设置perMessageDeflateboolean否是否开启压缩扩展timeoutnumber否超时时间，单位为mssuccessfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.3

WebSocket会话APIwx.sendSocketMessage（object）的属性如下表所示。wx.sendSocketMessage（object）的属性属性类型是否必填说明Datastring/ArrayBuffer否请求的数据Successfunction否接口调用成功的回调函数Failfunction否接口调用失败的回调函数Completefunction否接口调用结束的回调函数（接口调用成功、失败都会执行）下面我们演示WebSocket会话API的使用。1.在WXML文件里进行界面布局设计，创建一个“创建连接”按钮，发送消息及接收消息。具体代码如下5.3

WebSocket会话API<buttontype="default"bindtap="createConn">创建连接</button><viewstyle="display:flex;flex-direction:row;margin:10px;"><inputtype="text"name="msg"bindblur="getMsg"style="width:200px;border:1pxsolid#cccccc;"/><buttontype="primary"size="mini"bindtap="send">发送消息</button></view><viewstyle="height:200px;"><viewstyle="font-weight:bold;">客户端发送的消息</view><blockwx:for="{{sendMsg}}"wx:for-item="item1"><viewstyle="color:green">{{item1}}</view></block></view><viewstyle="height:200px;"><viewstyle="font-weight:bold;">服务端返回的消息</view><blockwx:for="{{resData}}"wx:for-item="item2"><viewstyle="color:red">{{item2}}</view></block></view><viewstyle="margin:10px;">{{content}}</view><buttontype="default"bindtap="closeConn">关闭连接</button>WebSocket会话布局5.3

WebSocket会话API2.在JS文件里，利用WebSocket的API创建一个会话连接、监听连接打开成功和失败、发送消息和接收消息、关闭连接等。具体代码如下：Page({data:{msg:'',sendMsg:[],socketOpen:false,resData:[]},createConn:function(){varpage=this;wx.connectSocket({url:'wss://:8888/api/socketServer',data:{x:'',y:''},header:{'content-type':'Application/json'},method:"GET"});wx.onSocketOpen(function(res){console.log(res);page.setData({socketOpen:true});console.log('WebSocket连接已打开！')});wx.onSocketError(function(res){console.log('WebSocket连接打开失败，请检查！')})},send:function(e){if(this.data.socketOpen){console.log(this.data.socketOpen);wx.sendSocketMessage({data:this.data.msg});5.3

WebSocket会话APIvarsendMsg=this.data.sendMsg;sendMsg.push(this.data.msg);this.setData({sendMsg:sendMsg});varpage=this;wx.onSocketMessage(function(res){varresData=page.data.resData;resData.push(res.data);page.setData({resData:resData});console.log(resData);console.log('收到服务器内容：'+res.data)})}else{console.log('WebSocket连接打开失败，请检查！');}},closeConn:function(e){wx.closeSocket();wx.onSocketClose(function(res){console.log('WebSocket已关闭！')});},getMsg:function(e){varpage=this;page.setData({msg:e.detail.value});}})会话聊天效果3.点击“创建连接”按钮，创建一个会话连接，同时可以发送消息给服务端，并接收服务端传递过来的消息，最后关闭连接，会话聊天效果如图所示。目录导航5.1请求服务器数据API5.3

WebSocket会话API5.5文件操作API5.6数据缓存API5.2文件上传与下载API5.4图片处理API5.7位置信息API5.8设备应用API5.9交互反馈API5.11微信支付API5.12沙场大练兵：仿“豆瓣电影”微信小程序5.13小结5.10用户及授权设置API5.4.1wx.chooseImage选择图片APIwx.chooseImage（object）选择图片API可以从本地相册选择图片或使用相机拍照来选择图片，其属性如下表所示。属性类型是否必填说明countnumber否最多可以选择的图片张数，默认9mediaTypearray.<string>否文件类型：image图片、video视频、mix图片和视频sizeTypearray.<string>否所选的图片的尺寸，original为原图，compressed为压缩图。默认二者都有sourceTypearray.<string>否选择图片的来源，album为从相册选图，camera为使用相机。默认二者都有successfunction否成功则返回图片的本地文件路径列表tempFilePathsfailfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）wx.chooseImage（object）的属性5.4.1wx.chooseImage选择图片API示例代码如下Page({onLoad:function(){wx.chooseMedia({count:9,//默认9sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有sourceType:['album','camera'],//可以指定来源是相册还是相机，默认二者都有success:function(res){//返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片vartempFilePaths=res.tempFilePaths;//打印文件路径console.log(tempFilePaths);}})}})5.4.2wx.previewImage预览图片APIwx.previewImage(object)预览图片API可以用来预览多张图片及设置默认显示的图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。其属性如下表所示。wx.previewImage（object）的属性属性类型是否必填说明currentstring否当前显示图片的链接，不填则默认为urls的第一张urlsarray.<string>是需要预览的图片链接列表successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.4.2wx.previewImage预览图片API示例代码如下Page({onLoad:function(){wx.previewImage({//当前显示的图片的HTTP链接current:':8888/images/goods/1555850845474.jpg',urls:[":8888/images/goods/1555850845474.jpg",":8888/images/goods/1555851154057.jpg",":8888/images/goods/1555851345937.jpg"]//需要预览的图片的HTTP链接列表})}})页面预览效果如右图所示。预览一预览二5.4.3wx.getImageInfo获得图片信息APIwx.getImageInfo(object)用来获得图片信息，包括图片的宽度、图片的高度及图片返回的路径。网络图片需先配置download域名才能生效。其属性如表所示。wx.getImageInfo（object）的属性属性类型是否必填说明srcstring是图片的路径。支持网络路径、本地路径、代码包路径successfunction否接口调用成功的回调函数。返回结果见success返回参数说明failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.4.3wx.getImageInfo获得图片信息APIwx.getImageInfo的success返回参数说明参数类型说明sidthnumber图片宽度，单位为pxheightnumber图片高度，单位为pxpathstring返回图片的本地路径orientationstring拍照时设备的方向。up：默认方向（手机横持拍照），对应Exif中的1。或无orientation信息up-mirrored：同up，但镜像翻转，对应Exif中的2down：旋转180度，对应Exif中的3down-mirrored：同down，但镜像翻转，对应Exif中的4left-mirrored：同left，但镜像翻转，对应Exif中的5right：顺时针旋转90度，对应Exif中的6right-mirrored：同right，但镜像翻转，对应Exif中的7left：逆时针旋转90度，对应Exif中的8typestring图片格式5.4.3wx.getImageInfo获得图片信息API示例代码如下Page({onLoad:function(){wx.getImageInfo({src:':8888/images/goods/1555850845474.jpg',success:function(res){console.log("图片宽度="+res.width);console.log("图片高度="+res.height);console.log("图片本地路径="+res.path);console.log("图片格式="+res.type);console.log("拍照时设备方向="+res.orientation);}})}})图片信息如图所示。5.4.4wx.saveImageToPhotosAlbum保存图片到相册APIwx.saveImageToPhotosAlbum（object）参数说明微信小程序支持将图片保存到系统相册里，但是前提是需要用户授权。wx.saveImageToPhotosAlbum(object)API用于保存图片到系统相册。其属性如表所示。属性类型是否必填说明filePathstring是图片文件路径，可以是临时文件路径或永久文件路径（本地路径），不支持网络路径successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.4.4wx.saveImageToPhotosAlbum保存图片到相册APIwx.saveImageToPhotosAlbum调用成功后会返回一个参数：res（调用结果）。示例代码如下Page({onLoad:function(){varpage=this;wx.downloadFile({url:":8888/images/goods/1555850845474.jpg",type:'image',success:function(res){console.log(res);vartempPath=res.tempFilePath;wx.saveImageToPhotosAlbum({filePath:tempPath,success:function(res){console.log(res);}})}})}})5.4.5pressImage压缩图片APIwx.compressImage（object）的属性pressImage(object)压缩图片API用于压缩图片，图片的路径支持本地路径、代码包路径，同时支持选择压缩质量。其属性如表所示。属性类型是否必填说明srcstring是图片路径，支持本地路径、代码包路径qualitynumber否压缩质量，范围0～100，默认值为80。数值越小，质量越低，压缩率越高（仅对JPG格式有效）successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.4.5pressImage压缩图片APIpressImage调用成功后会返回一个string类型参数：tempFilePath（压缩后图片的临时文件路径，即本地路径）。示例代码如下Page({onLoad:function(){pressImage({src:'/images/goods/1555850845474.jpg', //图片路径quality:80, //压缩质量complete:function(res){console.log(res);vartempPath=res.tempFilePath;console.log(tempPath);}})}})5.4.6wx.chooseMessageFile从客户端会话选择文件APIwx.chooseMessageFile（object）的属性wx.chooseMessageFile(object)从客户端会话选择文件API用于从客户端选择文件。其属性如表所示。属性类型是否必填说明countnumber是最多可以选择的文件个数，范围为0～100typestring否所选的文件的类型，默认值为allall：从所有文件选择video：只能选择视频文件image：只能选择图片文件file：可以选择除了图片和视频之外的其他的文件extensionarray.<string>否根据文件拓展名过滤，仅type为file时有效。每一项都不能是空字符串。默认不过滤successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.4.6wx.chooseMessageFile从客户端会话选择文件APIwx.chooseMessageFile调用成功后会返回一个参数：tempFiles（返回选择的文件的本地临时文件对象数组）。tempFiles的结构如下。01OPTION02OPTION03OPTION04OPTIONpath：本地临时文件路径（本地路径）。size：本地临时文件大小，单位为B。name：选择的文件名称。type：选择的文件类型。05OPTION06OPTIONtime：选择的文件的会话发送时间，为Unix时间戳。开发者工具暂不支持此属性。type的合法值：video（选择了视频文件）、image（选择了图片文件）、file（选择了除图片和视频的文件）。5.4.6wx.chooseMessageFile从客户端会话选择文件API示例代码如下Page({onLoad:function(){wx.chooseMessageFile({count:10,type:'image',success(res){//tempFilePaths可以作为<img>标签的src属性显示图片consttempFilePaths=res.tempFiles;console.log(tempFilePaths);}})}})目录导航5.1请求服务器数据API5.3

WebSocket会话API5.5文件操作API5.6数据缓存API5.2文件上传与下载API5.4图片处理API5.7位置信息API5.8设备应用API5.9交互反馈API5.11微信支付API5.12沙场大练兵：仿“豆瓣电影”微信小程序5.13小结5.10用户及授权设置API5.5.1wx.getFileSystemManager获取文件管理器对象API

wx.getFileSystemManager是微信小程序中用于获取全局唯一文件管理器FileSystemManager对象的API，通过它开发者可以实现将文件保存到本地、获取本地文件列表、删除本地文件、获取本地文件信息和打开文档等操作。示例代码如下varfileSystemManager=wx.getFileSystemManager()5.5.2FileSystemManager.saveFile保存文件到本地APIFileSystemManager.saveFile(object)的属性FileSystemManager.saveFile(object)API用于将文件保存到本地，以便下次启动微信小程序的时候，仍然可以获取该文件。如果文件的路径是临时路径，下次启动微信小程序的时候，就无法获取该文件。本地文件存储的大小限制为10MB。其属性如下表所示。属性类型是否必填说明tempFilePathstring是需要保存的文件的临时路径（本地路径）successfunction否返回文件的保存路径，res={savedFilePath:'文件的保存路径'}failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.5.2FileSystemManager.saveFile保存文件到本地API示例代码如下Page({onLoad:function(){wx.getImageInfo({src:':8888/images/goods/1555850845474.jpg',success:function(res){varpath=res.path;console.log("临时文件路径="+path);varfileSystemManager=wx.getFileSystemManager();fileSystemManager.saveFile({tempFilePath:path,success:function(res){varsavedFilePath=res.savedFilePath;console.log("本地文件路径="+savedFilePath);}})}})}})除了可以使用FileSystemManager.saveFile保存文件，也可以通过wx.saveFileToDisk(Objectobject)保存文件系统的文件到用户磁盘中，该方法仅PC端支持，其使用方法与FileSystemManager.saveFile类似。5.5.3FileSystemManager.getSavedFileList获取本地文件列表APIFileSystemManager.getSavedFileList的属性通过FileSystemManager.saveFile将临时文件保存到本地后，可以用FileSystemManager.getSavedFileList来获取本地文件列表，进而得到FileSystemManager.saveFile保存的文件。属性类型是否必填说明successfunction否接口调用成功的回调函数。返回结果见success返回参数说明failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）FileSystemManager.getSavedFileList调用成功后返回参数fileList（文件数组），其中每一项都是一个FileItem。fileList中包含的success返回参数说明如下。filePath：文件路径（本地路径）。size：地文件大小，以B为单位。、createTime：文件保存时的时间戳，即从1970-01-0108:00:00到当前时间的秒数。5.5.3FileSystemManager.getSavedFileList获取本地文件列表API示例代码如下Page({onLoad:function(){varfileSystemManager=wx.getFileSystemManager()fileSystemManager.getSavedFileList({success:function(res){varfileList=res.fileList;console.log(fileList)for(vari=0;i<fileList.length;i++){varfile=fileList[i];console.log("第"+(i+1)+"个文件:");console.log("文件创建时间="+file.createTime);console.log("文件大小="+file.size);console.log("文件本地路径="+file.filePath);}}})}})本地文件信息如下图所示。5.5.4FileSystemManager.removeSavedFile删除本地文件APIFileSystemManager.removeSavedFile的属性FileSystemManager.saveFile用来将文件保存到本地，而FileSystemManager.removeSavedFile用来删除本地文件。其属性如下表所示。属性类型是否必填说明filePathstring是需要删除的文件路径（本地路径）successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（接口调用成功、失败都会执行）5.5.4FileSystemManager.removeSavedFile删除本地文件API示例代码如下Page({onLoad:function(){varfileSystemManager=wx.getFileSystemManager()fileSystemManager.getSavedFileList({success:function(res){varfileList=res.fileList;console.log(fileList)varfile=fileList[0];fileSystemManager.removeSavedFile({filePath:file.filePath,complete:function(res){console.log(res)}})}})}})5.5.5FileSystemManager.getFileInfo获取文件信息APIFileSystemManager.getFileInfo的属性属性类型是否必填说明filePathstring是文件路径（本地路径）digestAlgorithmstring否计算文件摘要的算法，有效值为md5（默认值）、sha1和sha256failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（接口调用成功、失败都会执行）Successfunction否接口调用成功的回调函数。返回结果见success返回参数说明FileSystemManager.getFileInfo可以用来获取文件的大小和摘要信息等文件信息。其属性如下表所示。5.5.5FileSystemManager.getFileInfo获取文件信息API示例代码如下Page({onLoad:function(){varfileSystemManager=wx.getFileSystemManager()fileSystemManager.getFileInfo({filePath:'/images/goods/1555850845474.jpg' //本地文件路径complete:function(res){console.log("文件大小size="+res.size);console.log("文件摘要digest="+res.digest)}})}})5.5.6wx.openDocument打开文档APIwx.openDocument的属性在微信小程序中，wx.openDocument用于打开文档，支持打开DOC、XLS、PPT、PDF、DOCX、XLSX和PPTX等多种格式的文档。其属性如下表所示。属性类型是否必填说明filePathstring是文件路径（本地路径）。可通过downloadFile获得fileTypestring否文件类型。可指定以下文件类型：doc、docx、xls、xlsx、ppt、pptx、pdfsuccessfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.5.6wx.openDocument打开文档API示例代码如下Page({onLoad:function(){wx.downloadFile({url:':8888/images/doc/weixin.doc',success:function(res){varfilePath=res.tempFilePathwx.openDocument({filePath:filePath,fileType:'doc',success:function(res){console.log('打开文档成功')}})}})}})目录导航5.1请求服务器数据API5.3

WebSocket会话API5.5文件操作API5.6数据缓存API5.2文件上传与下载API5.4图片处理API5.7位置信息API5.8设备应用API5.9交互反馈API5.11微信支付API5.12沙场大练兵：仿“豆瓣电影”微信小程序5.13小结5.10用户及授权设置API5.6.1数据缓存到本地wx.setStorage(object)的属性wx.setStorage（object）使用异步方式将数据存储在本地缓存中指定的key中，会覆盖掉原来该key对应的内容。其属性如下表所示。属性类型是否必填说明keystring是本地缓存中的指定的keydataany是需要存储的内容。只支持原生类型、Date及能够通过JSON.stringify序列化的对象successfunction否接口调用成功的回调函数failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）1.wx.setStorage（object）5.6.1数据缓存到本地例如，把用户信息缓存到本地的示例代码如下Page({onLoad:function(){varuser=this.getUserInfo();console.log(user);wx.setStorage({key:'user',data:user,success:function(res){console.log(res);}})},getUserInfo:function(){varuser=newObject();='xiaogang';user.sex='男';user.age=30;user.address='北京市';returnuser;}})在Storage里可以查看本地缓存的数据，如下图所示。5.6.1数据缓存到本地wx.setStorageSync(key,data)的属性wx.setStorageSync(key,data)使用同步方式将数据存储到本地缓存指定的key中，会覆盖掉原来该key中对应的内容。相比于异步缓存数据，它更简单一些。其属性如表所示。2.wx.setStorageSync（key,data）属性类型是否必填说明keystring是本地缓存中的指定的keydataany是需要存储的内容。只支持原生类型、Date及能够通过JSON.stringify序列化的对象5.6.1数据缓存到本地示例代码如下Page({onLoad:function(){varuserSync=this.getUserInfo();//同步方式将数据存储到本地

wx.setStorageSync('userSync',userSync)},getUserInfo:function(){varuser=newObject();='xiaogang';user.sex='男';user.age=30;user.address='北京市';returnuser;}})在Storage里可以查看本地缓存的数据，如图所示。5.6.2获取本地缓存数据wx.getStorage（object）参数说明wx.getStorage（object）使用异步方式从本地缓存中获取指定key对应的内容。其参数说明如表所示。1.wx.getStorage（object）属性类型是否必填说明keystring是本地缓存中的指定的keysuccessfunction否接口调用的回调函数，res={data:key对应的内容}failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）5.6.2获取本地缓存数据在5.6.1小节中，我们使用了wx.setStorage(object)将user以异步方式保存到本地。下面我们使用wx.getStorage(object)来获取本地缓存数据。具体代码如下。Page({onLoad:function(){//异步方式获取本地数据

wx.getStorage({key:'user',success:function(res){console.log(res);}})}})异步获取本地数据如图所示。5.6.2获取本地缓存数据wx.getStorageSync(key)的属性wx.getStorageSync(key)是一个同步的接口，用来从本地缓存中同步获取指定key对应的内容。它只有一个属性，如表所示。2.wx.getStorageSync（object）属性类型是否必填说明keystring是本地缓存中的指定的key示例代码如下Page({onLoad:function(){//同步方式获取本地数据

varuserSync=wx.getStorageSync('userSync');console.log(userSync);}})同步获取本地缓存数据如下图所示。5.6.2获取本地缓存数据wx.getStorageInfo(object)的属性3.wx.getStorageInfo（object）属性类型是否必填说明successfunction否接口调用的回调函数。返回结果见success返回参数说明failfunction否接口调用失败的回调函数completefunction否接口调用结束的回调函数（调用成功、失败都会执行）wx.getStorageInfo的success返回参数说明参数类型说明keysstringarray当前storage中所有的keycurrentSizenumber当前key占用的空间大小，单位为KBlimitSizenumberkey限制的空间大小，单位为KB5.6.2获取本地缓存数据示例代码如下Page({onLoad:function(){wx.getStorageInfo({success:function(res){console.log(res);}})}})异步获取本地key数据如图所示。5.6.2获取本地缓存数据wx.getStorageInfoSync(object)是一个用同步的方法来获取当前storage的相关信息的API。示例代码如下Page({onLoad:function(){varstorage=wx.getStorageInfoSync();console.log(storage);}})同步获取本地key数据如图所示。和wx.getStorageInfo(object)异步获取storage相关信息返回的数据一样，wx.getStorageInfoSync(object)也返回所有的key数据，然后根据key数据搜索完整的数据。4.wx.getStorageInfoSync（object）5.6.3移除和清理本地缓存数据wx.removeStorage(object)的属性1.wx.removeStorage（object）属性类型是否必填说明keysstring是本地缓存中的指定的keysuccessfunction否接口调用的回调函数failfunction否接口调用失败的回调函数completefunction