微信小程序之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

原文地址:https://www.cnblogs.com/ychl/p/9229201.html

时间: 2024-11-09 19:39:15

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

【微信小程序】---线上环境搭建

一.前言 通常我们在本地电脑上开发微信小程序,调用和访问小程序会有很多问题.特别是在配有自己后端的情况下,我们通过真机访问我们的小程序会出现不可访问的问题 二.线上环境搭建 在这里我们主要以腾讯云给大家做演示 1.注册并登陆腾讯云   https://cloud.tencent.com/ 2.上传代码 a.把客户端代码和服务端代码放置在微信小程序目录下 b.将客户端代码放置到client文件加中,服务端代码放置在server文件加中 c.把原微信小程序project.config.js文件转移到

10分钟入门微信小程序开发:从环境搭建到开发出第一个程序。

小程序简介 小程序是一种不需要下载安装即可使用的快速应用,它实现了应用“触手可及”的操作:用户扫一扫或搜一下即可打开应用,完全不需要安装,因此小程序不仅可提高的用户的应用体验,也方便应用的传扩散. 本文带大家快速入门小程开发,了解从环境搭建到开发出一个简单hello world程序,从而上手小程序开发,让你快速成功小程序开发人员.之后,想开发什么样的小程序,就可以自己研究和努力了. 下面,是循序渐经的步骤: ?1.注册小程序 在开发之前,当然需要先注册一个小程序账号. 进入“微信公众平台”进行注

微信小程序腾讯云环境搭建

一.需要有微信公众号 这一步不多说了,百度搜索微信公众号注册. 二.申请小程序账号 (下面选自https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html#编译预览) 开发小程序,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序. 跟随这个教程,开始你的小程序之旅吧! 申请帐号 点击 https://mp.weixin.qq.com/wxopen/waregister?action=st

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

从前端界面开发谈微信小程序体验

本文由云+社区发表 这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程,前面已经有几位前辈的文章珠玉在前,我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧. 在结构和样式方面,小程序提供了一些常用的标签与控件,比如: view,小程序主要的布局元素,类似于html标签的div,你也完全可以像控制div那样去控制view. scroll-view,你要滚动内容的话,没必要用view去做overflow,scroll-view提供了更为强大的

vscode 开发微信小程序环境配置

插件 minapp 微信小程序标签.属性的智能补全(同时支持原生小程序.mpvue 和 wepy 框架,并提供 snippets) wechat-snippet 微信小程序代码辅助,代码片段自动完成 wepy snippets 微信小程序wepy框架,weui框架代码片段 文件解析语言类型设置 wxml 通过 html 进行解析,setting.json中添加 "html.validate.styles": false(禁止内联样式报错) wxs 直接设置 JavaScript 作为解

一个小时快速搭建微信小程序

「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字--爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json

如何一键式搭建微信小程序

有了微信小程序,对你到底意味着什么? 对于用户来说,再也不用担心手机的内存不够用了!一个小程序只有1M,随便卸载一个App,就能安装很多小程序! 对于老板来说,你不再需要花费数十万来去请外包公司帮你去开发一个App来,而且还不能做多机型的适配! 对于开发者来说,你有了一个新的做私活的机会!微信小程序的模式让你轻轻松松一个人完成所有任务! 接入微信小程序,我们究竟有哪些问题? 微信小程序,是一个新生事物,和我们的传统的Web业务并不相同,而其基于JS的语法,也让很多前端开发工程师涌入其中.那么微信

微信小程序搭建mpvue+vant+flyio

导语 上一篇文章微信小程序搭建mpvue+vant已经介绍了如何搭起mpvue项目及引入vant,本篇文章继续在它的基础上,引入flyio,并做一些封装,目的是为了在小程序发起请求. 这时读者会有些疑问,小程序已经有了request,为什么还用flyio?这不是造轮子吗?我是这么想的,其实现在不管是mpvue,还是wepy都好像还不能完美编译出微信小程序和h5版本.为了以后应对老板有创建h5版本的想法,我们应该为以后复用小程序代码做好准备工作.既然h5也会有ajax,flyio也支持小程序和h5