微信小程序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 ...
随机推荐
- PyQt5设置图片格式及动画
1.缩放图片'''使用QImage.Scale(width,height)方法可以来设置图片'''from PyQt5.QtCore import *from PyQt5.QtGui import * ...
- 一行代码解决 sql语句 in传入数组变字符串
--数组 var arrs= ['test1','test2','test3'];--变字符串 var instring = "'"+arrs.join("','&quo ...
- Update(stage3):第1节 redis组件:10、redis集群
10.redis集群 1.redis集群的介绍 Redis 集群是一个提供在多个Redis节点之间共享数据的程序集. Redis 集群并不支持同时处理多个键的 Redis 命令,因为这需要在多个节点间 ...
- Nginx Rewrite域名及资源重定向!(重点)
第一步:搭建Nginx服务 第二步:修改主配置文件 [root@ns2 ~]# vim /usr/local/nginx/conf/nginx.conf user nginx nginx; work ...
- IDEA 解决 Maven 依赖冲突的高能神器,这一篇够不够?
1.何为依赖冲突 Maven是个很好用的依赖管理工具,但是再好的东西也不是完美的.Maven的依赖机制会导致Jar包的冲突.举个例子,现在你的项目中,使用了两个Jar包,分别是A和B.现在A需要依 ...
- Servlet 学习(九)
Listener 1.功能 Servlet 2.3 中新增加的另一个功能 作用是监听Java Web 程序中的事件 对应设计模式中的Listener 模式,当事件发生的时候会自动触发该事件对应的Lis ...
- 【转】CentOS6开启BBR加速
1.查看机器内核 BBR 算法需要 Linux 4.9 及以上的内核支持,所以想要使用该方式的需要先升级内核版本. 在 Cent OS 7 上的 Linux 内核是 3.10, 使用 uname -r ...
- Python中的进制表示方式及转换方法
在Python中,非十进制数字的表示方式为: 二进制:前面加0b,如0b1001 八进制:前面加0o,如0o3562 十六进制:前面加0x,如0x2af3 不同进制数字可直接进行数学计算,结果返回十进 ...
- JS - false 的 六种类型
document.write("--------------");document.write(!false);document.write("------------- ...
- 创建私有yum仓库
创建私有yum仓库