微信小程序使用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.ajax)
Nov 19 Javascript
javascript GUID生成器实现代码
Oct 31 Javascript
JavaScript 滚轮事件使用说明
Mar 07 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
浅谈javascript回调函数
Dec 07 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
微信小程序实现滑动操作代码
Apr 23 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
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
JS实现简单的Canvas画图实例
2013/07/04 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
iconfont的三种使用方式详解
2018/08/05 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
centos6.4下python3.6.1安装教程
2017/07/21 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
在Python中增加和插入元素的示例
2018/11/01 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
Java程序员面试题
2013/07/15 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
工程承包协议书
2014/04/22 职场文书
公司规章制度范本
2015/08/03 职场文书
课题研究阶段性总结
2015/08/13 职场文书
贷款担保书范本
2015/09/22 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python