微信小程序 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 输入框数字限制插件
Nov 10 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
javascript instanceof 与typeof使用说明
Jan 11 Javascript
理解Javascript_08_函数对象
Oct 15 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 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 常用类整理
2009/12/23 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
JQuery toggle使用分析
2009/11/16 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
JS实现多功能计算器
2020/10/28 Javascript
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python进程池Pool应用实例分析
2019/11/27 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
运动会入场式解说词
2014/02/18 职场文书
汽车专业求职信
2014/06/05 职场文书