图片来源网络,侵删
配置全局变量 (app.js 文件)
App({
globalData: {
requestUrl: "https://api.xxxxxx.com" // 网络接口全局变量
}
})
先新建一个公共文件 里面可以封装公共类
如:utils/util.js
function httpRequest(url, callBack) {
var _self = this;
wx.request({
url: url,
data: {},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
callBack(res.data); // 成功后回调方法
},
fail: function (erro) {
console.log(erro)
}
})
}
// 导出
module.exports = {
httpRequest: httpRequest
}
接下来 我们就 可以在页面中 调用网络请求方法了 !
调用前 先引用
var app = getApp();
var util = require(‘../../../utils/util.js’);
// 根据自己的项目路径引入
在 onLoad 生命周期函数里 发请求
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 提示 数据加载中
wx.showLoading({
title: '加载中',
})
// 后面是拼接的 url 参数
var dataUrl = app.globalData.httpRequest + "xxxxx";
util.httpRequest(dataUrl, _self.backData)
}
backData()
这个方法 是请求成功后 回调后的数据处理 , 这个方法大家可以先忽略,后续我会继续更新 !
最后数据请求成功后 , 我们要关闭 加载中提示
if (this.data.movies.length != 0 ){
setTimeout(function () {
wx.hideLoading()
})
}
movies
为数据返回后的集合 ,判断这个是否为 0 ,当不等于 0 时 ,说明接口已经请求成功 返回数据了,这个时候 我们就可以关闭 ,提示了 !