天津时时彩客服电话:微信小程序之wepy自動化架構搭建(fly+wepy-plugin-replace)

發布日期:2019-05-27

天津时时彩遗漏数据 www.gcgzhn.com.cn 前言

本文章秉著自動化工程項目的思想搭建的,基礎架子完全按照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 } // 統一添加接口種類 "//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,主要公司業務接口畢竟多,我的想法就是??榛扛鯽pi種類來維護,使用攔截器就很好的組裝接口,節省大家開發時間和減少重復工作。

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