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


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 相关文章推荐
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
js通过canvas生成图片缩略图
Oct 02 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
AngularJS日程表案例详解
2017/08/15 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
打通前后端构建一个Vue+Express的开发环境
2018/07/17 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
vue-router传参用法详解
2019/01/19 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
python库matplotlib绘制坐标图
2019/10/18 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
教师岗位职责
2013/11/17 职场文书
项目合作计划书
2014/01/09 职场文书
争先创优演讲稿
2014/09/15 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
php双向队列实例讲解
2021/11/17 PHP
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
使用scrapy实现增量式爬取方式
2022/06/21 Python
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS