如果你做过Angular或者Vue的话,你会发现,微信小程序跟他们有很多相似的地方,相比来说,小程序要简单一些。http请求的封装也是一样,废话不多说 ,直接上步骤。
1、创建一个http.js,代码如下:
let rootUrl = "http://www.baidu.com";//具体接口域名根据你的实际情况填写 function getData(url,data,cb){ wx.request({ url : rootUrl + url, data: data, method: 'post', header: { // "Content-Type": "json", //get请求时候 "Content-Type": "application/x-www-form-urlencoded" //POST请求的时候这样写 }, success: function(res){ return typeof cb == "function" && cb(res.data) }, fail: function(){ return typeof cb == "function" && cb(false) } }) } module.exports = { req : getData //暴露一个方法 }
这段代码有个坑:就是那个请求头header,如果是get请求
header{ "Content-Type": "json" }
如果是post请求
header{ "Content-Type": "application/x-www-form-urlencoded" //POST请求的时候这样写 }
2、在小程序app.js里配置全局函数
var http = require('http/http.js') //引入刚创建的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.getUserInfo({ withCredentials: false, success: function(res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }, globalData: { userInfo: null }, func:{ req:http.req //这里配置我们需要的方法 } })
3、在项目代码中调用方法
var app = getApp() ; Page({ data: { title:"111111" }, //事件处理函数 changeMenus: function(){ let postdata = { userId:12 } app.func.req('/abner/web/getUserByOpenId',postdata,(res)=>{ console.log(res) } }) } })