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


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 Study Notes 学习笔记(一)
Aug 04 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 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
hessian 在PHP中的使用介绍
2010/12/13 PHP
PHP获取url的函数代码
2011/08/02 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP常用技巧汇总
2016/03/04 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
asp 的 分词实现代码
2007/05/24 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
C#的几个面试问题
2016/05/22 面试题
会议邀请函范文
2014/01/09 职场文书
委托书的写法
2014/09/16 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
辞职信格式模板
2015/02/27 职场文书
企业计划生育责任书
2015/05/09 职场文书
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL