最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api。

官方参数说明如下

OBJECT参数说明:

参数名 类型 必填 说明
url String 开发者服务器接口地址
data Object、String 请求的参数
header Object 设置请求的 header , header 中不能设置 Referer
method String 默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success Function 收到开发者服务成功返回的回调函数,res = {data: '开发者服务器返回的内容'}
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

最简单的用法如下(以POST请求为例)

  bindSearchChange:function(e){
var keyword = e.detail.value;
wx.request({
url:'xxxxxxxxx',
data:{},
header: {'Content-Type': 'application/json'},
success: function(res) {
console.log(res)
}
})
}

下面我们把请求写在service文件下的http.js文件中,代码如下

 var rootDocment = 'hxxxxx';//你的域名
function req(url,data,cb){
wx.request({
url: rootDocment + url,
data: data,
method: 'post',
header: {'Content-Type': 'application/json'},
success: function(res){
return typeof cb == "function" && cb(res.data)
},
fail: function(){
return typeof cb == "function" && cb(false)
}
})
} module.exports = {
req: req
}

其中module.exports是将req方法暴露出去使得别的文件中可以使用该方法,由于js函数是异步执行的,所以return 的是回调函数,而不是具体的数据

为了其他文件方便调用此方法,我们在根目录的app.js文件中将其注册成为全局函数,如下

 //app.js
var http = require('service/http.js')
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
},
func:{
req:http.req
}
})

这时这个req就是全局的了,在调用时我们可以使用getApp.func.req()来调用,具体如下

 var app = getApp()
Page({
data: { },
onLoad: function (opt) {
//console.log(opt.name)
app.func.req('/api/get_data',{},function(res){
console.log(res)
});
}
})

微信小程序提供了很多api,包括网络,媒体,数据等,也提供了很多组件,使开发小程序变得很方便。

微信小程序request请求实例,网络请求。的更多相关文章

  1. 微信小程序request(ajax)接口请求封装

    微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...

  2. 微信小程序之跳转、请求、带参数请求小例子

    wx.request(OBJECT) wx.request发起的是 HTTPS 请求.一个微信小程序,同时只能有5个网络请求连接. 具体参数说明参看微信小程序官方文档-发起请求. 例: //当页面加载 ...

  3. 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作

    爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...

  4. 微信小程序request请求的封装

    目录 1,前言 2,实现思路 3,实现过程 3.1,request的封装 3.2,api的封装 4,实际使用 1,前言 在开发微信小程序的过程中,避免不了和服务端请求数据,微信小程序给我们提供了wx. ...

  5. 微信小程序request同步请求

    今天在搞微信小程序的时候顺手用了async,await死活不起作用,后来查了一下子,竟然不支持,那没办法就换了一种实现wx.request同步请求的方案 祭出promise来搞一搞,下面直接贴代码,简 ...

  6. 微信小程序request请求之GET跟POST的区别

    1.GET 例子: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content ...

  7. 微信小程序request请求动态获取数据

    微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:909 ...

  8. 微信小程序开发中的http请求总结

    在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...

  9. 前端笔记之微信小程序(三)GET请求案例&文件上传和相册API&配置https

    一.信息流小程序-GET请求案例 1.1服务端接口开发 一定要养成接口的意识,前端单打独斗出不来任何效果,必须有接口配合,写一个带有分页.关键词查询的接口: 分页接口:http://127.0.0.1 ...

随机推荐

  1. pacman 包管理器相关设定

    pacman 包管理器相关设定 使用国内源 sudo pacman-mirrors -i -c China -m rank 设定 archlinuxcn 源 编辑/etc/pacman.conf,末尾 ...

  2. pip配置永久国内源

    1.windows配置方式: (1)打开文件资源管理器 --------在地址栏中输入 %appdata% (2)手动创建一个文件夹叫做 pip (3)在pip的文件夹里面新建一个文件 pip.ini ...

  3. 卸载mysql时,提示libmysqlclient.so.16()(64bit) is needed by (installed) postfix

    卸载时,提示错误,用这个命令就可以rpm -e --nodeps mysql-libs-5.1.73-5.el6_6.x86_64(这个是自己要卸载的版本) [root@unaryhost dev]# ...

  4. Vue——解决移动端键盘弹起导致的页面fixed定位元素布局错乱

    最近做了一个移动端项目,页面主体是由form表单和底部fixed定位的按钮组成,当用户进行表单输入时,手机软键盘弹起,此时页面的尺寸发生变化,底部fixed定位的元素自然也会上移,可能就会覆盖页面中的 ...

  5. EAP认证

    EAP信息交换: 上图中展示的是OTP(一次性密码)实现EAP交换过程,具体的EAP交换过程如下: 步骤1:请求方向认证方发送EAPOL-Start消息,通知对方已经做到了认证准备(注意:若会话由认证 ...

  6. vscode vue js 开发插件配置

    安装 vetur { // 自动补全触发范围---双引号内的字符串也可以触发补全 "editor.quickSuggestions": { "other": t ...

  7. JSP页面中关于<c:if test="${...}"><c:if>标签的用法

    代码如下: <td class="showTd_HK" align="center"> <c:if test="${(rwyy01. ...

  8. 刚下载好的 vscode 不能运行,一片黑 以及终端不能输入 解决办法

    1.鼠标右键vscode快捷方式点击属性,选择兼容性,勾选以兼容模式运行,下拉列表调整为windows vista (service pack 1)即可解决. 2.如果打开终端不能输入命令,首先点击属 ...

  9. dpkg 命令

    dpkg 是Debian Package的简写,是为Debian 专门开发的套件管理系统,方便软件的安装.更新及移除.所有源自Debian的Linux发行版都使用dpkg,例如Ubuntu.Knopp ...

  10. 「AHOI2014/JSOI2014」奇怪的计算器

    「AHOI2014/JSOI2014」奇怪的计算器 传送门 我拿到这题首先是懵b的,因为感觉没有任何性质... 后来经过同机房dalao的指导发现可以把所有的 \(X\) 放到一起排序,然后我们可以发 ...