申啸天的简历

技能

掌握现代框架实现原理，能独⾃实现MVVM

前端：

Vue:掌握框架实现原理（会使用 defineProperty,Proxy实现MVVM）
React:掌握Redux/createElement实现原理，熟悉hooks运作机制
熟练使用umi，了解umi运行机制。通过umi实现项目的多环境多配置部署。熟悉插件机制
移动端兼容处理经验：pdf预览/下载等
⼩程序: 熟练掌握Flex+rpx布局有uni-app开发经验；掌握小程序规范；熟悉微信和支付宝生态圈
项目中全面使用ES6；会利用闭包、函数式理念封装组件；熟练使用ts 对ts高级用法有掌握

其他：

熟悉Koa2, Express，有SSR经验

工作经验

北京琥玥天地科技有限公司

2023-03 ~ 至今

负责印花猫从0到1项目搭建
负责腾讯两癌筛查项目从0到1项目搭建
腾讯新基石用户端及管理后台研发

脉脉

2021-03 ~ 2022-11

负责招聘商业增长产品开发落地
从0到1完成公司级别技术后台
从0到1开发业务组件库包含支付等业务组件
负责招聘增长产品，并承担onwer
通过sql追踪数据，建立数据看板分析指标

北京洋葱学院

2019-04 ~ 2021-03

负责小学部落增长侧前端开发，以及项目的重构工作
重构了完整的支付流程
负责内部submodule维护，公共组件库的开发
参与小学部落中后台开发（crm/admin）
参与小学学习体验开发（学生学习做题/老师批改一体的项目）

北京三节课

2017-06 ~ 2019-04

负责公司⼩程序端开发和项目底层架构搭建
参与公司其他业务线产品研发
负责产品前端开发

项目经验

1. 印花猫管理后台

介绍：搜索印花猫小程序，印花猫服务的管理后台帮助运营管理订单以及商品

基于Vue3和微前端生态思想，将整个管理后台分成两个项目，登录、菜单、权限和业务逻辑拆分
外层登录、菜单通过iframe嵌套内层业务逻辑，两者通过postmessage实现通信方案
在内侧业务逻辑项目监听路由行为，当发生路由行为时通知外层，保证两个项目交互保持一致
使用vite proxy代理访问路径。解决往常需要本地运行两个项目的弊端，一般开发只需运行内层项目即可
通过自定义指令管理权限，通常在按钮上添加v-perssion.add.remove 即可添加权限实现按钮的禁用也可扩展更多html属性的控制

2.腾讯新基石ssv

介绍：

线上地址：新基石官网

基于vue3生态+腾讯tdesign-ui，权限基于接口获取后使用动态路由处理在前端通过hook+插槽+自定义指令封装权限
基于业务有大量表单情况，开发Pro-Form组件。优势是只需要options配置即可，表单样式、嵌套、状态流动以及rule校验封装在组件内部
充分利用组合式函数，封装复杂逻辑。将表单选项互斥逻辑封装成hook，并结合上一条中的options就能完成表单复杂功能
通过vite提供原生import能力，无需配置route文件自动分析pages目录自动创建路由文件
有下载/pdf预览经验，兼容安卓和ios（部分较低版本）
开发项目相关npm插件在项目中引用，并借助vite搭建服务在本地快速调试插件功能
模仿阿里开源的useRequest 在项目内部封装自己的fetch hook工具。好处是在hook内部即可处理好业务逻辑并暴露出响应式变量，在页面中就像使用props一样方便。
通过vue-router路由守卫结合权限实现路由拦截和更细微颗粒度的页面控制

3.脉脉招聘商业产品

介绍：

线上地址：maimai.cn

招聘服务已经成为脉脉第一大收入来源

使用ssr来完成整体架构搭建，node层负责请求接口和页面渲染。确保能被爬虫捕捉
使用hooks实现小型store，useContext+useReducer
关键交互页面用RN代替H5保证交互流畅性
使用koa2作为中间层，负责转发接口和数据范式化
使用dumi来开发业务组件并发布成npm包
职位分享使用RN重构，分享到站外使用node+puppeteer 动态生成图片

4.技术平台

介绍：

技术平台面向产研团队，封装了sql bug查询等功能

截止目前有100+同事使用过该平台

基于umi+antPro搭建框架，定制Table组件做到高可用
封装sql查询方法，让sql查询可视化方便初学者使用
基于纯函数理念，功能可复用。基于上述做到了json化配置low-code
通过bash npm script配合完善工程化
在后台采用了装饰器的思想，在装饰器内埋了钩子。当相应组件被import时装饰器会获取到相应组件信息并传递给store
使用fabric canvas库来渲染img。并利用canvas的api做到翻转/绘制图形。并最后输出照片

5.洋葱小学增长侧h5

介绍：

线上地址：yangcong345.com

增长h5是小学对外投放/营收的入口。负责小学业务的营收

2020年小学业务增长营收2000W+。实现盈亏自负

有两大投放方式：依托洋葱APP 作为其中一个入口；浏览器h5投放

服务运行良好，截止目前Google GA统计到的users为314.3K。sentry统计到的bug在150左右

使用umi.js开发。首页使用了webp+layzLoad来保证首屏加载时间
可以设计完整的支付流程，会使用ping++或sdk支付
使用代理者模式，将Local用proxy代理。便捷操作Local对象
重写了umi中的ts类型，解决了umi.js中dispatch和其他定义难用的情况
创建history插件，在start时注入项目。解决umi3不支持promtp的问题
基于umi-request封装了加解密、自动处理token失效、后端status返回异常时的处理逻辑
基于umi wrapper/hooks 做了鉴权，登录，微信授权的HOC
全平台埋点统一方案，根据所运行的容器来判断使用js增强还是接口发送
submodule+可视化方案。将产品需要的功能封装成组件，在后台配置好组件的props和顺序后渲染在h5 减少产研需求量
context+useReducer/redux覆盖了项目所有数据存储的场景
使用env+git CI做多环境同时部署

6.乐猩电商小镇(H5端和小程序端)

介绍：

线上地址：m.pilipa.cn/lexing

乐猩电商小镇旨在帮助中小电商企业办理营业执照并代理记账

打通了线上办理营业执照的渠道，现在企业主无需到工商局自己申请营业执照，在线上就可办理营业执照

乐猩电商小镇分为H5端，小程序端。H5端依托噼里啪官网，小程序端与阿里巴巴合作，上架淘宝商家应用和千牛服务市场。是淘宝商家/千牛服务市场唯一的代理记账报税业务

乐猩H5端采用React+Next.js框架开发，在部署服务器后能保证访问速度和SEO
OCR识别，前端使用input调起相册功能，选择照片后由前端调阿里OSS
使用WithRouter高阶组件来创建可访问的props.router
上传身份证使用OSS+OCR识别，小程序端调用my.uploadFle上传
使用HOC高阶组件，将获取用户信息和可复用业务代码抽离到高阶组件当中
自定义Modal组件，使用React.createPortal将DOM渲染在body层
使用createRef+ref转发，确保能获取到正确的示例内容
编写支付组件和支付函数，能识别支付宝，微信和H5环境。根据环境不同调用相应API
小程序端使用原生开发，熟练掌握AXML规范；使用Flex+rpx适配
封装fetch函数，统一处理请求回调
小程序端支付使用web-view和H5使用同一套接口。环境判断是否为小程序端，通过PostMessage传递消息
服务端使用淘宝聚石塔业务和小程序云服务（鉴权，userInfo等API必须使用云）

7.三节课校园小程序

介绍：

线上地址：微信小程序搜索 ‘三节课校园’

三节课校园团队为⼤学⽣就业服务的⼩程序，为大学生提供在线实习和提高能力课程

熟练使⽤Flex+rpx布局
使用wx.login和session实现用户鉴权和用户token过期判断
批量上传上传图⽚(wx.uploadFile)，并使⽤promise.all保证返回顺序
上课页⾯使⽤promise实现对话流⾃动播放；使⽤call保证this指向正确
跳转⼩实习裂变⼩程序，并根据参数判断后续⾏为
使⽤wx.reportAnalytics上报信息做数据埋点
Canvas实现进度条并用cover-view保证层级最高

教育经历

华北理工大学

个人评价

励志成为能横跨多端的选⼿

⽬前在学习Fullter/dart和python

喜欢翻MDN，思否和掘⾦

会在论坛和个人github发一些分享～