最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api。
百牛信息技术bainiu.ltd整理发布于博客园
大家可以先看官方文档微信小程序API
再给大家提供一个开发工具下载地址小程序开发工具
最简单的用法如下(以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)
}
})
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
下面我们把请求写在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
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
其中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
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
这时这个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)
});
}
})
微信小程序网络请求wx.request请求的更多相关文章
-
微信小程序:使用wx.request()请求后台接收不到参数
问题描述: 微信小程序:wx.request()请求后台接收不到参数,我通过wx.request()使用POST方式调用请求,参数传递不到后台 解决方案: Content-Type': 'applic ...
-
【微信小程序】调用wx.request接口需要注意的问题
写在前面 之前写了一篇<微信小程序实现各种特效实例>,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题.总的来说,收获了不少吧! 现在项目已经完成,还是要陆陆续续 ...
-
微信小程序 在使用wx.request时显示加载中
微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.re ...
-
微信小程序开发 [05] wx.request发送请求和妹纸图
1.wx.request 微信小程序中用于发起网络请求的API就是wx.request了,具体的参数太多,此处就不再一一详举了,基本使用示例如下: wx.request({ url: 'test.ph ...
-
关于微信小程序遇到的wx.request({})问题
域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...
-
一,前端---关于微信小程序遇到的wx.request({})问题
域名请求错误问题 当我们在编写小程序,要发送请求时,wx.request({})时或许会遇到如下的问题: 一:这是因为微信小程序的开发中,域名只能是https方式请求,所以我们必须在小程序微信公众平台 ...
-
微信小程序--后台交互/wx.request({})方法/渲染页面方法 解析
小程序的后台获取数据方式get/post具体函数格式如下:wx.request({}) data: { logs:[] }, onLoad:function(){ this.getdata(); } ...
-
微信小程序填坑,wx.request() 内调用setData()方法错误的解决办法
再方法内添加一行代码,把this对象赋值给给一个变量供success()方法内调用 核心代码: var v = this.txt; 完整示例 abc:function(e){//该函数用于和后台交互 ...
-
【小程序】调用wx.request接口时需要注意的问题
写在前面 之前写了一篇<微信小程序实现各种特效实例>,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题.总的来说,收获了不少吧! 现在项目已经完成,还是要陆陆续续 ...
-
微信小程序 网络请求之re.request 和那些坑
微信小程序有四种网络请求类型,下面只详细介绍普通HTTPS请求(wx.request) 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...
随机推荐
-
Java演算法之堆排序(HeapSort)
import java.util.Arrays; publicclass HeapSort { inta[]={49,38,65,97,76,13,27,49,78,34,12,64,5,4,62,9 ...
-
DSP中.gel文件的作用
GEL是CCS提供的一种解释语言,使用该语言写出的GEL,函数具有两在功能,一是配置CCS工作环境,二是直接访问目标处理器DSP(包括DSP软/硬仿真器).用户可以使用GEL函数完成类似于宏操作的自动 ...
-
Centos6.6下安装MariaDB步骤,利用yum进行安装
1.在/etc/yum.repos.d/下建立MariaDB.repo文件 可以在Win下编辑好此文件,然后通过SSH远程复制过去. 2.MariaDB.repo内容要根据MariaDB官方提供的re ...
-
OpenJudge 2756 二叉树
1.链接地址: http://bailian.openjudge.cn/practice/2756/ 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 如 上图所示,由正整数1 ...
-
apache开源项目--ibatis
iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目.最初侧重于密码软件的开发,现在是一个基于Java的持久层框架.i ...
-
MVC1笔记
/// ///直接返回 字符串的 Action方法,适用于 不需要返回大量 html代码的业务(类似于一般处理程序) /// public string Index() { return " ...
-
windbg Symbol file path
SOS是一个调试器扩展,用于调试.NET应用程序.它提供了一组非常丰富的命令,这些命令使开发人员可以对CLR进行深入分析,并且有助于找出应用程序中各种复杂错误的原因. 由于SOS能够提供CLR内部 ...
-
JavaEE XML SAX解析
SAX解析XML @author ixenos SAX解析工具 SAX解析工具- Sun公司提供的.内置在jdk中.org.xml.sax.* 核心的API: SAXParser类: 用于读取和解析 ...
-
iOS探究UITableView的内部代码,仿UITableView自定义
大家都知道UITableView,最经典在于循环利用,这里我自己模仿UITableView循环利用,写了一套自己的TableView实现方案,希望大家看了我的文章,循环利用思想有显著提升. 研究UIT ...
-
亚马逊 amazon connect(呼叫中心)
背景 公司为提高客服部门沟通效率对接电话呼叫中心,调研后选择了亚马逊的Amazon Connect服务,因为是国外业务没有选择用阿里云,怕有坑. Amazon Connect后台 需要在后台创建“联系 ...