前言
本文章秉着自动化工程项目的思想搭建的, 基础架子完全按照 wepy 官网 https://tencent.github.io/wepy/document.html#/ 搭建, 在基础上增加配置达到自动化项目. 新增动 flxio 拦截器自动处理接口, 新增根据环境变量来改变运行时的参数.
Fly.js https://github.com/wendux/fly/blob/master/README-CH.md
小程序拦截器个人不是很满意, 在网上就寻找到了 fly.js 感谢作者大大 @wendux mailto:感谢作者大大@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 种类来维护, 使用拦截器就很好的组装接口, 节省大家开发时间和减少重复工作.
http://npm.taobao.org/package/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 整体项目已托管到 https://github.com/huanglong6828/wepy-automation 上, 对你有帮助给 star
来源: https://www.cnblogs.com/ychl/p/9229201.html