微信小程序 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 相关文章推荐
javascript处理table表格的代码
Dec 06 Javascript
js实现禁止中文输入的方法
Jan 14 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
React组件设计模式之组合组件应用实例分析
Apr 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
substr()函数中文版
2006/10/09 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
老生常谈js数据类型
2017/08/03 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
python网络编程之五子棋游戏
2020/05/14 Python
python的pip有什么用
2020/06/17 Python
python为什么会环境变量设置不成功
2020/06/23 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
学子宴答谢词
2014/01/25 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
会议主持词开场白
2015/05/28 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
js不常见操作运算符总结
2021/11/20 Javascript