微信小程序(三):网络请求
前文讲配置的时候我们说过,开发小程序时可以选择有 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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
微信小程序 网络请求API详解
wx.request(OBJECT)发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 效果图: net.js Page({ data:{ result:{}, }, onLoad:function(options){ this.getDate('http://baobab.wandoujia.com/api/v2/feed?num=2'); }, /** * 网络请求的函数:接收一个URL参数 */ getDate:function(URL){ var
-
微信小程序之网络请求简单封装实例详解
微信小程序之网络请求简单封装实例详解 在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request
-
微信小程序 网络请求(GET请求)详解
微信小程序 网络请求 GET 微信小程序开发中网络请求必不可少,今天说说最简单的请求.后续会尝试上传下载,Socket这些. 1.一个微信小程序,同时只能有5个网络请求连接. 这个规定应该是微信为了保证用户体验制定的,毕竟是小程序. 2.wx.request(OBJECT) 参数说明: 微信小程序支持GET,POST等请求.用method可以设置. 以下是GET请求的代码: <span style="font-size:18px;">//rate.js //获取应用实例
-
微信小程序网络请求wx.request详解及实例
微信小程序网络请求wx.request详解及实例 如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR
-
微信小程序 POST请求(网络请求)详解及实例代码
微信小程序 POST请求 微信小程序开发中网络请求必不可少.GET.POST请求是最常用的.GET请求,POST请求的时候有好几个坑.我已经为大家填好了. <img src="http://img.blog.csdn.net/20161017170933243?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Cente
-
微信小程序 网络请求(post请求,get请求)
微信小程序 网络请求 1.post请求: onLoad: function() { that = this; wx.request( { url: "url", header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data: {}, complete: function( res ) { console.log(res
-
微信小程序网络请求的封装与填坑之路
以前写过一篇关于微信小程序上拉加载,上拉刷新的文章,今天写的是关于小程序网络请求的封装. 在这里首先声明一个小程序文档的bug,导致大伙们在请求的时候,服务器收到不到参数的问题 示例代码: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.lo
-
微信小程序中网络请求缓存的解决方法
需求 提交小程序审核时,有一个体验测评,产品让我们根据小程序的体验测评报告去优化小程序. 其中有一项是网络请求的优化,给我们出了很大的难题. 文档中是这样解释的:3分钟以内同一个url请求不出现两次回包大于128KB且一模一样的内容 看到这个问题的时候,首先想到的是在响应头上加上cache-control,经过测试发现小程序并不支持网路请求缓存.搜索发现官方明确答复,小程序不支持网络请求缓存:wx.request不支持http缓存 既然官方不支持网络请求缓存,那只能自己想办法解决这个问题了. 先
-
微信小程序设置http请求的步骤详解
http请求介绍 HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求信息和服务,HTTP目前协议的版本是1.1.HTTP是一种无状态的协议,无状态是指Web浏览器和Web服务器之间不需要建立持久的连接,这意味着当一个客户端向服务器端发出请求,然后Web服务器返回响应(response),连接就被关闭了,在服务器端不保留连接的有关信息.HTTP遵循请
-
微信小程序之GET请求的实例详解
微信小程序之GET请求的实例详解 学习前端的人应该都会使用ajax的get请求数据,那么在微信小程序里怎样实现get请求呢?下面我就给大家演示一下简单的get请求. 先上代码: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', onLoad: function () { var that = this wx.request({ url: 'http://apis.baidu.com/heweat
-
微信小程序 封装http请求实例详解
微信小程序 封装http请求 最近看了一下微信小程序,大致翻了一下,发现跟angular很相似的,但是比angular简单的很多具体可参考官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=2017112 下面将封装http请求服务部分的服务以及引用部分 // 本服务用于封装请求 // 返回的是一个promisepromise var sendRrquest = function (ur
-
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
本文实例讲述了微信小程序ajax实现请求服务器数据及模版遍历数据功能.分享给大家供大家参考,具体如下: 昨天下载了一个微信小程序的开发者工具,大概看了一下文档,简单的用他的方法实现了ajax请求. 微信小程序文档地址: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl 头部标题和底部tab配置都在 app.json文件中,底部tab位最少两个,最多五个.下面是app.json文件代码和相关注释 { &qu
-
微信小程序设置全局请求URL及封装wx.request请求操作示例
本文实例讲述了微信小程序设置全局请求URL及封装wx.request请求操作.分享给大家供大家参考,具体如下: app.js: App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * method: 请求方式 * url: 请求地址 * data: 要传递的参数 * callback: 请求成功回调函数 * errFun: 请求失败回调函数 **/ wxRequest(metho
-
微信小程序获取网络类型的方法示例 原创
本文实例讲述了微信小程序获取网络类型的方法.分享给大家供大家参考,具体如下: 这里主要演示通过wx.getNetworkType获取当前网络类型的操作方法.代码如下: index.js: Page({ /** * 页面的初始数据 */ data: { netType:'' }, /** * 生命周期函数--监听页面加载 */ onLoad: function () { var that = this; try { wx.getNetworkType({ success: function(res
-
mpvue微信小程序的接口请求fly全局拦截代码实例
这篇文章主要介绍了mpvue微信小程序的接口请求fly全局拦截代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 业务要求: 需要进入页面时就要游客登陆拿到token: 之后的接口都是需要这个token: 其他操作则需要授权登陆,此时的token已失效: token过久之后会过期: 业务实现: 1.全局拦截 fly.interceptors.request.use(request => { const token = storage.get
-
微信小程序HTTP接口请求封装的实现
最近在学习小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,我的项目后端是使用的Java SSM框架,wx.request的URL就是后端提供的接口.在封装的时候我在网上看了很多篇博客,90%以上的全都是直接在success回调函数中直接打印返回值console.log(res.data)这个当然是没有问题的,但是我们都知道微信小程序的数据是实现数据绑定的,这一点和Vue框架很像,而在Vue框架的JS文件中我们可以通
随机推荐
- AngularJS折叠菜单实现方法示例
- 9种python web 程序的部署方式小结
- Redis服务器的启动过程分析
- bat自动删除指定文件夹下前几天的文件的代码
- xcode8 关闭控制台不打印不信息的解决方法(图文详解)
- ASP.NET 2.0 程序安全的基础知识
- PHP中利用sleep函数实现定时执行功能实现代码
- PHP session文件独占锁引起阻塞问题解决方法
- Android系统自带样式 (android:theme)
- node.js中的console.time方法使用说明
- Linux 管理员手册(7)
- linux 服务器安全设置教程
- android随机生成圆形云标签效果
- javascript弹出带文字信息的提示框效果
- Java正则表达式的语法及示例解析
- C#读取Excel并转化成XML的方法
- Python中最大递归深度值的探讨
- python实现简易版计算器
- python之验证码生成(gvcode与captcha)
- Libgdx解决部分Android机型锁屏崩溃的方法