在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求。

  • 普通HTTPS请求(wx.request)
  • 上传文件(wx.uploadFile)
  • 下载文件(wx.downloadFile)
  • WebSocket通信(wx.connectSocket)

这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主

设置域名

要微信小程序进行网络通信,必须先设置域名,不然会出现错误:

URL 域名不合法,请在 mp 后台配置后重试

需要在微信公众平台的小程序中设置域名。
在微信小程序的设置界面可以看到设置选项:

选择开发设置

开发设置

可以看到服务器设置:

服务器设置

在这里可以设置对应四种网络访问的域名,每一种类型的网络请求需要设置一个域名,注意如果在这里设置域名为https://example.com/api/,那么https://example.com/api是无法调用的,必须加上后面/

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-typemultipart/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)
} }) }

其中的urlheadersuccessfail以及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,completewx.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结束的回调

超时的设置

app.js中调整设置:

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

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

以下是我的小作品和开发入门文章,希望对你有帮助。

天气小程序实战

微信小程序开发中的http请求总结的更多相关文章

  1. 总结微信小程序开发中遇到的坑

    总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...

  2. 解决微信小程序开发中wxss中不能用本地图片

    微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...

  3. 微信小程序开发中的二三事之网易云信IMSDK DEMO

    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...

  4. 关于微信小程序开发中遇到的缺少game.json问题的解决

    一.小程序开发的两种选项 ①小游戏开发:内部对应的入口配置文件为game.json丶game.wxml之类的文件或者项目. ②小程序开发:内部对应的入口配置文件为app.json丶app.wxml之类 ...

  5. 微信小程序开发中如何实现侧边栏的滑动效果?

    原文链接:https://mp.weixin.qq.com/s/7CM18izpZqf0oc0D75IGmQ 1 概述 在手机应用的开发中侧边栏滑动是很常见的功能,当然在小程序中也不会例外,很多特效还 ...

  6. 在微信小程序开发中使用Typescript

    Typescript的优势咱不需要赘述太多,有兴趣可以参考(https://www.typescriptlang.org/).今天给大家分享一下如何在微信小程序(或者其他同类小程序)开发中使用Type ...

  7. 【小程序开发】微信小程序开发中遇到的那些坑...

    第一坑: 设置了三个tabBar,却默认显示第二个,不能展示我的第一个[首页]. "list": [{ "pagePath":"page/KTGJ/i ...

  8. [技术博客]微信小程序开发中遇到的两个问题的解决

    IDE介绍 微信web开发者工具 前端语言 微信小程序使用的语言为wxml和wss,使用JSON以及js逻辑进行页面之间的交互.与网页的html和css略有不同,微信小程序在此基础上添加了自己的改进, ...

  9. 微信小程序开发中怎么设置转发(分享)的信息

    如果什么都不设置,转发时默认名称是小程序的名称,转发的图片显示的是当前页面的截图,如图一 如何在自定义转发信息呢? 在进行转发的页面中: Page({ onShareAppMessage: funct ...

随机推荐

  1. Java如何打印日志

    以下为<正确的打日志姿势>学习笔记. 什么时候打日志 1.程序出现问题,只能通过 debug 功能来定位问题,很大程度是日志没打好.良好的系统,通过日志就能进行问题定位. 2.if-els ...

  2. 中文字体压缩器-解决css引入的字体太大的问题

    字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...

  3. Emacs key bindings for vim users

    Emacs key bindings for vim users | Scarletsky 盒子 盒子 博客 分类 标签 关于 RSS 搜索 文章目录 简介 Emacs 是一个文本编辑器,号称是伪装成 ...

  4. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  5. PS4游戏将登陆PC:一曲属于主机的悲歌

    ​​ ​ 曾经,红白机.PS游戏机等成为一代人难以磨灭的记忆.而随后的索尼PS3.微软Xbox 360.任天堂Wii U等,也称霸了次时代主机时代,成为家庭娱乐的中心.但面对着依托于PC和智能移动终端 ...

  6. LeetCode 225题用队列实现栈(Implement Stack using Queues) Java语言求解

    链接 https://leetcode-cn.com/problems/implement-stack-using-queues/ 思路 首先演示push()操作:将元素依次进入队1,进入时用top元 ...

  7. Spark ML机器学习库评估指标示例

    本文主要对 Spark ML库下模型评估指标的讲解,以下代码均以Jupyter Notebook进行讲解,Spark版本为2.4.5.模型评估指标位于包org.apache.spark.ml.eval ...

  8. java 初探-猜数字

    学习Java而编写的猜数字的程序代码. /** * */ package org.literal.test; import java.util.Scanner; /** * @author liter ...

  9. SQL基本操作总结

    1.SQL简介 结构化查询语言 (层次模型,网状模型,关系模型) 关系模型是目前的主流 (Oralce,mysql mssql ) SQL标准:ANSI (1992 1997 2002 ISO) 方言 ...

  10. python2.7.6安装easy_install (windows 64 环境)

    1.复制以下代码保存到easy_install.py文件中(文件名可随意命名)并将该文件放到python的安装路径中(如:D:\Python27) #!/usr/bin/env python &quo ...