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


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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
微信小程序实现列表左右滑动
Nov 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
php上传文件常见问题总结
2015/02/03 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
js加强的经典分页实例
2013/03/15 Javascript
js判断FCKeditor内容是否为空的两种形式
2013/05/14 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
常见的python正则用法实例讲解
2016/06/21 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Python获取时间戳代码实例
2019/09/24 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
高中军训感想300字
2014/03/04 职场文书
大学四年个人自我小结
2014/03/05 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers