iwebtools个人简历（前端开发）
个人信息
技术优势
- 超6年的前端开发经验，精通包括但不限于 Vue2、Vue3、nodeJS、微信小程序 在内的多种前端技术栈。
- 具备原生微信小程序开发能力，同时熟练掌握 taro 框架和 uniapp 框架，拥有小程序及公众号的开发与维护经验。
- 掌握 Cocos Creator 引擎，具备小游戏开发经验。
- 熟练应用 React、Nextjs、Nodejs、Express 框架以及 Mysql 数据库，能够构建高效、稳定的后端服务。
- 掌握 Nginx 的基本配置技巧，熟悉 Linux 系统操作，以及 Docker、Jenkins 等自动化部署工具的使用。
- 熟练运用 Git 进行版本控制，确保项目代码管理的规范性和高效性。
- 熟练运用各类前端组件库和UI框架，能够根据项目需求灵活选择合适的技术解决方案。
- 熟悉各类浏览器兼容性问题，掌握响应式编程原理，可以编写高稳定性高兼容性的H5代码。
- 具备全面的前端及部分后端技术能力，能够在多变的技术环境中迅速适应并推动项目进展。
- 了解项目从立项到上线全流程过程，具备多个完整项目上线全流程经验。
- 熟练使用 cursor、ChatGPT、deepseek 等AI工具来提高工作效率和解决各种复杂的问题。
- 不断学习和探索各种新技术，对于新技术总是充满好奇心和探索欲。
工作经历
- 武汉恋爱记网络科技有限公司前端开发工程师2020/06-至今工作内容1. 负责恋爱记App、官网、小程序、公众号的开发和维护。
2. 负责各种组件的封装及前端框架的搭建与优化。
3. 负责新人招聘、前期项目辅导及业务讲解。
4. 优化前端页面的交互体验，调研项目相关技术可行性。
5. 采用vue搭建新项目框架，后续页面基于此框架开发。
6. 优化JSSDK调用脚本及SDK文档，方便合作公司H5接入恋爱记App。
7. 参与公司的需求分析会、立项会和排期会，根据排期在规定时间内高质量完成项目。
8. 参与恋爱记小游戏情侣宠物的研发与迭代。工作成果1. 情侣宠物每日活跃用户数稳定在5万人，平均每两周更新一个版本。
2. 恋爱记长期线上功能：情侣攒钱、会员中心、情侣地图、情侣闹钟、许愿树、0元抽奖、恋人勋章、客服中心、解除关系等页面的开发与维护。
3. 将公司老项目全部重构，方便后期维护。
4. 编写了恋爱记jssdk文档，提供给合作公司前端开发接入恋爱记App原生能力。
5. 保证在日均活跃人数超百万和各种机型访问的情况下页面显示正常，不出现各种功能性问题和兼容性问题。 - 喻信中智信息技术有限公司前端开发工程师2018/06-2020/05工作内容1. 参与公司项目的需求评审、开发与维护。
2. 整理公司之前的老项目，部分迁移重构。完善项目文档说明，方便后期维护。
3. 帮助公司技术选型，使用高效的前端框架提高项目的开发效率，缩短项目周期。
4. 与甲方沟通项目需求，整理需求，将甲方的想法通过代码实现并展示，然后完善文档，并将具体的需求开发完善，推动项目进行。
5. 负责公共组件的封装，项目优化及bug排查。
6. 负责公司前端自动化构建及部署系统的搭建，实现自动化部署。工作成果1. 使用GitLab&Jenkins&Nginx实现前端的自动化构建和部署。
2. 在各项目中封装高复用的组件，高质量完成公司项目，帮助公司完成项目验收。
代表项目
- 情侣找不同2025.01.10-2025.01.15项目描述该项目类似于"大家来找茬"游戏，不同之处在于它有情侣模式，情侣双方可以同时游戏，一起找不同，谁最终找到的多谁就获胜。情侣模式下每局游戏有5组图片，每组图片有5处不同点，谁先点中不同处就得1分，5组结束后谁得分高获胜。项目难点图片上的点标注是通过一个小工具实现的，产品在工具上圈出点的位置和大小，工具会输出图片原始尺寸、图片在工具中显示的实际尺寸和标注点在图片上的相对位置和大小，在后台管理系统把数据和图片配置上去。情侣模式通过融云SDK实现实时通讯，通过事件监听和时间推送同步双方状态。通过html2canvas生成分享图片，调用客户端分享接口实现站外分享。使用技术栈
- 情侣宠物2024.9.6-2024.10.1项目描述该项目是使用Cocos Creator引擎制作的一个小游戏项目，使用typescript开发，最后打包成H5。游戏是一个模拟养成类游戏，新用户进入游戏首先会获得一个待孵化的蛋， 用户点击孵化后会进入12小时的孵化阶段，孵化阶段可以通过可种方式加速孵化（抚摸蛋、看广告、添加桌面小组件）。 孵化成功后就会进入到宠物详情的页面，宠物在这个页面居中展示。宠物会有各种不同的状态（正常、不开心、生病、开心），不同状态会显示相应的动画，用户可以通过可种道具照顾宠物（喂养、洗澡、上厕所、娱乐）。 后期迭代中还新增了宠物打工、家具布置、宠物装饰功能，宠物通过打工赚取代币，代币可以换取装饰（也可以充值购买）。项目难点前期对于cocos creator引擎不太熟悉，开发过程比较困难，后期对于引擎的功能和API熟悉了些之后开发的就比较顺利了。后续这个游戏日活跃用户也稳定在了5w左右。使用技术栈
- 点亮旅行地图2024.06.04-2024.06.14项目描述这个项目主要功能是展示情侣双方去过的城市，去过的城市分3种状态：男生去过的、女生去过的、一起去过的城市。不同状态的城市用不同的颜色进行区分。 标记城市有两种方式，一种是通过App提供的接口扫描用户的相册，通过相册照片包含的位置信息，获取城市数据。第二种是用户手动添加，通过地址选择器选择自己去过的城市。 用户可以在统计页面分享他们的地图项目难点地图通过leaflet插件渲染自定义不带标注和国境线的瓦片图层，在阿里datav可视化数据平台导出行政区划范围数据（用nodejs写了个小工具来导出所有省市边界数据）。通过GeoJson动态设置style控制地图缩放到一定级别之后的显示样式。通过html2canvas生成分享图。使用技术栈
- 1314打卡认证2024.01.15-2024.02.23项目描述包含三个阶段的认证：14天认证、100天认证、365天认证。当用户打卡到对应天数之后会解锁对应阶段的认证，在未完成上一个阶段的认证之前不能解锁下一个阶段的认证。 14天认证包含姓名性别出生日期三个基础信息用来筛选不满足打卡条件的用户（年满18岁的异性情侣用户才满足打卡条件）。 100天认证需要上传双人合照和拍摄本人正脸照，正脸照用来后期365天人脸识别校验对照。 365天认证包含三个步骤，第一步用户填写收款账号信息（第一个人填写之后，第二个人无法修改）。第二步用户上传身份证正反面照片。第三步调用人脸识别SDK进行人脸识别认证，认证未通过无法提交信息。项目难点100天需要拍摄用户人脸照，并且要求只能现场拍摄不能通过相册选取，传统的input标签就不能满足条件了，于是后面通过MediaDevices接口来获取相机的媒体数据流，然后在video标签上播放媒体数据流，点击拍照按钮时通过htm2canvas库将video标签内容生成导出为图片，然后使用img标签展示图片。还可以在video标签上使用filter样式属性来达到一定的美颜效果。使用技术栈
- 恋爱记会员2023.12.01-2023.12.06项目描述恋爱记App会员中心页面，包含会员信息展示、开通会员、会员权益展示。项目难点不同的系统，不同的Sku对应的支付渠道都可能不一样，而且项目中会有很多其他页面也涉及到支付场景，因此需要把支付逻辑提取出来进行封装。在需要调用支付的页面中只需要引入封装好的文件即可调用支付功能，只需要输入商品信息参数。封装的逻辑里面包含了下单、调用不同渠道的支付方法（客户端支付、H5支付、小程序支付）和回调返回处理。使用技术栈
- 情侣攒钱2021.04-2021.06项目描述恋爱记和支付宝小荷包一起合作开发的一个功能，用户在恋爱记点击开通，跳端到支付宝小荷包完成校验。 情侣双方都开通之后才会开通情侣共同账户，开通之后用户默认进入首页，首页展示账户总金额、待提现申请记录、男女双方各自存入取出金额概览。 首页有攒钱明细、存入、取出功能页面入口。攒钱明细通过日历和列表的方式展现用户每月和每天的存入取出明细。 存入页面输入存入金额后点击按钮跳转到支付宝完成动账逻辑，返回后调用接口确认是否完成转入。转出页面用户输入转出金额后点击按钮会发起一个转出申请，另一半在攒钱首页可以看到转出申请，并可以直接点击同意和拒绝按钮操作。项目难点项目主要是和支付宝的技术人员对接，实现过程中没有什么技术难点，有自己封装一个日历组件用来展示攒钱明细。该项目也是恋爱记的核心功能之一。使用技术栈
- 情侣闹钟2020.06-2020.06项目描述这个页面展示了双方的睡眠状态、位置和天气信息，并根据状态动态更换背景和动画（可以根据用户定位地点天气显示不同的动画，根据睡眠状态显示白天和黑夜背景状态）。 用户点击“我睡了”之后可以选择播放白噪音以帮助入睡，另一半的状态是睡眠状态可以点击“叫醒他”叫醒对方。 此外，应用还提供分享功能和引导提示，帮助用户更好地使用应用，同时请求位置信息以提供更准确的背景信息（有几个特定城市有定制化的背景图）。项目难点在实现睡眠白噪音的需求时，一段白噪音的时长通常在1分钟左右，因此需要循环播放，但是给audio标签设置loop属性后，在结尾和循环开始处会有明显的中断，体验非常不好。 后来我改为使用两个audio标签不设置loop属性，通过给两个audio标签设置timeupdate监听，判断当前摄放标签的crrentime和音频的duratio接近的时候就开始播放另一个audio标签(结尾处可能会有两个audio标签同时播放的情况，但是在听感上不会有很大的感受)，两个audio标签交替播放，就不会存在中断的体验性问题了。使用技术栈
开源/个人项目
- 保质期助手2024.12.14-2024.12.19项目描述该项目为原生微信小程序，主要包含三个页面：列表页、详情页、新增物品页面。列表页为主页面，顶部显示正常、临期、已过期三种状态物品的数量统计。 下方是物品的列表，列表项包含物品名称和保质期剩余天数信息，列表按照保质期剩余天数排序展示，过期的物品在最前面。 点击列表项会跳转到物品的详情，详情包含了物品生产日期、保质期、备注信息和删除操作按钮。 小程序的所有数据均存储在本地storage中，不包含任何接口请求。项目难点小程序采用weapp-vite构建，引入了weapp-tailwindcss插件方便样式的编写，使用dayjs方便时间的处理。使用技术栈
- 仿BOSS直聘小程序（个人练习项目）2024.12.14-2024.12.19项目描述该项目为原生微信小程序，主要包含首页职位列表页、用户个人详情页、岗位搜索页、岗位详情页、地图展示公司位置页面、用户期望职位列表页、在线简历页面、用户基础信息修改页等。 主要功能就是模仿的BOSS招聘小程序。该项目为练习项目，主要是为了熟悉微信小程序开发，也是我的第一个小程序实践项目，项目没有任何商业行为也不具备商业价值。项目难点采用原生微信小程序开发，包含了完整的后端接口。使用技术栈
- BOSS直聘小程序后台管理（个人练习项目）2024.12.14-2024.12.19项目描述该项目使用vue2+elementUI开发，主要是为了配套小程序的一些配置做的后台系统，主要包含岗位管理、公司信息管理等。使用技术栈
- BOSS直聘小程序服务端（个人练习项目）2024.12.14-2024.12.19项目描述该项目采用nodeJS的Express框架开发，为小程序和后台管理系统提供接口，数据库采用的是mongoDB。个人使用nodeJS写后端的第一个项目，通过项目熟悉了nodeJS的相关服务端性能。使用技术栈