微信小程序request请求实例,网络请求。
最近微信小程序开始开放测试了,小程序提供了很多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请求实例,网络请求。的更多相关文章
- 微信小程序request(ajax)接口请求封装
微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...
- 微信小程序之跳转、请求、带参数请求小例子
wx.request(OBJECT) wx.request发起的是 HTTPS 请求.一个微信小程序,同时只能有5个网络请求连接. 具体参数说明参看微信小程序官方文档-发起请求. 例: //当页面加载 ...
- 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作
爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...
- 微信小程序request请求的封装
目录 1,前言 2,实现思路 3,实现过程 3.1,request的封装 3.2,api的封装 4,实际使用 1,前言 在开发微信小程序的过程中,避免不了和服务端请求数据,微信小程序给我们提供了wx. ...
- 微信小程序request同步请求
今天在搞微信小程序的时候顺手用了async,await死活不起作用,后来查了一下子,竟然不支持,那没办法就换了一种实现wx.request同步请求的方案 祭出promise来搞一搞,下面直接贴代码,简 ...
- 微信小程序request请求之GET跟POST的区别
1.GET 例子: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content ...
- 微信小程序request请求动态获取数据
微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:909 ...
- 微信小程序开发中的http请求总结
在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...
- 前端笔记之微信小程序(三)GET请求案例&文件上传和相册API&配置https
一.信息流小程序-GET请求案例 1.1服务端接口开发 一定要养成接口的意识,前端单打独斗出不来任何效果,必须有接口配合,写一个带有分页.关键词查询的接口: 分页接口:http://127.0.0.1 ...
随机推荐
- python写入文件中遇到 UnicodeEncodeError: ‘gbk’ codec can’t encode character 错误的解决办法
在写入TXT文件时,某些页面总是报UnicodeEncodeError: ‘gbk’ codec can’t encode character错误,网上找了半天也没找到解决办法. 后来终于找到了解决办 ...
- 安卓开发:初步了解布局文件layout
了解完项目的目录结构,主要文件的作用之后. 了解完各常量文件的定义和使用之后,接下来的重头戏肯定是布局文件layout. 果然,网上关于“安卓布局文件layout”的各种介绍.解析.深入分析,等等资料 ...
- Windows下MySQL5.7版本中修改编码为utf-8
我们新安装的MySQL数据库默认的字符是 latin1 ,所以每次新建数据库都要修改字符,非常麻烦.所以我们必须将它改成UTF8字符的. 修改方法如下: 一.修改MySQL的my.ini 首先在 \P ...
- redis使用技巧小结
一.Redis 密码设置和查看密码redis没有实现访问控制这个功能,但是它提供了一个轻量级的认证方式,可以编辑redis.conf配置来启用认证.1.初始化Redis密码:在配置文件中有个参数:re ...
- 各大厂商发力5G新机,未来全球手机市场或将呈现新格局
随着5G商用将正式于今年开启落地,运营商和手机厂商都在为新一代网络制式积极做好准备.对于运营商来说,它们在不断增加5G基站的建设,让5G信号覆盖更广泛的范围.而对于手机厂商来说,它们在努力推出旗下的5 ...
- 同一台服务器lnmpa环境下配置ip或域名访问不同站点
1.配置域名访问 (1)添加虚拟主机 (2)nginx配置 cd /usr/local/nginx/conf/vhost vim zkadmin.zouke.com.conf (3)apache配置 ...
- ubuntu修改pip的官方源为豆瓣源
修改官方源为豆瓣源: 编辑配置文件, 如果没有, 新建一份(我这里没有): mkdir ~/.pipvim ~/.pip/pip.conf 添加内容如下: [global] index-url = h ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:设定大写文本
<!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...
- mybatis 多参数传递
参考: 1. MyBatis传入多个参数的问题 http://www.cnblogs.com/mingyue1818/p/3714162.html2. MyBatis报错 Parameter '0' ...
- keil遇到hardfault时原因的查找
当硬件仿真遇到hardfault会进入响应的中断软件陷阱中void HardFault_Handler(void),此时通过view-registers中的 1 如果STACK=MSP,则查看SP的堆 ...