微信小程序wx.request接口

wx.request是小程序客户端与服务器端交互的接口

HTTPS 请求

一个微信小程序,只能同时(同时不能大于5个)有5个网络请求

wx.request(OBJECT)

发起网络请求

url
data
header
method
dataType
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success: function(res) {
console.log(res.data)
}
})

四种网络请求:

(wx.request)

(wx.uploadFile)

(wx.downloadFile)

(wx.connectSocket)

var request = {
url: '',
data: {},
method: '',
success: function (res) {
},
fail: function () {
},
complete: function () {
}
}

wx.openSetting 来跳转到设置授权界面

/* index.js */
// 若有用户信息存在则继续
Page({
onLoad () {
wx.getStorage({
key: 'userinfo',
success: (res) => {
this.setUserinfo(res)
},
fail: (res) => {
api.login().then((res) => {
this.setUserinfo(res)
}).catch(e => {
if (e.errMsg && e.errMsg === 'getUserInfo:fail auth deny') {
this.setData({
isauth: false
})
}
})
}
})
},
toSetting() {
wx.openSetting({
success: (res) => {
this.setData({
isauth: res.authSetting['scope.userInfo']
})
if (res.authSetting['scope.userInfo']) {
api.login().then((res) => {
this.setUserinfo(res)
})
}
}
})
}
})
// setUserinfo 就是对用户信息做一下处理 不具体展开了 /* index.wxml */
<view class="unauth" wx:if="{{!isauth}}">
<image class="unauth-img" src="../../images/auth.png"></image>
<text class="unauth-text">检查到您没打开授权</text>
<button class="color-button unauth-button" bindtap="toSetting">去设置</button>
</view>
<view class="container" wx:else>
...
</view>
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)
} }) }

服务器设置:

上传文件

// Content-type为multipart/form-data
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)
}
})
}

下载文件

function downloadFile(url,typ,success){
wx.downloadFile({
url:url,
type:type,
success:function(res){
if(success){
success(res.tempFilePath)
}
},
fail:function(err){
console.log(err)
}
})
}
function svaeFile(tempFile,success){
wx.saveFile({
tempFilePath:tempFile,
success:function(res){
var svaedFile=res.savedFilePath
if(success){
success(svaeFile)
}
}
})
}

微信小程序wx.request接口的更多相关文章

  1. 监控微信小程序wx.request请求失败

    在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...

  2. 坑:微信小程序wx.request和wx.uploadFile中传参数的区别

    微信小程序中通过组件<form>提交表单的时候,在js中通过e.detail.value得到所提交表单的json格式数据.一般提交表单我们都是通过wx.request请求,提交表单数据,通 ...

  3. 微信小程序 wx.request

    onLoad: function () { var that = this console.log('https://free-api.heweather.com/s6/weather?locatio ...

  4. 微信小程序wx.request请求用POST后台得不到传递数据

    微信小程序的wx.request请求,method设为POST并向后台传递数据,但从后台返回的信息来看后台并没有获得传递的数据 wx.request({              url: 'url' ...

  5. 微信小程序wx.request请求服务器json数据并渲染到页面

    [原文出自]: https://blog.csdn.net/weixin_39927850/article/details/79766259 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更 ...

  6. 微信小程序- wx.request请求不到数据

    小程序官方文档手册 https://mp.weixin.qq.com/debug/wxadoc/dev/ 小程序开发问答社区 http://www.henkuai.com/forum.php wx.r ...

  7. 微信小程序wx.request的简单封装

    前言 之前写小程序,每次请求后台时都直接调用原生的API,wx.request,每次都要写url,data,回调函数等,正好前段时间,小程序项目需要添加新内容,趁此机会,做一个封装的请求工具,比较简单 ...

  8. 微信小程序wx.request POST获取不到数据解决办法

    get //发起请求     wx.request({       url: 'http://www.xiaochengxu.com/home/index/curd', //仅为示例,并非真实的接口地 ...

  9. 微信小程序 wx.request POST请求------中文乱码问题

    问题: 一个简单的表单,提交后台返回数据“提交成功”. 以为没问题了,但是没过多久后台小哥就问为啥那么多乱码,找了很久原因,发现在提交的时候就已经乱码了. 嗯,前端问题,然后测试GET/POST方法. ...

随机推荐

  1. ICSE 2018 论文

    仅简单分析自己感兴趣的论文. 9.6 Million Links in Source Code Comments: Purpose, Evolution, and Decay 分析了 source c ...

  2. 服务管理之mysql基础

    目录 mysql基础 1. 关系型数据库介绍 1.1 数据结构模型 1.2 RDBMS专业名词 2. mysql安装与配置 2.1 mysql安装 2.2 mysql配置 3. mysql的程序组成 ...

  3. react-01

    比较了半天VUE.Angular.React,最终选择React,下面从几个例子开始React的学习,先从单个的index.html,引用react.js开始 一.最简单的纯JS的代码 <!DO ...

  4. oracle 索引提升查询速度, in 和 exist 效率

    做记录: 今天有一个有153万条数据的表,发现查询很慢: select count(y) as transfereeNum,x from t_ast_subject_invest_order GROU ...

  5. Player2.0

    由于上次做的播放器实在是有点丑,加之这期间学习了许多关于页面排版的东西,这次做第二次作业就重新来了一遍“换汤不换药”的操作.其实刚开始看到的作业要求的时候,有点傻眼猫咪,但是做到现在这个程度,本人也是 ...

  6. npm -S -D -g i 有什么区别

    npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象  //开发环境能使用,生产环境也能使用or ...

  7. Linux 第十五天

    2)环境变量:这种变量中主要保存的是和系统操作环境相关的数据. export 变量名=变量值    设置环境变量 env                     查询变量 unset变量名       ...

  8. mysql 8 windows 下安装

    1.下载 mysql8 需要下载 window的 zip版本 2.解压 D:\software\mysql\mysql-8.0.16-winx64 2.在这个目录下创建一个 my.ini 的文件 [m ...

  9. ubuntu 安装vue+element

    1.安装npm sudo apt install npm 检测安装npm -v 因为npm安装软件慢,可设置淘宝镜像 npm config set registry https://registry. ...

  10. Cache高速缓冲存储器

    Cache的命中率:命中Cache的次数比总访问次数 平均访问时间:t(Cache)X命中次数+t(未命中)X未命中次数 Cache与主存的映射方式: 直接映射 全相联映射 组相联映射 图片来源:ht ...