技术特点
承担播放器项目技术选型工作,从0到1为公司搭建了前端播放器,注重前端标准化,在部门内部推行前端规范的落地。
熟练掌握Vue、React、TypeScript开发并了解相关原理,拥有3个上线项目。
熟练使用uniapp和微信小程序进行多端的开发,具有移动端适配经验,拥有3个上线项目和4个Demo项目。
熟悉 parcel、Webpack、Git、gulp、VSCode 等前端工具。
了解WebRTC和计算机图形学, 使用three.js实现了1个Demo项目。
具有后端开发经验,拥有1个CLI项目(Node.js)和 1个上线项目(Java)。
公司项目
智慧美育艺术素质测评项目 - Vue3,TypeScript,Element-plus
项目概述:贵州省艺术素质测评项目,系贵州省教育厅携手课堂内外—智慧美育研究院共同打造的经典案例。以教育部级美育专家为引领,结合贵州省地域属性特征,个性化定制的艺术素质测评云平台及专属题库。
个人职责: 负责题库、作品评分等模块的15+页面开发。
项目难点:文件上传、下载。
工作成果:
  • 为提升项目的开发效率并增强可维护性,封装了useUploaduseTable10+个Vue Hooks和代码生成工具,减少了50%的代码量和工作量,从而避免了重复开发文件上传、表格列表以及分页等功能。
阅流(上线,18人,前端 8 人) - uniapp,Vue
项目概述:「阅流」是一个创意资产管理与协同工作流平台,具有影像数据实时上云、媒资管理、云上生产协作三大模块,助力用户进行云端影音创作。目前服务于影视飓风、少年得到、特赞等50+家企业以及100w+个人用户。
个人职责: 作为开发负责人对播放器进行技术选型;播放器业务功能开发;统一项目组开发规范。
项目难点:PC、H5、小程序多端适配;播放器适配多种使用场景视频画面的圈点和标注;项目的组件化工程化
工作成果:
  • 为灵活应对需求,对播放器进行了组件化拆分,分为接口组件、容器组件、功能组件3类,共计30+组件,提升了50%的开发效率。例如,多屏播放器组件支持同时播放2~4个视频。
  • 为方便用户可以在视频上方进行圈点和标注,在Canvas工具库fabricjs的基础上封装出一套属于自己的绘图工具组件
  • 使用hls.js、flv.js、video.js封装了一套属于公司的专属视频播放器组件,能够同时支持MP4、m3u8、flv等多种视频格式的播放,其中直播视频能将延迟控制在300ms以内,能很好的满足用户实时审片的需求。
  • 由于用户对播放器进度条有特殊需求,为播放器封装了新的进度条组件,除了时间跳转的基础功能之外,还能选择播放区域,以及hover后预览视频画面
  • 为应对用户需要在不同比例下查看视频的需求,使用Canvas实现了对视频画面分别进行2.35、1.85、16:9、9:16、4:3、1:1等多种比例的裁切
  • 除了以上的组件外,还封装了图片缩放预览组件视频画面旋转组件、文件对比组件、3D文件预览组件、音频播放器组件等。
  • 为实现播放器能实现PC、H5、微信小程序多端适配,以及在多项目中使用,使用submodule对播放器模块进行分离,后续可以将播放器单独发布成npm包。现已有3+项目在使用播放器相关功能,已服务于14+开发同事。
  • 项目开发后期,播放器团队已从1人增加到2人,为保证播放器的开发质量以及与各项目组的对接效率,制定了统一的编码规范、命名规范和分支管理规范,开发时进行单元测试,开发后编写播放器使用文档,并自动化集成部署
大约旗下项目(上线, 5人,前端3人) - 微信小程序,Vue
项目概述:该项目属于付费会员制电商,涉及小程序端和后台管理。
个人职责: 【锦鲤多多】和【锦鲤内购】小程序开发;后台管理项目开发;特殊动画实现。
工作成果:
  • 由于原生的布局语法过于繁琐,实现了对【栅格布局】和【Flex布局】的封装,团队开发效率提升80%
  • 由于抽奖活动弹窗过多导致管理混乱,运用了Promise异步等待的特性解决了这个问题,使得用户体验得到了极大提升。
新能源物流⻋综合运营平台(上线, 19人) - AngularJS,Java,MySQL
项目概述:该平台是新能源汽⻋的在线监管、追踪定位、故障处理以及交易合同管理平台,致⼒于为销售或购买新能源汽⻋的⽤户的提供⼀个实时监控的综合性管理平台。
个人职责: 作为项⽬组⻓参与了“新能源物流⻋综合运营平台”项⽬的设计、开发与测试。
工作成果:
  • 完成了故障流程、派⻋流程、合同管理等核⼼模块的开发以及重构。
个人开源项目
简历 - ejs,parcel
项目概述:⼀份通过JSON进行配置,兼容PC、⼿机和平板设备,还可以通过浏览器直接打印的⽹⻚版简历。
项目成果:
  • 首先通过parcel-transformer-ejs将ejs语法构建成html代码。
  • 然后通过媒体查询兼容不同设备。
Dev-Box - Node.js,gulp
项目概述:使用Node.js 和 gulp 封装的开发工具箱,用于封装常用脚手架以及API调用等,以此提高项目开发效率。
项目成果:
  • 为实现快速发布静态网站,将创建Github Action工作流、添加环境变量、创建Coding仓库和腾讯云对象存储桶、设置自定义域名、创建域名解析记录、申请HTTPS域名证书集成到工具箱中,实现了一键部署静态网站
个人博客 - Hexo
项目概述:本人热爱技术,乐于分享,持续更新语雀300多天,累计获得关注数340+
项目难点:将语雀文章发布到Hexo博客。
项目成果:
  • 通过钉钉和云函数实现了语雀文章发布到Hexo博客,并且教程文章获得语雀精选访问量1500+
  • 博客首先使用Hexo进行开发,然后使用Github Action 将代码分别推送到Coding和Github Pages,最后使用腾讯云部署静态博客。
工作经历
重庆天籁教育科技有限公司(兼职) - 前端开发工程师
负责智慧美育艺术素质测评项目(后台,Vue3, TS)
上海阅竞网络科技有限公司 - 前端开发工程师
负责阅流播放器开发
上海大约网络科技有限公司 - 前端开发工程师
负责小程序端和后台项目开发
负责项目中UI组件库封装
重庆理工大学B305实验室 - 软件研发工程师(项目负责人)
负责前后端项目开发
负责产品需求沟通以及制定开发计划和分配开发任务
考研经历
上海大学(上海电影学院)-电子信息(专硕)-图形图像技术方向
教育经历
重庆理工大学 - 本科 - 软件工程