频道栏目
首页 > 微信学院 > 微信公众平台开发 > 正文
微信小程序开发教程之全局变量及封装网络请求
2017-12-04 10:54:09      个评论    来源:lume博客  
收藏   我要投稿

微信小程序开发教程之全局变量及封装网络请求。 App({ globalData: { requestUrl: "https: api xxxxxx com " 网络接口全局变量 } }) 先新建一个公共文件 里面可以封装公共类 如:utils u。

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

点击复制链接 与好友分享!回本站首页
上一篇:微信小程序开发入门之布局的学习
下一篇:微信小程序之tabBar配置教程
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站