微信小程序-项目案例 (三)全局变量及封装网络请求

来源:互联网 发布:网络公关公司排行 编辑:程序博客网 时间:2024/05/16 16:04

1:配置全局变量 (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 时 ,说明接口已经请求成功 返回数据了,这个时候 我们就可以关闭 ,提示了 !

原创粉丝点击