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


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 相关文章推荐
在JavaScript中实现命名空间
Nov 23 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
详解TypeScript的基础类型
Feb 18 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
php 数组的创建、调用和更新实现代码
2009/03/09 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
javascript 播放器 控制
2007/01/22 Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
django 模版关闭转义方式
2020/05/14 Python
Python Django搭建网站流程图解
2020/06/13 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
动物学专业毕业生求职信
2013/10/11 职场文书
商务助理岗位职责
2013/11/13 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
招标承诺书
2014/08/30 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
同学聚会邀请函
2015/01/30 职场文书
劳动仲裁调解书
2015/05/20 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
学术会议领导致辞
2015/07/29 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书