微信小程序(三):网络请求


Posted in Javascript onJanuary 13, 2017

前文讲配置的时候我们说过,开发小程序时可以选择有 APPID 和 无 APPID ,两种方式。

1. 当有APPID的情况下,进行网络通信,只能和指定的域名进行通信。如果没有进行配置,编译时会报如下错误:

微信小程序(三):网络请求

配置方法:

设置域名

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

微信小程序(三):网络请求

选择开发设置:

微信小程序(三):网络请求

可以看到服务器设置:

微信小程序(三):网络请求

这里我们可以设置我们这个APPID可以访问的域名,每种最多可以设置两个。(注意,此处只能使用 https 的域名,这个申请过程需要花费一定的时间)

2. 当没有APPID的情况下,就方便多了,可以随意进行网络请求,不限制域名,但是,这种情况下不能进行发布,也不能在手机上预览。如果想正式做小程序开发,还是需要有一个https的域名,但是学习的情况下http的就足够了。

在小程序中网络请求大致分为四种类型。

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

这里主要讲 wx.request:

使用wx.request可以发起一个http请求,一个微信小程序被限制为同时只有5个网络请求。注意是同时。

wx.request({
      url: 'http://192.168.1.137:80/app/guanggao',
      method: 'POST',
      data: {
         type: "1"
      },
      header: {
        'Accept': 'application/json'
      },
      success: function (res) {
        that.setData({
          images: res.data.data.guanggao
        })
      }
      fail:function(err){
        console.log(err)
      }
    })

上面的代码会发送一个http get请求,其中的参数也比较容易理解。

  •  url 服务器的url地址
  •  data 请求的参数可以采用String data:”xxx=xxx&xxx=xxx”的形式或者Object data:{“userId”:1}的形式
  •  header 设置请求的header
  •  method http的方法,默认为GET请求
  •  success 接口成功的回调
  •  fail 接口失败的回调

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

  •  complete 调用接口结束之后的回调,无论成功或者失败该接口都会被调用

超时的设置

在前文中已经提到了在app.js中设置networkTimeout可以设置四种类型网络访问的超时时间:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
Javascript 八进制转义字符(8进制)
Apr 08 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
使用vue实现点击按钮滑出面板的实现代码
Jan 10 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
Node.js API详解之 module模块用法实例分析
May 13 Javascript
Javascript自定义事件详解
Jan 13 #Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 #Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 #Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 #Javascript
Vue数据驱动模拟实现5
Jan 13 #Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 #Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
Jan 13 #Javascript
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
JavaScript入门教程(6) Window窗口对象
2009/01/31 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
Python入门篇之函数
2014/10/20 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python for i in range ()用法详解
2020/09/18 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
架构师岗位职责
2013/11/18 职场文书
家具促销活动方案
2014/02/16 职场文书
对标管理实施方案
2014/03/12 职场文书
简历自我评价模板
2015/03/11 职场文书
会议主持词通用版
2019/04/02 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python