项目经验1.各种后台管理系统参与开发了统一认证中心，根据业务和前后端接口约定封装了统一的脚手架，统一用户管理、权限管理

1.业务后台管理系统

参与开发了统一认证中心，根据业务和前后端接口约定封装了统一的脚手架，统一用户管理、权限管理功能，业务组件抽离单独组件库上传公司私服，参与前端业务组件库的项目框架搭建和业务组件的开发

在统一认证中心请求登录接口返回token，前端把token存在cookies里,请求当前用户系统权限接口，显示对应的系统入口，点击跳转到对应的子系统；
jwt 是生成token的一种机制，将用户信息以base64加密，还有秘钥字段防止篡改，登录成功后，后端返回token，前端存在cookie里，第一次进入子系统的时候，请求当前用户权限接口，把token参数传给后端，后端会验证token生成session存入用户浏览器cookie中，以后请求后端接口就只认session，session有自己的过期机制和刷新机制，把session放在redies内存缓存服务器里供其他服务器共享，就不存在服务器之间同步用户session表的问题啦；表单提交、查询，文件的上传、下载、预览、打印，状态管理等；
前端微服务：由于平台技术栈迁移，选用蚂蚁金服的qiankun，主应用Vue项目, 微应用React项目
业务组件库：组件库如何做按需加载: babel-plugin-import； vue抽象组件封装；包管理问题、组件库本地开发问题、组件测试；
第三方对接：七陌电调
数据可视化： bizcharts

2.平台官网：适配手机端和PC端，做了SEO优化

屏幕适配：postcss-px-to-viewport meta
信息配置，如：页面描述description，页面关键词keywords，搜索引擎抓取robots这些
单页面应用SEO预渲染处理： prerender-spa-plugin（1）ssr服务端渲染从工作量还是技术角度来说不是很友好（2）对于官网来说只是用来改善少数营销页面，以便搜索引擎收录（3）预渲染就是当vue-cli构建的项目进行npm run build 的时候，会按照设置的需预渲染路由的层级进行动态渲染出对应的html文件生成到指定的文件夹
网页优化：图片压缩，CDN缓存，GZIP 压缩文件，设置浏览器缓存

3. 移动端项目(公众号、H5、ReactNative)

搭建移动端项目架构，维护原生react-native项目与原生app交互，内嵌H5，线上活动H5开发，微信公众号自动登录，微信支付，H5支付
框架： vue-cli，cube-ui，postcss-px-to-viewport，axios
与RN通信：window.ReactNativeWebView.postMessage()方法，约定消息type
navigator.userAgent 判断当前设备类型，微信自动登录
eslint 代码格式统一校验，husky提交代码前prettier自动修复+代码格式化，配置环境变量，分环境
微信支付：项目中要添加微信认证文件，微信开发者管理平台里配置支付路径，路由使用history模式在微信中打开单页面应用，copy出来的总是第一次进来时的url，导致微信支付地址授权失败

4. 小程序

Taro + React 跨端跨框架开发可转化为H5、ReactNative、小程序

腾讯云实时音视频通讯解决方案、定位、地图导航、微信支付、发布订阅

5.人才管理系统

公司内部人员管理系统：绩效考核、年终评价、岗位内推、公司内部活动页等：组织架构图，水印、照片墙懒加载

6.BI数据可视化项目

可视化大屏展示，可视化图表组件封装

服务端推送：websocket
根据业务方需求产品设计(参照echart)UI美化后，封装组件，echart也可以自定义画图但限制比较多，基本满足业务需求，对于不能满足的可视化图形，用过svg、canvas自己绘制；后来有蚂蚁金服AntV ，G2，了解过，但没用过
**数据可视化项目可以从不同指标，维度，时间节点对重要的数据做整体的把控，而且更加直观全面，**帮助各部门人员迅速的了解数据,提高其工作效率
BI报表：**数据需求项目主要是用于公司其他部门对我们bi数据组提需求，我们可以清晰的看到每个任务的需求提出者以及处理人，计划完成时间，以及追踪了任务处理的各个时间节点和沟通过程，规范了业务流程也增加了工作透明度，**量化了数据组的工作量，效率和满意度

项目中遇到过的问题：

路由传参不要显示在url上：利用路由的history.push(path,state),存在state里
上传 accept 文件类型，单个列举图片类型(.jpg,.jpeg,.png,.gif,.JPG,.JPEG,.GIF,.PNG)会存在浏览器兼容性问题（微信里打开无法触发上传、android浏览器里只能选择相机无法选择相册、ios没问题），最后改为 image/* 解决
上传相同文件blog.csdn.net/wojiaomaxia…
遇到一个问题就是change事件触发条件是文件上传框内容改变才可以，每次上传完文件默认是不清空上一次上传的内容的，这样上传同名文件就不会触发change事件。

清空input的value值，下次才会触发change事件
qiankun微应用项目内部路由跳转主应用监听不到

iOS下input 无法自动聚焦的问题: 注册自定义指令, 当被绑定的元素插入到 DOM 中时聚焦元素

directives: {  // 注册一个局部的自定义指令 v-focus  
  focus: {    
    inserted: el => {
      // 聚焦元素      
      el.focus();    
     }  
  }
}

**路由使用history模式在微信中打开单页面应用，copy出来的总是进来时的url，导致微信支付地址授权失败
**

私有组件库开发版本管理问题：（调试时使用npm link、测试发布时使用tag，tag可以用来指带版本号）

npm link 的使用：

$ # 先去到模块目录，把它 link 到全局
$ cd path/to/my-utils
$ npm link
$
$ # 再去项目目录通过包名来 link
$ cd path/to/my-project
$ npm link my-utils

解除link：

解除项目和模块link，项目目录下，npm unlink 模块名
解除模块全局link，模块目录下，npm unlink 模块名

npm包管理问题：如果项目开发对某些第三方npm依赖包版本要求比较敏感，那在多人开发的情况下，我们应该把package-lock.json文件维护在git上不应该ignore,可能有人会说那我可以直接在package.json里把依赖包的版本号写死也可以啊，但是这样其实会有潜在隐患，写死版本号，解决不了深度依赖的问题
vue项目上线后服务器资源更新而浏览器有缓存不更新 在 html 页面前面加 meta 标签
```
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
```
nginx 配置，让 index.html 不缓存
移动端1px问题
移动端input获取焦点，键盘弹起遮挡输入框

window.addEventListener("resize", function() {

  if (
    document.activeElement.tagName === "INPUT" ||
    document.activeElement.tagName === "TEXTAREA" ||
    document.activeElement.getAttribute("contenteditable") == "true"  ) {
    window.setTimeout(function() {
      if ("scrollIntoView" in document.activeElement) {
        document.activeElement.scrollIntoView();
      } else {
        // @ts-ignore
        document.activeElement.scrollIntoViewIfNeeded();
      }    
    }, 0);  
  }
});

12. app 内嵌 H5 页面涉及到微信支付的地方，不同端调起微信支付的方法不一样，所以在 app和 H5 端分别实现了统一支付收银台页面，其他功能页面都用 H5 实现，根据环境判断支付环境，H5 和 app 通过 postMessage 互通消息实现页面跳转

做过的比较复杂的功能：

1.多tab多表单提交

页面有好几个tab页，每个tab页里是好几个表单，页面显示哪几个tab以及表单查看或编辑状态是根据订单状态来动态控制显示的

Tab的显示和表单的状态是根据订单状态来决定的，比如：可修改，只读，表单字段联动等（给申请，查看，审核几个页面复用）

因为表单字段太多，一次填不完的话要把已填写的部分保存，所以需要提供自动保存功能，保存的前提是校验通过，所以我们采取了表单分模块校验和自动保存

自定义hooks 统一处理表单逻辑，有值修改触发校验（防抖），校验通过执行成功回调（提示自动保存成功样式并调保存接口），校验失败（提示自动保存失败样式）

如果用户点击提交申请则要把页面的所有表单校验一遍，校验通过才可调用接口

2.类似购物车多选结算

OKR提升

性能优化、技术分享、项目脚手架、CI/CD 自动化部署、开发工具提效、Vue/React 双转等，这些基本上一个人就可以整起来。

复杂一点可以做错误监控、性能监控、运营配置平台、跨端研发、自动化测试、低代码搭建、端智能等，这些就会复杂些，需要团队作战，可以和同事一起共建。

要从头开始使用 React 构建一个完整的 Web 应用程序，需要考虑许多重要的细节：

必须使用打包程序（例如 webpack）打包代码，并使用 Babel 等编译器进行代码转换。
你需要针对生产环境进行优化，例如代码拆分。
你可能需要对一些页面进行预先渲染以提高页面性能和 SEO。你可能还希望使用服务器端渲染或客户端渲染。

项目经验