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


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、js操作checkbox全选反选
Mar 12 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
详谈javascript精度问题与调整
Jul 08 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
详解vue axios二次封装
Jul 22 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
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编程中八种常见的文件操作方式
2006/11/19 PHP
使用php清除bom示例
2014/03/03 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
实例讲解python中的协程
2018/10/08 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
python 实现单例模式的5种方法
2020/09/23 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
python中的插入排序的简单用法
2021/01/19 Python
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
《假如》教学反思
2014/04/17 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
Python实现制作销售数据可视化看板详解
2021/11/27 Python
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript