1、普通的微信请求封装
1 const http = (options) =>{ 2 return new Promise((resolve,reject) => { 3 wx.request({ 4 url: options.url, 5 method:options.method || 'get', 6 data:options.data || {}, 7 header: options.header || { 8 'content-type':'application/json; charset=utf-8' 9 },10 success:resolve,11 fail:reject12 })13 })14 }15 export default http
在自己写的api.js里import后export
1 import http from '../http/http.js' 2 3 const functionName = (val1,val2) => { 4 return http({ 5 url:'url', 6 data: {}, 7 method: 'get', //post 8 header:{} 9 })10 }11 12 export default{13 functionName14 }
在需要使用api的页面import后调用方法即可
1 import api from '../api/api.js' 2 3 api.functionName().then(res =>{ 4 5 console.log(res) 5 6 7 })
2、原生微信小程序请求不支持multipart/form-data,当后端接口要求此类型请求时,就需要换一种写法
1 wx.request({ 2 url:'url', 3 method:'POST', //GET 4 header: { 5 'content-type':'multipart/form-data; boundary=XXX', //XXX是分隔符的意思 6 }, 7 data:'rn--XXX' + 8 'rnContent-Disposition: form-data; name="key1"' + //第一个参数key1:val1,固定写法以此类推 9 'rn' +10 'rn' + val1 +11 'rn--XXX' +12 'rnContent-Disposition: form-data; name="key2"' +13 'rn' +14 'rn' + val2 +15 'rn--XXX--',16 success(res){17 console.log(res)18 }19 })
3、对于图片上传,微信小程序有原生的api可以直接调用,不过仅支持单文件上传
1 wx.uploadFile({ 2 url: 'url', 3 filePath: imgSrc, //imgSrc是微信小程wx.chooseImage等图片选择接口生成图片的tempFilePaths,无论后端能接收多少个这里都只能放一个,这是这个接口的限制 4 name: 'image', //后端接收图片的字段名 5 //请求头 6 header:{ 7 'token':token, 8 'content-type':'multipart/form-data', 9 },10 //携带的其他参数可以放在这11 formData: {12 key1:val1,13 key2:val2,14 },15 success (res){16 console.log(res)17 }18 })
4、微信小程序原生接口仅支持单文件上传,当需要多图片同时上传时,无法使用循环或者递归的方式上传图片(所以和后端对接要多多沟通),微信小程序无内置formData对象,所以处理起来麻烦点
首先,前往这里:https://github.com/zlyboy/wx-formdata 下载formData.js和mimeMap.js两个文件放进小程序目录里,github上也有对wx-formdata的详细使用说明,也可直接新建js文件复制文末的代码,最好就去看看github
完成了两个js的下载就可以直接使用了
1 import FormData from '../formdata' 2 3 let formData = new FormData(); //新建一个formData对象 4 formData.append("key1", val1); //写入参数 5 formData.append("key2", val2); 6 7 //图片,依旧用原生接口选择图片,生成的tempFilePaths是一个图片链接数组,具体去看官方文档 8 for(let i in tempFilePaths){ 9 formData.appendFile("image", that.data.tempFilePaths[i]);10 }11 12 let data = formData.getData();13 14 //参数写好后,正常请求就好15 wx.request({16 url: 'url',17 method: 'post',18 header: {19 'content-type': data.contentType,20 'token':token,21 },22 data: data.buffer,23 success (res){24 console.log(res)25 }26 });
这个是mimeMap.js
1 //文件mimeMap.js,由formData.js引用 2 module.exports = { 3 "0.001": "application/x-001", 4 "0.323": "text/h323", 5 "0.907": "drawing/907", 6 ".acp": "audio/x-mei-aac", 7 ".aif": "audio/aiff", 8 ".aiff": "audio/aiff", 9 ".asa": "text/asa", 10 ".asp": "text/asp", 11 ".au": "audio/basic", 12 ".awf": "application/vnd.adobe.workflow", 13 ".bmp": "application/x-bmp", 14 ".c4t": "application/x-c4t", 15 ".cal": "application/x-cals", 16 ".cdf": "application/x-netcdf", 17 ".cel": "application/x-cel", 18 ".cg4": "application/x-g4", 19 ".cit": "application/x-cit", 20 ".cml": "text/xml", 21 ".cmx": "application/x-cmx", 22 ".crl": "application/pkix-crl", 23 ".csi": "application/x-csi", 24 ".cut": "application/x-cut", 25 ".dbm": "application/x-dbm", 26 ".dcd": "text/xml", 27 ".der": "application/x-x509-ca-cert", 28 ".dib": "application/x-dib", 29 ".doc": "application/msword", 30 ".drw": "application/x-drw", 31 ".dwf": "Model/vnd.dwf", 32 ".dwg": "application/x-dwg", 33 ".dxf": "application/x-dxf", 34 ".emf": "application/x-emf", 35 ".ent": "text/xml", 36 ".eps": "application/x-ps", 37 ".etd": "application/x-ebx", 38 ".fax": "image/fax", 39 ".fif": "application/fractals", 40 ".frm": "application/x-frm", 41 ".gbr": "application/x-gbr", 42 ".gif": "image/gif", 43 ".gp4": "application/x-gp4", 44 ".hmr": "application/x-hmr", 45 ".hpl": "application/x-hpl", 46 ".hrf": "application/x-hrf", 47 ".htc": "text/x-component", 48 ".html": "text/html", 49 ".htx": "text/html", 50 ".ico": "image/x-icon", 51 ".iff": "application/x-iff", 52 ".igs": "application/x-igs", 53 ".img": "application/x-img", 54 ".isp": "application/x-internet-signup", 55 ".java": "java/*", 56 ".jpe": "image/jpeg", 57 ".jpeg": "image/jpeg", 58 ".jpg": "application/x-jpg", 59 ".jsp": "text/html", 60 ".lar": "application/x-laplayer-reg", 61 ".lavs": "audio/x-liquid-secure", 62 ".lmsff": "audio/x-la-lms", 63 ".ltr": "application/x-ltr", 64 ".m2v": "video/x-mpeg", 65 ".m4e": "video/mpeg4", 66 ".man": "application/x-troff-man", 67 ".mdb": "application/msaccess", 68 ".mfp": "application/x-shockwave-flash", 69 ".mhtml": "messagefc822", 70 ".mid": "audio/mid", 71 ".mil": "application/x-mil", 72 ".mnd": "audio/x-musicnet-download", 73 ".mocha": "application/x-javascript", 74 ".mp1": "audio/mp1", 75 ".mp2v": "video/mpeg", 76 ".mp4": "video/mpeg4", 77 ".mpd": "application/vnd.ms-project", 78 ".mpeg": "video/mpg", 79 ".mpga": "audion-mpeg", 80 ".mps": "video/x-mpeg", 81 ".mpv": "video/mpg", 82 ".mpw": "application/vnd.ms-project", 83 ".mtx": "text/xml", 84 ".net": "image/pnetvue", 85 ".nws": "messagefc822", 86 ".out": "application/x-out", 87 ".p12": "application/x-pkcs12", 88 ".p7c": "application/pkcs7-mime", 89 ".p7r": "application/x-pkcs7-certreqresp", 90 ".pc5": "application/x-pc5", 91 ".pcl": "application/x-pcl", 92 ".pdf": "application/pdf", 93 ".pdx": "application/vnd.adobe.pdx", 94 ".pgl": "application/x-pgl", 95 ".pko": "application/vnd.ms-pki.pko", 96 ".plg": "text/html", 97 ".plt": "application/x-plt", 98 ".png": "application/x-png", 99 ".ppa": "application/vnd.ms-powerpoint",100 ".pps": "application/vnd.ms-powerpoint",101 ".ppt": "application/x-ppt",102 ".prf": "application/pics-rules",103 ".prt": "application/x-prt",104 ".ps": "application/postscript",105 ".pwz": "application/vnd.ms-powerpoint",106 ".ra": "audio/vnd.rn-realaudio",107 ".ras": "application/x-ras",108 ".rdf": "text/xml",109 ".red": "application/x-red",110 ".rjs": "application/vnd.rn-realsystem-rjs",111 ".rlc": "application/x-rlc",112 ".rm": "application/vnd.rn-realmedia",113 ".rmi": "audio/mid",114 ".rmm": "audio/x-pn-realaudio",115 ".rms": "application/vnd.rn-realmedia-secure",116 ".rmx": "application/vnd.rn-realsystem-rmx",117 ".rp": "image/vnd.rn-realpix",118 ".rsml": "application/vnd.rn-rsml",119 ".rtf": "application/msword",120 ".rv": "video/vnd.rn-realvideo",121 ".sat": "application/x-sat",122 ".sdw": "application/x-sdw",123 ".slb": "application/x-slb",124 ".slk": "drawing/x-slk",125 ".smil": "application/smil",126 ".snd": "audio/basic",127 ".sor": "text/plain",128 ".spl": "application/futuresplash",129 ".ssm": "application/streamingmedia",130 ".stl": "application/vnd.ms-pki.stl",131 ".sty": "application/x-sty",132 ".swf": "application/x-shockwave-flash",133 ".tg4": "application/x-tg4",134 ".tif": "image/tiff",135 ".tiff": "image/tiff",136 ".top": "drawing/x-top",137 ".tsd": "text/xml",138 ".uin": "application/x-icq",139 ".vcf": "text/x-vcard",140 ".vdx": "application/vnd.visio",141 ".vpg": "application/x-vpeg005",142 ".vsd": "application/x-vsd",143 ".vst": "application/vnd.visio",144 ".vsw": "application/vnd.visio",145 ".vtx": "application/vnd.visio",146 ".wav": "audio/wav",147 ".wb1": "application/x-wb1",148 ".wb3": "application/x-wb3",149 ".wiz": "application/msword",150 ".wk4": "application/x-wk4",151 ".wks": "application/x-wks",152 ".wma": "audio/x-ms-wma",153 ".wmf": "application/x-wmf",154 ".wmv": "video/x-ms-wmv",155 ".wmz": "application/x-ms-wmz",156 ".wpd": "application/x-wpd",157 ".wpl": "application/vnd.ms-wpl",158 ".wr1": "application/x-wr1",159 ".wrk": "application/x-wrk",160 ".ws2": "application/x-ws",161 ".wsdl": "text/xml",162 ".xdp": "application/vnd.adobe.xdp",163 ".xfd": "application/vnd.adobe.xfd",164 ".xhtml": "text/html",165 ".xls": "application/x-xls",166 ".xml": "text/xml",167 ".xq": "text/xml",168 ".xquery": "text/xml",169 ".xsl": "text/xml",170 ".xwd": "application/x-xwd",171 ".sis": "application/vnd.symbian.install",172 ".x_t": "application/x-x_t",173 ".apk": "application/vnd.android.package-archive",174 "0.301": "application/x-301",175 "0.906": "application/x-906",176 ".a11": "application/x-a11",177 ".ai": "application/postscript",178 ".aifc": "audio/aiff",179 ".anv": "application/x-anv",180 ".asf": "video/x-ms-asf",181 ".asx": "video/x-ms-asf",182 ".avi": "video/avi",183 ".biz": "text/xml",184 ".bot": "application/x-bot",185 ".c90": "application/x-c90",186 ".cat": "application/vnd.ms-pki.seccat",187 ".cdr": "application/x-cdr",188 ".cer": "application/x-x509-ca-cert",189 ".cgm": "application/x-cgm",190 ".class": "java/*",191 ".cmp": "application/x-cmp",192 ".cot": "application/x-cot",193 ".crt": "application/x-x509-ca-cert",194 ".css": "text/css",195 ".dbf": "application/x-dbf",196 ".dbx": "application/x-dbx",197 ".dcx": "application/x-dcx",198 ".dgn": "application/x-dgn",199 ".dll": "application/x-msdownload",200 ".dot": "application/msword",201 ".dtd": "text/xml",202 ".dwf": "application/x-dwf",203 ".dxb": "application/x-dxb",204 ".edn": "application/vnd.adobe.edn",205 ".eml": "messagefc822",206 ".epi": "application/x-epi",207 ".eps": "application/postscript",208 ".exe": "application/x-msdownload",209 ".fdf": "application/vnd.fdf",210 ".fo": "text/xml",211 ".g4": "application/x-g4",212 ".tif": "image/tiff",213 ".gl2": "application/x-gl2",214 ".hgl": "application/x-hgl",215 ".hpg": "application/x-hpgl",216 ".hqx": "application/mac-binhex40",217 ".hta": "application/hta",218 ".htm": "text/html",219 ".htt": "text/webviewhtml",220 ".icb": "application/x-icb",221 ".ico": "application/x-ico",222 ".ig4": "application/x-g4",223 ".iii": "application/x-iphone",224 ".ins": "application/x-internet-signup",225 ".IVF": "video/x-ivf",226 ".jfif": "image/jpeg",227 ".jpe": "application/x-jpe",228 ".jpg": "image/jpeg",229 ".js": "application/x-javascript",230 ".la1": "audio/x-liquid-file",231 ".latex": "application/x-latex",232 ".lbm": "application/x-lbm",233 ".ls": "application/x-javascript",234 ".m1v": "video/x-mpeg",235 ".m3u": "audio/mpegurl",236 ".mac": "application/x-mac",237 ".math": "text/xml",238 ".mdb": "application/x-mdb",239 ".mht": "messagefc822",240 ".mi": "application/x-mi",241 ".midi": "audio/mid",242 ".mml": "text/xml",243 ".mns": "audio/x-musicnet-stream",244 ".movie": "video/x-sgi-movie",245 ".mp2": "audio/mp2",246 ".mp3": "audio/mp3",247 ".mpa": "video/x-mpg",248 ".mpe": "video/x-mpeg",249 ".mpg": "video/mpg",250 ".mpp": "application/vnd.ms-project",251 ".mpt": "application/v