微信小程序 http请求详细介绍


Posted in Javascript onOctober 09, 2016

在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求。

  1. 普通HTTPS请求(wx.request)
  2. 上传文件(wx.uploadFile)
  3. 下载文件(wx.downloadFile)
  4. WebSocket通信(wx.connectSocket)

这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主

设置域名

要微信小程序进行网络通信,必须先设置域名,不然会出现错误:

URL 域名不合法,请在 mp 后台配置后重试

需要在微信公众平台的小程序中设置域名。
在微信小程序的设置界面可以看到设置选项:

微信小程序 http请求详细介绍

设置

选择开发设置:

微信小程序 http请求详细介绍

开发设置

可以看到服务器设置:

微信小程序 http请求详细介绍

服务器设置

在这里可以设置对应四种网络访问的域名,每一种类型的网络请求需要设置一个域名,注意如果在这里设置域名为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请求,然后打印出返回的结果。其中的参数也比较容易理解。

  1. url 服务器的url地址
  2. data 请求的参数可以采用String data:"xxx=xxx&xxx=xxx"的形式或者Object data:{"userId":1}的形式
  3. header 设置请求的header
  4. success 接口成功的回调
  5. fail 接口失败的回调

另外还有两个参数没有在代码里:

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保存临时文件到本地,提供给小程序下次启动时使用,其中的参数:

  1. tempFilePath 需要被保存文件的路径
  2. success 保存成功的回调,返回保存成功的路径,使用res.savedFilePath可以获取保存成功的路径
  3. fail 失败的回调
  4. complete结束的回调

超时的设置

在微信小程序开发:MINA中已经提到了在app.js中设置networkTimeout可以设置四种类型网络访问的超时时间:

"networkTimeout":{
  "request": 10000,
  "connectSocket": 10000,
  "uploadFile": 10000,
  "downloadFile": 10000
}

这里设置的超时时间对应着四种类型的网络请求。

源代码请参考:https://github.com/jjz/weixin-mina/blob/master/api/api.js

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
javascript常用功能汇总
Jul 05 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
vue实现淘宝购物车功能
Apr 20 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
微信小程序 Flex布局详解
Oct 09 #Javascript
JavaScript实现Java中Map容器的方法
Oct 09 #Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 #Javascript
JS中this上下文对象使用方式
Oct 09 #Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 #Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 #Javascript
BootStrap中Table分页插件使用详解
Oct 09 #Javascript
You might like
php中cookie的使用方法
2014/03/29 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
php实现图片缩略图的方法
2016/03/29 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
基于node实现websocket协议
2016/04/25 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
浅谈JS如何实现真正的对象常量
2017/06/25 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python表示矩阵的方法分析
2017/05/26 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
python实现kNN算法
2017/12/20 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
tensorflow 获取变量&打印权值的实例讲解
2018/06/14 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
如何利用Python识别图片中的文字
2020/05/31 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
《第一朵杏花》教学反思
2014/04/16 职场文书
考博专家推荐信
2014/05/10 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
k-means & DBSCAN 总结
2021/04/27 Python
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python
python数字图像处理:图像简单滤波
2022/06/28 Python