微信小程序之wepy自动化架构搭建（fly+wepy-plugin-replace）

前言

本文章秉着自动化工程项目的思想搭建的，基础架子彻底按照wepy官网搭建，在基础上增长配置达到自动化项目。新增动flxio拦截器自动处理接口，新增根据环境变量来改变运行时的参数。

Fly.js

小程序拦截器我的不是很满意，在网上就寻找到了fly.js 感谢做者大大@wendux

简介

一个支持全部JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可让您在多个端上尽量大限度的实现代码复用，它有以下特色：

• 提供统一的 Promise API。
• 浏览器环境下，轻量且很是轻量 。
• 支持多种JavaScript 运行环境
• 支持请求／响应拦截器。
• 自动转换 JSON 数据。
• 支持切换底层 Http Engine，可轻松适配各类运行环境。
• 浏览器端支持全局Ajax拦截 。

• H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片

  安装/配置使用

npm install flyio --save

新增staticEnv.js 配置接口种类

const base = "/api-login"
const common = "/api-common"
const elevator = "/api-elevator"
const workorder = "/api-workorder"
const device = "/api-device"
const authcontract = "/api-auth-contract"
const contract = "/api-contract"
const events = "/api-events"
export {
  base,
  common,
  elevator,
  workorder,
  device,
  authcontract,
  contract,
  events
}

新增错误代码判断errorCode.js

import Tips from './Tips';

export function errorCodeHandler(errorcode, message) {
  switch (errorcode) {
  case 13001:
    Tips.alert('注册时未填写公司信息！');
    break;
  case 31001:
    Tips.alert('公司待审核！');
    break;
  case 13004:
    Tips.alert('公司待审核！');
    break;
  case 13005:
    Tips.alert('公司待审核！');
    break;
    //登陆超时errorCodeHandler
  case 12009:
    Tips.alert(message);
    wx.navigateTo({
      url: '/pages/login/index'
    });
    break;
  case 3008:
    Tips.alert(message);
    wx.navigateTo({
      url: '/pages/login/index'
    });
    break;
  default:
    if (message) {
      Tips.alert(message);
    }
  }
}

新增http.js

import Fly from 'flyio/dist/npm/wx' //npm引入方式
import { base, common, elevator, workorder, device, authcontract, contract, events } from '../api/staticEnv'
import Tips from './Tips';
import { errorCodeHandler } from './errorCode'
//建立fly实例
const fly = new Fly()

//配置请求baseURL
fly.config.baseURL = BASE_API

//添加请求拦截器
fly.interceptors.request.use((config) => {
  Tips.loading();
  // 判断是否存在token，若是存在的话，则每一个http header都加上token
  const token = wx.getStorageSync('token')
  if (token) {
    config.headers.tokenStr = token;
  }
  // 统一添加接口种类  "http://api.p1.ettda.com/api-login"
  switch (config.proxy) {
  case 'base':
    config.url = base + config.url;
    break;
  case 'common':
    config.url = common + config.url;
    break;
  case 'elevator':
    config.url = elevator + config.url;
    break;
  case 'workorder':
    config.url = workorder + config.url;
    break;
  case 'device':
    config.url = device + config.url;
    break;
  case 'authcontract':
    config.url = authcontract + config.url;
    break;
  case 'contract':
    config.url = contract + config.url;
    break;
  case 'events':
    config.url = events + config.url;
    break;
  default:
    break;
  }
  return config;
})

//添加响应拦截器，响应拦截器会在then/catch处理以前执行
fly.interceptors.response.use(
  response => {
    Tips.loaded();
    //返回错误代码处理前端页面提示
    if (response.data.code != 0) {
      errorCodeHandler(response.data.code, response.data.message);
      return Promise.reject(response.data)
    }
    return response.data;
  },
  error => {
    if (error.response) {
      Tips.error('出错啦,请稍后再试！')
    }
    return Promise.reject(error); // 返回接口返回的错误信息
  });


export default fly;

使用

import fly from '@/utils/http'
import qs from 'qs'

const config = {
  proxy: 'base' // 接口种类
};

export async function requestLogin(params) {
  return await fly.post('/login', qs.stringify(params), config)
}
<!--wpy文件调用-->

requestLogin({
    username: 'username',
    password: 'password'
}).then(res => {
    console.log(res);
});

完整的fly拦截器咱们就完成l，主要公司业务接口毕竟多，个人想法就是模块化每一个api种类来维护，使用拦截器就很好的组装接口，节省你们开发时间和减小重复工做。

wepy-plugin-replace

为 plugins 添加 replace 对象，支持单个或者多个规则，多个规则能够以 Array 或者 Object 实现，filter 的对象为生成后文件的路径， 例如'dist/app.js'，每一个规则也同时支持多个替换条目，一样是以 Array 或者 Object 实现。

简介

多环境对于每一个公司来讲都是须要的，测试环境，正式环境等等。之前咱们都是每次发布时候都手动修改api接口地址，可这样的重复无聊的工做咱们就应该交给工具来实现。咱们要有一个工程化的思想去构建整个项目，减小小伙伴在开发中遇到的无趣工做和节约他们的时间。因此我寻找到了上面的wepy-plugin-replace插件。

配置

wepy.config.js中

plugins: {
    replace: {
      filter: /\.js$/,
      config: {
        find: /BASE_API/,
        replace: function (matchs, word) {
            return process.env.NODE_ENV === 'production' ? '"https://api.a.com/"' : '"https://api.a.com/dev/"'
        }
      }
    }
}

//if判断中也须要新增
if (prod) {
    module.exports.plugins = {
        replace: {
          filter: /\.js$/,
          config: {
            find: /BASE_API/,
            replace: function (matchs, word) {
                return process.env.NODE_ENV === 'production' ? '"https://api.a.com/"' : '"https://api.a.com/dev/"'
            }
          }
        }
    }
}

package.json中

"dev": "cross-env NODE_ENV=development env_config=dev wepy build --watch",
"build": "cross-env NODE_ENV=production env_config=test wepy build --no-cache",

使用

npm run dev或者npm run build。插件就会自动匹配BASE_API而后替换成当前env_config匹配的api接口地址。在http.js中就简单的提现了，同时你也可使用到其余方式上,

总结

前端工程化是前端架构中重要的一环，主要就是为了解决如何进行高效的多人协做？如何保证项目的可维护性？如何提升项目的开发质量。因此这个文章一样适用于其余地方，但愿文章能帮到你们。本人搭建的wepy总体项目已托管到github上，对你有帮助给star