小程序之封装（第一篇）

一、小程序中的各种封装

1.网络请求

utils/request.js: 核心的API请求接口类封装

POST请求方式：
function requestPostApi(url, params, sourceObj, successFun, failFun, completeFun) {
  requestApi(url, params, 'POST', sourceObj, successFun, failFun, completeFun)
}

GET请求方式：
function requestGetApi(url, params, sourceObj, successFun, failFun, completeFun) {
  requestApi(url, params, 'GET', sourceObj, successFun, failFun, completeFun)
}

POST和GET方式均可使用
function requestApi(url, params, method, sourceObj, successFun, failFun, completeFun) {
  if (method == 'POST') {
    var contentType = 'application/x-www-form-urlencoded'
  } else {
    var contentType = 'application/json'
  }
  wx.request({
    url: url,
    method: method,
    data: params,
    header: { 'Content-Type': contentType },
    success: function (res) {
      typeof successFun == 'function' && successFun(res.data, sourceObj)
    },
    fail: function (res) {
      typeof failFun == 'function' && failFun(res.data, sourceObj)
    },
    complete: function (res) {
      typeof completeFun == 'function' && completeFun(res.data, sourceObj)
    }
  })
}

module.exports = {
  requestPostApi,
  requestGetApi
}

参数：

url:接口路径
contentType：请求头设置
params:请求的参数 
sourceObj：指定来源对象
successFun：接口调用成功返回的回调函数
failFun： 接口调用失败的回调函数
completeFun：接口调用结束的回调函数(调用成功亦或失败都会执行该函数)

 使用（自己项目中的使用方式，粘贴给大家）：
 
 在app.js中引入request.js
 //app.js
    const request = require('./utils/request.js') //注意
    App({
      request: request, //注意
      onLaunch: function() {
        if (!wx.cloud) {
          console.error('请使用 2.2.3 或以上的基础库以使用云能力')
        } else {
          wx.cloud.init({  //此处使用了小程序云开发
            //获取调用api者的信息
            traceUser: true,
            //环境ID
            env: '***'
          })
        }
    
    })
 

---

 index.js（此处摘取自己项目中使用到的部分）
 
 //引入
var app = getApp();

 // 天气获取
getWeather() {
    let url = 'https://free-api.heweather.com/s6/weather';
    let params = { //参数
      location: app.globalData.defaultCity,
      key: app.globalData.config.weatherKey
    }
    //调用Get函数获取天气信息
    app.request.requestGetApi(url, params, this, this.weatherSucFun, this.weatherFailFun);
  },
  
  /* 接口调用成功返回的回调函数*/
  weatherSucFun(res) {//
    // console.log(res);
    app.globalData.weatherData = res.HeWeather6[0];
    this.setData({
      weatherData: app.globalData.weatherData.now, //今天天气情况数组 
      dress: res.HeWeather6[0].lifestyle[1], //生活指数
      today: res.HeWeather6[0].update.loc //当前时间
    });
  },
        
 /*天气接口调用失败的回调函数*/
  weatherFailFun(res) {
    console.log('weatherFailFun', res)
  },
       

2、用户提示

 //模态框提示封装(utils)
 
function showModal(titles, content) {
  wx.showModal({
    title: titles,
    content: content,
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}



//showToast

function showToast(titles, icon) {
  wx.showToast({
    title: titles,
    icon: icon,
    duration: 1500
  })
  setTimeout(function () {
    wx.hideLoading()
  }, 2000)
}

//引入
var utils = require('../utils/util.js');

//调用
utils.showToast('标题', '图标');
utils.showModal('标题', '内容');

---

好啦，今天就到这里了，希望大家有更好的的方法可留言亦或加微信

扫描下方二维码即可添加好友加群交流哦