微信小程序搭建mpvue+vant+flyio

導語

上一篇文章微信小程序搭建mpvue+vant已經介紹瞭如何搭起mpvue項目及引入vant，本篇文章繼續在它的基礎上，引入flyio，並作一些封裝，目的是爲了在小程序發起請求。

這時讀者會有些疑問，小程序已經有了request，爲何還用flyio？這不是造輪子嗎？我是這麼想的，其實如今無論是mpvue，仍是wepy都好像還不能完美編譯出微信小程序和h5版本。爲了之後應對老闆有建立h5版本的想法，咱們應該爲之後複用小程序代碼作好準備工做。既然h5也會有ajax，flyio也支持小程序和h5的，因此乾脆把flyio引進來，再作一些封裝，兩邊都能用，豈不美哉？

文章末尾，附文章教程步驟建立的項目mpvue+vant+flyio,須要學習的同窗，拿走不謝。

第一步：將flyio加入項目

個人項目路徑：/Users/hrz/myworkspace/lawyer-card-wxss

$ cd /Users/hrz/myworkspace/lawyer-card-wxss
$ cnpm i flyio -S --production
複製代碼

第二步：二次封裝

建立api文件夾，並在下面新建兩個文件api.js，httpRequest.js

api.js 用來給各頁面調用，是一個彙總各種ajax方法的集合

import requestService from './httpRequest'

const PROD_SERVICE = 'https://個人線上產品域名/lawyer-card-service'
const DEV_SERVICE = 'http://localhost:8081/lawyer-card-service'

/** * 根據開發環境返回接口url * @returns {string} */
function getSerive () {
  if (process.env.NODE_ENV === 'production') {
    return PROD_SERVICE
  } else {
    return DEV_SERVICE
  }
}

/** wx.request服務封裝 */
export default {

  /** * 檢查微信Token是否還生效 * @param data * @param callBack */
  checkToken (data, callBack, failCallBack) {
    requestService.sendRequest().url(getSerive() + '/auth/checkToken').method('GET').data(data).success(res => {
      callBack(res)
    }).fail(res => {
      failCallBack(res)
    }).send()
  }
}
複製代碼

httpRequest.js是對flyio對二次封裝，是ajax的核心

import {getStorageSync, hideLoading, showLoading, showNotify} from '../utils/index'

var Fly = require('flyio/dist/npm/wx')
var fly = new Fly()
// 設置超時
fly.config.timeout = 7000

// 添加請求攔截器
fly.interceptors.request.use((request) => {
  // 給全部請求添加自定義header
  const token = getStorageSync('token')
  request.headers['token'] = token
  return request
})

/** * request服務封裝 */
export default {
  sendRequest
}

function sendRequest () {
  return {
    _sucCallback: null,
    _failCallback: null,
    _method: 'GET',
    _data: {},
    _header: {'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'},
    _url: '',
    send: function () {
      showLoading({
        title: '加載中...'
      })

      fly.request(this._url, this._data, {
        method: this._method,
        headers: this._header
      })
        .then(res => {
          hideLoading()
          let error = httpHandlerError(res, this._failCallback)
          if (error) return
          this._sucCallback(res)
        })
        .catch((res) => {
          hideLoading()
          httpHandlerError(res, this._failCallback)
        })

      return this
    },
    success: function (callback) {
      this._sucCallback = callback
      return this
    },
    fail: function (callback) {
      this._failCallback = callback
      return this
    },
    url: function (url) {
      this._url = url
      return this
    },
    data: function (data) {
      this._data = data
      return this
    },
    method: function (method) {
      this._method = method
      return this
    },
    header: function (header) {
      this._header = header
      return this
    }
  }
}

/** * info 請求完成後返回信息 * callBack 回調函數 * errTip 自定義錯誤信息 */
function httpHandlerError (info, callBack) {
  hideLoading()
  /** 請求成功，退出該函數 能夠根據項目需求來判斷是否請求成功。這裏判斷的是status爲200的時候是成功 */
  let haveError = true
  let errTip
  if (info.status === 200) {
    if (info.data.code === undefined) {
      haveError = true
    } else if (info.data.code === 'success' || info.data.code === 0) {
      haveError = false
    } else {
      haveError = true
      errTip = info.data.msg
    }
  } else {
    errTip = '網絡請求出現了錯誤【' + info.status + '】'
    haveError = true
  }

  if (haveError) {
    /** 發生錯誤信息時，若是有回調函數，則執行回調 */
    if (callBack) {
      callBack(info)
    } else {
      showNotify(errTip)
    }
  }
  return haveError
}
複製代碼

你們看到，httpRequest.js裏引用一些工具類，其實裏面主要是一些加載的提示，及彈框。爲何我要把他放在工具類裏？正如我最開頭導語說的，爲了方便之後應對h5版本，H5版本的加載、彈框、操做緩存和小程序的代碼不同，因此我統一放在工具類裏管理了，之後要作h5開發，我只要改工具類就好了。下面是小程序裏工具類的代碼。

import Notify from 'vant-weapp/dist/notify/notify'

/** * 顯示頂部紅色通知 * 使用方法：調用時確保界面上有： * <van-notify id="van-notify"/> * @param msg * @param showTime */
export function showNotify (msg, showTime) {
  if (!showTime) {
    showTime = 3000
  }
  Notify({
    text: msg,
    duration: showTime
  })
}

/** * 從緩存裏獲取數據 * @param key * @return value */
export function getStorageSync (key) {
  return wx.getStorageSync(key)
}

/** * 顯示加載中 * @param data */
export function showLoading (data) {
  wx.showLoading(data)
}

/** * 隱藏加載中 */
export function hideLoading () {
  wx.hideLoading()
}

/** * 將數據保存到緩存 * @param key * @param value */
export function setStorageSync (key, value) {
  wx.setStorageSync(key, value)
}

export default {
  getStorageSync,
  setStorageSync,
  showLoading,
  hideLoading,
  showNotify
}

複製代碼

第三步：寫個Demo發送請求

<template>
 <div>
   {{msg}}
 </div>
</template>

<script>
 import Api from '../../apis/api'

 export default {
   data () {
     return {
       msg: null
     }
   },

   methods: {},

   onLoad () {
     let that = this
     let token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxIiwiaWF0IjoxNTU0MjA0NDI0LCJleHAiOjE1NTQ4MDkyMjR9.VdlhGXOxIA97_G_u_a3GJxmWdD9t_jb_a1aodTJ75ESNgxchx8M0mRBSx-s_er8Da4MzZY1zBW4UfY5ELC9fgA'
     Api.checkToken({'token': token}, function (res) {
       console.log(res)
       that.msg = res.data.msg
     })
   }
 }
</script>

<style scoped>
</style>

複製代碼

運行npm run dev起來，去小程序開發工具看效果

已經成功發送請求，仍是不錯的！

我建立了名字爲mpvue-vant-flyio項目，除了項目名稱不一樣，步驟都是相同的。項目源碼