微信小程序使用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 相关文章推荐
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
javascript常用的方法分享
Jul 01 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
WebPack基础知识详解
Jan 16 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
vue页面跳转实现页面缓存操作
Jul 22 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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
Symfony2创建基于域名的路由相关示例
2016/11/14 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
angularjs封装$http为factory的方法
2017/05/18 Javascript
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
Python多进程分块读取超大文件的方法
2016/04/13 Python
深入解析Python中的上下文管理器
2016/06/28 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python3处理word文档实例分析
2020/12/01 Python
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
卫生系统先进事迹
2014/05/13 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL