微信小程序搭建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项目，除了项目名称不同，步骤都是相同的。项目源码

转载链接：https://www.jianshu.com/p/b308a89f8180