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


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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
深入浅析react native es6语法
Dec 09 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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加密解密类代码
2011/11/27 PHP
PHP采集腾讯微博的实现代码
2012/01/19 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python subprocess库的使用详解
2018/10/26 Python
Python初学者常见错误详解
2019/07/02 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
python代码如何注释
2020/06/01 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
经典导游欢迎词大全
2014/01/16 职场文书
三字经教学反思
2014/04/26 职场文书
优秀教师先进材料
2014/12/16 职场文书
会议主持词通用版
2019/04/02 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
Javascript的promise,async和await的区别详解
2022/03/24 Javascript
python实现双链表
2022/05/25 Python