小程序之封裝（第一篇）

一、小程序中的各種封裝

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('標題', '內容');

---

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

掃描下方二維碼即可添加好友加羣交流哦