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


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 TO HTML 转换
Jun 26 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
Node.js API详解之 zlib模块用法分析
May 19 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
php 时间计算问题小结
2009/01/04 PHP
php开发环境配置记录
2011/01/14 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
JS实现随机点名器
2020/04/12 Javascript
动态创建类实例代码
2009/10/07 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python实现二维插值的三维显示
2018/12/17 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
python 装饰器重要在哪
2021/02/14 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
测试工程师职业规划书
2014/02/06 职场文书
完整版商业计划书
2014/09/15 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python