业务背景：

支付产品构建收银台能力。对于H5应用的商户，提供H5收银台的支付能力；对于App应用的商户，如果用户未安装该支付应用app，通过SDK拉起H5收银台完成支付。

商户应用集成H5收银台时的体验要求：

在手机浏览器上基础的接集成体验：

a. 商户拉起： 外部商户直接对接H5收银台时，通过post表单提交拉起H5收银台；或通过后台预下单获取到跳转地址，跳转到H5收银台；

b. 用户登录：对于外部商户集成，用户需要进行帐号登录的操作；但对于内部同一个账号体系的商户，可以通过鉴权方式实现免登录进入H5收银台；

优化重构背景：

随着前端项目的业务逻辑越来越复杂，代码也逐渐劣化。因为js弱类型的语言特性，变量没有类型约束。任何变量在运行态都变得不可知，函数的出入参也不可知。这不仅导致了各种低级问题的产生，还使代码逻辑难以理解，数据流不可控。 即使想对代码进行重构也是举步维艰。

考虑引入ts改造vue项目，主要看中了ts的如下优势可以解决项目痛点：

a. 清晰的函数参数/接口属性，增加了代码可读性和可维护性。
b. 静态检查，可以约束随意的变量读写；配合现代编辑器，各种提示可以提升编码效率。

项目改造步骤

1. 新增必要依赖项——以支持编译ts为js

打包改造背景：

前端项目代码仓里，同时包含了PC端和mobile端的页面代码，此前整个项目都是打包成一个单文件。考虑业务场景的解耦和加载性能的优化，准备将PC端和mobile端的代码分别打包成独立的页面。彼此的router/page/component独立，但项目中的工具类和业务service逻辑处理层，可以抽离统一处理。

打包改造步骤：

### 1. webpack打包改造(vue中直接在vue.config.js配置）      

打包成两个html文件如下： 

前言：

在线上项目中,需要统计产品中用户行为和使用情况，从而可以从用户和产品的角度去了解用户群体，从而升级和迭代产品，使其更加贴近用户。 用户行为数据可以通过前端数据监控的方式获得，除此之外，前端代码的稳定性以及性能等也被开发运维人员所关注。 我们需要实现性能监控和异常监控以及时响应现网问题处理定位。其中性能监控包括首屏加载时间、白屏时间、http请求时间和http响应时间。异常监控包括前端脚本执行报错等。
本文针对整个前端监控，以一个具体的业务场景设计适用的方案。本文的主要内容分为：

一、数据监控类型

前端监控可以分为三类：数据监控、性能监控和异常监控。下面我们来一一的了解。

重构认知：

所谓重构（refactoring） 是这样一个过程： 在不改变代码外在行为的前提下， 对代码做出修改， 以改进程序的内部结构。

存量产品问题：

难以添加新特性：添加1行代码都需要阅读理解相关的几千行代码
存量代码难以理解：培训和维护都异常困难，新员工成长缓慢，某些代码完全依赖于特定的一位老员工，人员依赖风险极大
难以保证产品质量：缺乏有效的自动化测试，添加或修改1行代码都必须手工执行所有的测试用例
接口混乱，组件难以复用：文档缺失、模块内外耦合严重，典型表现为头文件混乱
简单堆砌式实现：各种全局性的控制变量多，并且不断的异常性增加

项目及改造：

1. ts项目改造

2. 单页面改造多页面

3. webpack拆包优化

4. 运营页面iframe加载配置

5. UT能力构建

6. 打点能力构建

7. 用户前后端敏感数据加密国密改造

微重构动作：

变量类型约束：接口出入参结构化，跨页面、文件传递的数据结构化；

所有业务异常提示统一弹窗处理（dialogUtil）

App开发模式概览：

原生App开发(native App)；

Android App开发(java 、Kotlin)

IOS App开发(Objective-C、Swift)

web App开发(Web App)；

   普通H5应用开发

   PWA应用开发

混合App开发（hybrid App）:

   微信-小程序

   快应用

   超级App-H5应用

跨平台开发框架(一套代码，多端运行)：