微信小程序使用request网络请求操作实例


Posted in Javascript onDecember 15, 2017

本文实例讲述了微信小程序使用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,包括网络,媒体,数据等,也提供了很多组件,使开发小程序变得很方便。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
vue中实现高德定位功能
Dec 03 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 #Javascript
Angular中管道操作符(|)的使用方法
Dec 15 #Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 #Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 #Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 #Javascript
JavaScript原生实现观察者模式的示例
Dec 15 #Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 #Javascript
You might like
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
js 获取服务器控件值的代码
2010/03/05 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
jQuery.datatables.js插件用法及api实例详解
2016/10/28 Javascript
js初始化验证实例详解
2016/11/26 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
介绍一下sql server的安全性
2014/08/10 面试题
大学四年学习的自我评价分享
2013/12/09 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
社区节水倡议书
2015/04/29 职场文书
小学生表扬稿范文
2015/05/05 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS