在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求。
这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主
设置域名
要微信小程序进行网络通信,必须先设置域名,不然会出现错误:
URL 域名不合法,请在 mp 后台配置后重试
需要在微信公众平台的小程序中设置域名。
在微信小程序的设置界面可以看到设置选项:
设置
选择开发设置:
开发设置
可以看到服务器设置:
服务器设置
在这里可以设置对应四种网络访问的域名,每一种类型的网络请求需要设置一个域名,注意如果在这里设置域名为https://example.com/api/,那么https://example.com/api是无法调用的,必须加上后面/。
http请求
使用wx.request可以发起一个http请求,一个微信小程序被限制为同时只有5个网络请求。
function queryRequest(data){ wx.request({ url:"https://example.com/api/", data:data, header:{ // "Content-Type":"application/json" }, success:function(res){ console.log(res.data) }, fail:function(err){ console.log(err) } }) }
上面的代码会发送一个http get请求,然后打印出返回的结果。其中的参数也比较容易理解。
另外还有两个参数没有在代码里:
method http的方法,默认为GET请求
complete 调用接口结束之后的回调,无论成功或者失败该接口都会被调用
上传文件
上传文件的api为wx.uploadFile,该api会发起一个http post请求,其中的Content-type为multipart/form-data。服务器端需要按照该Content-type类型接收文件,示例代码:
function uploadFile(file,data) { wx.uploadFile({ url: 'http://example.com/upload', filePath: file, name: 'file', formData:data, success:function(res){ console.log(res.data) }, fail:function(err){ console.log(err) } }) }
其中的url,header,success,fail以及complete和普通的http请求是一样的。(微信小程序应用号交流群 563752274)
这里有区别的参数是:
name文件对应的key,服务器端需要通过name参数获取文件
formData http请求中可以使用的其他参数
下载文件
下载文件的api为wx.downloadFile,该api会发起一个http get请求,并在下载成功之后返回文件的临时路径,示例代码:
function downloadFile(url,typ,success){ wx.downloadFile({ url:url, type:typ, success:function(res){ if(success){ success(res.tempFilePath) } }, fail:function(err){ console.log(err) } }) }
其中的url,header,fail,complete和wx.uploadFile的参数使用是一致的,其中有区别的参数是:
type:下载资源的类型,用于客户端自动识别,可以使用的参数image/audio/video
success:下载成功之后的回调,以tempFilePath的参数返回文件的临时目录:res={tempFilePath:'文件路径'}
下载成功后的是临时文件,只会在程序本次运行期间可以使用,如果需要持久的保存,需要调用方法wx.saveFile主动持久化文件,实例代码:
function svaeFile(tempFile,success){ wx.saveFile({ tempFilePath:tempFile, success:function(res){ var svaedFile=res.savedFilePath if(success){ success(svaeFile) } } }) }
使用wx.saveFile保存临时文件到本地,提供给小程序下次启动时使用,其中的参数:
超时的设置
在微信小程序开发:MINA中已经提到了在app.js中设置networkTimeout可以设置四种类型网络访问的超时时间:
"networkTimeout":{ "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }
这里设置的超时时间对应着四种类型的网络请求。
源代码请参考:https://github.com/jjz/weixin-mina/blob/master/api/api.js
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
本文向大家介绍微信小程序 触控事件详细介绍,包括了微信小程序 触控事件详细介绍的使用技巧和注意事项,需要的朋友参考一下 微信小程序 触控事件: 微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。 接下来把文档copy过来 原文地址:https://mp.weixin.qq.com/debu
本文向大家介绍微信小程序(二)Window 配置详细介绍,包括了微信小程序(二)Window 配置详细介绍的使用技巧和注意事项,需要的朋友参考一下 window用于设置小程序的状态栏、导航条、标题、窗口背景色。注意在app.json中配置的属性会被子window属性覆盖 只需在app.json配置即可 相关文章: hello WeApp icon组件 Wi
本文向大家介绍微信小程序 (六)模块化详细介绍,包括了微信小程序 (六)模块化详细介绍的使用技巧和注意事项,需要的朋友参考一下 模块化也就是将一些通用的东西抽出来放到一个文件中,通过module.exports去暴露接口。我们在最初新建项目时就有个util.js文件就是被模块化处理时间的 使用方式: 相关文章: hello WeApp icon组件 Win
本文向大家介绍微信小程序 (八)View组件详细介绍,包括了微信小程序 (八)View组件详细介绍的使用技巧和注意事项,需要的朋友参考一下 刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单。 主要属性: flex-direction: 主要两个特性”row”横向排列”column”纵向排列 justify-conte
本文向大家介绍微信小程序(九)scroll-view组件详细介绍,包括了微信小程序(九)scroll-view组件详细介绍的使用技巧和注意事项,需要的朋友参考一下 scroll-view为滚动视图,分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块 主要属性: 使用演示: wxml 相关
本文向大家介绍微信小程序 自定义创建详细介绍,包括了微信小程序 自定义创建详细介绍的使用技巧和注意事项,需要的朋友参考一下 微信小程序 自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家。 微信小程序 自定义创建 自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么,