# 前端 Frontend

# 能力输出

  • 各类型网站,包含但不限于以下类型
    • 管理平台
    • CMS 站点
    • 企业门户综合网站
    • 服务类型网站
    • 设备嵌入网页
  • 微信小程序
  • 支持全平台(WindowsMacLinux)的桌面客户端,以 Windows 环境为例,客户端程序以 exe 格式的可执行文件形式存在,不需要依赖浏览器运行,例如 QQ、Microsoft Office 等一系列可直接运行的桌面客户端

网站可根据需求针对 desktoptabletmobile 等不同尺寸设备进行适配

# 项目构建及发布

项目工作分支根据 Git 分支使用规范 执行代码环境管理

# 构建网站

各类型网站、设备嵌入式网页等内容的构建及发布

# 开发环境

开发环境使用本地环境进行构建及运行项目

# 测试环境

将代码合并至 test 分支后,持续集成平台将自动进行打包、成果交付以及服务自动更新,构建任务完成后,应告知相关人员进行内容测试工作

需注意自动发布需要一定执行及构建的时间,应尽可能不要在短时间内连续推送内容至分支,以导致构建任务被连续触发;若有短时间内再次构建的需求,也应在构建任务完成后,再次推送代码

流程示意图

ci-cd-test

# 生产环境

特别关注

生产环境内容发布须严格按照计划安排及发布流程执行

执行发布生产环境流程

  1. 测试人员确认当前版本已通过测试
  2. 项目负责人/项管根据计划决定更新时间
  3. 在开发分支(dev)执行构建前自动化测试
    • ESLint 语法检查扫描
    • 单元测试
    • 端对端测试
  4. 项目负责人/项管宣布可以开始上线时,将开发分支 dev 的代码合并至 master 生产环境分支
  5. 通知运维人员更新生产环境
  6. 更新成功后,在项目相应的公司项目官方群组公告通知更新成功
  7. 测试人员验证生产环境
  8. 生产环境验证通过后,为 master 分支设置当前版本 tag,标题为当前版本号,内容则填写当前版本功能的简要内容。如果一个项目有多个子模块,那么标题的版本号应增加相应模块名称,以公司的素+管理平台项目为例,销售导航 1.2.0 版本生产环境发布完成后,tag 可设置为 sale-navigate-1.2.0

流程示意图

ci-cd-test

# 构建微信小程序

微信小程序各版本发布流程说明

预览版

  1. 设置环境参数为开发版
  2. 将开发完成的代码上传至微信小程序平台
  3. 通过扫描预览版二维码进行试用

线上版

  1. 测试小组确认当前版本已通过测试
  2. 项目负责人根据计划决定更新时间
  3. 设置环境参数为线上版
  4. 上传代码至微信小程序平台
  5. 进入微信公众平台,在版本管理中将当前 体验版 提交为 线上版
  6. 等待微信平台审核
  7. 微信平台审核通过,并会在微信中通知相关人员
  8. 进入微信公众平台,将审核通过的版本,发布为 线上版

# 浏览器支持情况

# 浏览器及版本要求

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE10, IE11, Edge Firefox 18+ Chrome 49+ Safari 10+ Opera 36+

后续的技术版本升级后,仅对 IE11 进行兼容性支持

# 屏幕分辨率要求

最小兼容 1366 X 768 分辨率

# 项目部署需求

  • nginx(gzip)

# 项目技术组成

管理平台

  • vue2
  • vue-router
  • vuex
  • axios
  • element-ui
  • bootstrap 5(仅 CSS)

网页开放平台(专项提供移动端 WebView 嵌入、独立页提供)

  • vue2
  • vue-router
  • axios
  • bootstrap 5(仅 CSS)

单元测试

  • vue-test-utils
  • mocha
  • cypress
  • chai

小程序

  • 微信小程序原生方式

# 代码版本控制位置

前端团队代码使用位置:frontend (opens new window)

最后更新时间: 8/29/2023, 7:00:31 AM