您现在的位置是:网站首页> 内容页

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

  • 齐发手机版首页
  • 2019-10-06
  • 256人已阅读
简介前言本文章秉着自动化工程项目的思想搭建的,基础架子完全按照wepy官网搭建,在基础上增加配置达到自动化项目。新增动flxio拦截器自动处理接口,新增根据环境变量来改变运行时的参数。Fl

前言

本文章秉着自动化工程项目的思想搭建的,基础架子完全按照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()//配置请求baseURLfly.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

文章评论

Top