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

Posted 2022-06-06 blogsaspx

导语

上一篇文章微信小程序搭建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