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

時間 2019-11-29

標籤微信程序 wepy 自動化架構搭建 fly+wepy fly plugin replace 欄目測試自動化简体版

原文原文鏈接

前言

本文章秉着自動化工程項目的思想搭建的，基礎架子徹底按照wepy官網搭建，在基礎上增長配置達到自動化項目。新增動flxio攔截器自動處理接口，新增根據環境變量來改變運行時的參數。html

Fly.js

小程序攔截器我的不是很滿意，在網上就尋找到了fly.js 感謝做者大大@wendux前端

簡介

一個支持全部JavaScript運行環境的基於Promise的、支持請求轉發、強大的http請求庫。可讓您在多個端上儘量大限度的實現代碼複用，它有以下特色：git

提供統一的 Promise API。
瀏覽器環境下，輕量且很是輕量。
支持多種JavaScript 運行環境
支持請求／響應攔截器。
自動轉換 JSON 數據。
支持切換底層 Http Engine，可輕鬆適配各類運行環境。
瀏覽器端支持全局Ajax攔截。
H5頁面內嵌到原生 APP 中時，支持將 http 請求轉發到 Native。支持直接請求圖片github

安裝/配置使用

npm install flyio --save

新增staticEnv.js 配置接口種類npm

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.jsjson

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

簡介

多環境對於每一個公司來講都是須要的，測試環境，正式環境等等。之前咱們都是每次發佈時候都手動修改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",