精华内容
下载资源
问答
  • 微信小程序网络请求

    万次阅读 2019-08-16 08:56:34
    每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名与进行网络通信。包括普通 HTTPS 请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile) 和 WebSocket 通信(wx.connectSocket...

    网络
    在小程序/小游戏中使用网络相关的 API 时,需要注意下列问题,请开发者提前了解。

    1. 服务器域名配置

    每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名与进行网络通信。包括普通 HTTPS 请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile) 和 WebSocket 通信(wx.connectSocket)。
    点击蓝色查看
    WebSocket 通信
    WebSocket 通信
    从基础库 2.4.0 开始,网络接口允许与局域网 IP 通信,但要注意 不允许与本机 IP 通信。

    从 2.7.0 开始,提供了 UDP 通信(wx.createUDPSocket),只允许跟同个局域网内的非本机 IP 通信。

    配置流程

    服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置,配置时需要注意:
    域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议;
    域名不能使用 IP 地址(小程序的局域网 IP 除外)或 localhost;
    可以配置端口,如 https://myserver.com:8080,但是配置后只能向 https://myserver.com:8080 发起请求。如果向 https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败。
    如果不配置端口。如 https://myserver.com,那么请求的 URL 中也不能包含端口,甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443 请求则会失败。
    域名必须经过 ICP 备案;
    出于安全考虑, api.weixin.qq.com 不能被配置为服务器域名,相关API也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中,通过服务器使用 getAccessToken 接口获取 access_token,并调用相关 API;

    对于每个接口,分别可以配置最多 20 个域名。

    1. 网络请求
      超时时间

      默认超时时间和最大超时时间都是 60s;
      超时时间可以在 app.json 或 game.json 中通过 networktimeout 配置。

    使用限制

    wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个;
    wx.connectSockt 的最大并发限制是 5 个。
    小程序进入后台运行后,如果 5s 内网络请求没有结束,会回调错误信息 fail interrupted;在回到前台
    之前,网络请求接口调用都会无法调用。
    

    返回值编码
    建议服务器返回值使用 UTF-8 编码。对于非 UTF-8 编码,小程序会尝试进行转换,但是会有转换失败的可能。
    小程序会自动对 BOM 头进行过滤(只过滤一个BOM头)。

    只要成功接收到服务器返回,无论 statusCode 是多少,都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断。

    跳过域名校验
    在微信开发者工具中,可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项,跳过服务器域名的校验。此时,在微信开发者工具中及手机开启调试模式时,不会进行服务器域名的校验。

    在服务器域名配置成功后,建议开发者关闭此选项进行开发,并在各平台下进行测试,以确认服务器域名配置正确。

    http请求

    使用wx.request可以发起一个http请求,一个微信小程序被限制为同时只有5个网络请求。

    function queryRequest(data){    
        wx.request({
            url:"https://example.com/api/",
            data:data,
            header:{
               // "Content-Type":"application/json"
            },
            success:function(res){
                console.log(res.data)
            },
            fail:function(err){
                console.log(err)
            }
    
        })
    
    }
    

    上面的代码会发送一个http get请求,然后打印出返回的结果。其中的参数也比较容易理解。

    url 服务器的url地址
    
    data 请求的参数可以采用String data:"xxx=xxx&xxx=xxx"的形式或者Object data:{"userId":1}的形式
    
    header 设置请求的header
    
    success 接口成功的回调
    
    fail 接口失败的回调
    

    另外还有两个参数没有在代码里:

    method http的方法,默认为GET请求
    
    complete 调用接口结束之后的回调,无论成功或者失败该接口都会被调用
    

    上传文件

    上传文件的api为wx.uploadFile,该api会发起一个http post请求,其中的Content-type为multipart/form-data。服务器端需要按照该Content-type类型接收文件,示例代码:

    function uploadFile(file,data) {
        wx.uploadFile({
            url: 'http://example.com/upload',
            filePath: file,
            name: 'file',
            formData:data,
            success:function(res){
                console.log(res.data)
            },
            fail:function(err){
                console.log(err)
            }
    
        })
    
    }
    

    其中的url,header,success,fail以及complete和普通的http请求是一样的。
    这里有区别的参数是:

    name文件对应的key,服务器端需要通过name参数获取文件
    
    formData http请求中可以使用的其他参数
    

    下载文件

    下载文件的api为wx.downloadFile,该api会发起一个http get请求,并在下载成功之后返回文件的临时路径,示例代码:

    function downloadFile(url,typ,success){
        wx.downloadFile({
            url:url,
            type:typ,
            success:function(res){
                if(success){
                    success(res.tempFilePath)
                }
            },
            fail:function(err){
                console.log(err)
            }
        })
    }
    

    其中的url,header,fail,complete和wx.uploadFile的参数使用是一致的,其中有区别的参数是:

    type:下载资源的类型,用于客户端自动识别,可以使用的参数image/audio/video

    success:下载成功之后的回调,以tempFilePath的参数返回文件的临时目录:res={tempFilePath:‘文件路径’}
    下载成功后的是临时文件,只会在程序本次运行期间可以使用,如果需要持久的保存,需要调用方法wx.saveFile主动持久化文件,实例代码:

    function svaeFile(tempFile,success){
        wx.saveFile({
            tempFilePath:tempFile,
            success:function(res){
                var svaedFile=res.savedFilePath
                if(success){
                    success(svaeFile)
                }
            }
        })
    

    }

    使用wx.saveFile保存临时文件到本地,提供给小程序下次启动时使用,其中的参数:

    tempFilePath 需要被保存文件的路径
    
    success 保存成功的回调,返回保存成功的路径,使用res.savedFilePath可以获取保存成功的路径
    
    fail 失败的回调
    
    complete结束的回调
    

    超时的设置

    在微信小程序开发:MINA中已经提到了在app.js中设置networkTimeout可以设置四种类型网络访问的超时时间:

    "networkTimeout":{
       "request": 10000,
       "connectSocket": 10000,
       "uploadFile": 10000,
       "downloadFile": 10000
    }
    

    这里设置的超时时间对应着四种类型的网络请求。

    展开全文
  • 主要介绍了微信小程序 网络请求API详解的相关资料,需要的朋友可以参考下
  • // 微信小程序网络请求封装 微信小程序网络请求封装

    // 微信小程序网络请求封装
    https://segmentfault.com/a/1190000014789969

    展开全文
  • 主要介绍了微信小程序网络请求封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 微信小程序 网络请求 GET 微信小程序开发中网络请求必不可少,今天说说最简单的请求.后续会尝试上传下载,Socket这些. 1.一个微信小程序,同时只能有5个网络请求连接。 这个规定应该是微信为了保证用户体验制定的,...
  • 微信小程序 网络请求

    2020-02-18 22:43:21
    网络请求 api->网络->发起请求 具体查看官网 wx.request({ url: '路径', header: { 'content-type': 'application/json' // 若访问豆瓣的接口,将json改为xml }, method:'GET/POST必须大写', success ...
    网络请求
    api->网络->发起请求
    具体查看官网
    
    wx.request({
      url: '路径', 
      header: {
        'content-type': 'application/json' // 若访问豆瓣的接口,将json改为xml
      },
      method:'GET/POST必须大写',
      success (res) {
        console.log(res.data)
      }
    })
    

    代码示例:
    js文件

    // pages/movie/movie.js
    var app=new getApp();
    Page({
      data: {
    
      },
      onLoad: function (options) {
    
        var now= '/v2/movie/in_theaters';
        var will ="/v2/movie/coming_soon";
        var hot ='/v2/movie/top250';
        this.http(now,5,this.callback);
        this.http(will, 3,this.callback);
        this.http(hot, 1, this.callback);
    
      },
      
      http:function(index,count,callback)
      {
      //发送网络请求
        wx.request({
          url: app.globalUrl.douban +index+"?start=0&count="+count+"&"+ app.globalUrl.apikey,
          method: "GET",
          header: {
            'content-type': 'application/xml' // 默认值
          },
          success(res) {
            console.log(res.data)
          }
        })
      },
      
      callback:function(res)
      {
        console.log(res);
      }
    
    })
    
    展开全文
  • 主要介绍了微信小程序 网络请求(post请求,get请求)的相关资料,需要的朋友可以参考下
  • 主要介绍了微信小程序网络请求实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 使用 Promise 封装的微信小程序网络请求
  • 主要介绍了微信小程序网络请求接口封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 主要介绍了微信小程序网络请求wx.request详解及实例的相关资料,需要的朋友可以参考下
  • 微信小程序网络请求的封装,提供了Get和Post方法。使用较为方便。其中也包含了选择图片并删除功能
  • 摘要: Fundebug的微信小程序错误监控插件更新至0.5.0,支持监控HTTP请求错误。接入插件接入Fundebug的错误监控插件非常简单,只需要下载fundebug.0.5.0.min.js,在app.js中引入并配置apikey:var fundebug = require...

    摘要: Fundebug的微信小程序错误监控插件更新至0.5.0,支持监控HTTP请求错误。

    接入插件

    接入Fundebug的错误监控插件非常简单,只需要下载fundebug.0.5.0.min.js,在app.js中引入并配置apikey:

    var fundebug = require('./libs/fundebug.0.5.0.min.js')

    fundebug.apikey = "API-KEY";

    获取apikey需要免费注册帐号并且创建项目。创建项目时语言请选择“微信小程序”。

    监控HTTP请求错误

    在小程序中,使用wx.request发起HTTP请求。

    以下两种情况我们将其视为HTTP请求错误:

    请求返回的statusCode不是2xx时

    fail回调函数被触发

    当错误发生时, Fundebug插件会将错误信息发送到后台服务器,并通知开发者。开发者登陆Fundebug网站,就可以查看到这样的错误信息:

    通过分析报错信息,开发者可以及时修复BUG,避免影响更多用户。

    filters:过滤不需要收集的错误

    通过配置filters属性,用户可以过滤掉一些不需要捕获的错误,例如:

    fundebug.filters = [

    {

    req:

    {

    url: /example\.com/,

    method: /^GET$/

    }

    }];

    这样,Fundebug插件将不会监控发送到example.com的GET请求错误。

    出于保护隐私,Fundebug在监控HTTP请求错误时,不会收集请求的body(即wx.request的data参数)。

    如何你希望收集HTTP请求错误的body的话,请将monitorHttpData属性设为true。

    fundebug.monitorHttpData = true;

    silentHttp:禁用HTTP请求监控

    如果你不希望监控HTTP请求错误的话,可以将silentHttp属性设为true:

    fundebug.silentHttp = true;

    展开全文
  • 微信小程序网络请求库插件,使用 Promise封装wx_network-master.zip
  • 需求提交小程序审核时,有一个体验测评,产品让我们根据小程序的体验测评报告去优化小程序。其中有一项是网络请求的优化,给我们出了很大的难题。...搜索发现官方明确答复,小程序不支持网络请求缓存:wx.req...
  • 微信小程序发布至今,其“不需要安装、随即随用、不需要卸载”的特点便深入公司企业和商家的心底。针对公司企业、商家和使用者而言怎么制作微信小程序,如何连接将来的所有商机,怎么制作微信小程序曾一度成为热门...
  • "networkTimeout": {"request": 6000,"downloadFile": 10000},一、在onLaunch运行任务如果超时,我把错误级别定为0,并转向错误页面wx.login({success(res) {...//发起网络请求wx.request({url:'https://**/index/z...
  • 微信小程序网络请求封装很简单,因为我需要在每个网络请求里面加入自己token、请求来源 等 ,以便于服务器做验证。 功能介绍 header :可以填写每次请求需要添加的信息到header Code判断:根据后台的请求code...
  • 微信小程序 网络请求报错 Cannot read property ‘setData’ of undefined;at api request success callback function 直接使用this时undefined类型
  • 微信小程序网络请求request局域网下的开发测试 关于网络请求微信小程序官方文档已经讲解的很清楚了,有一点官网没有提到的,就是局域网下开发测试时,要注意两点: 这两种情况都不需要在“微信公众...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,234
精华内容 493
关键字:

微信小程序网络请求

微信小程序 订阅