微信小程序 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 相关文章推荐
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
es6数值的扩展方法
Mar 11 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 Javascript
原生js+canvas实现验证码
Nov 29 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
vue 解决循环引用组件报错的问题
2018/09/06 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
python右对齐的实例方法
2020/07/05 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL