Ⅰ. 项目背景： Pixelmator Pro是一款非常不错的Photoshop替代软件，容易上手且功能丰富，能满足日常无设计师时前端开发的作图及简单设计、扣图工作。该软件提供了大量的在线教程，但可悲的是，大部分视频教程在youtube上，想要实时看，达成条件有些高。所以萌生了把它下载下来，在本地看的想法。 Ⅱ. 项目地址：https://github.com/mooring/pixelmator.pro.tutorials.downloader Ⅲ. 项目构成： 1. C语言写原生页面下载及资源解析 2. 油猴脚本收集教程入口列表及生成调用C程序批处理文件 3. 调用批处理文件下载页面及相关资源（视频、图片、压缩包等） Ⅳ. 项目过程： 1. 审查教程页面结构，发现有两种： 内嵌youtube + 概要介绍， 纯图文页面 2. 处理youtube视频，找到vid, 使用yt-dlp下载到指定目录 3. 保存纯图文页面，并下载相关图片，视频，声音、资源到本地目录 4. 组织保存的页面到一个页面中，修复页面中的链接，指向本地已保存页面 5. 将保存好的资源打包成 光盘 iso镜像文件，方便以后直接使用 Ⅴ. 项目难点： 1. 纯图文页面资源的识别，有背景，有css中的，有链接中的 2. C语言在查找资源时，同一特征在同一行多次出现匹配问题会导致提取地址失败 3. 发送请求时，是否有代理，代理在二进制文件，外部程序及shell脚本中的统一处理 Ⅵ. 项目收获： 1. 一个项目不是单纯一种语言或者工具就可以完成,是一个综合的应用，用最合适的工具完成最合适工作 2. 写完C程序后，多使用cppchecker等类似工具扫描下代码，保证程序的稳定性 3. 不要低估纯图文页面中资源的数量（初步预估30个，不够，50个也不够，最后， 75个目前可接受）

1. 项目背景：在游戏为维度的主播招募活动中，活动页面功能相似，但文字描述及主题是各种各样的。H5端页面做到了通过url中指定不同参数即可加载不同配置，以展示不同报名信息及主题配置信息。为解决重复样式变更而导致的重复发布，皮肤编辑器由此诞生。 2. 功能划分：C端iFrame预览页面 + B端配置表单 + postMessage通信 + 配置导入导出 3. 框架语言：react + typescript + less + html 4. 功能特点： 支持多种活动模板 、导入导出配置、实时预览 5. 细节实现： ①. C端页面监听message事件，处理模板切换、皮肤配置参数更新（css变量）、配置收集还原 ②. B端表单页面： a. 根据模板配置，动态生成表单项，监听表单项修改时，将修改后的值postMessage给iFrame预览页，实时更新数据 b. 本地图片通过FileReader读取为base64格式，发送给预览页，实时预览 c. 通知iframe收集变量信息，及预览框架变更iframe页更新 ③. 通过jszip工具保存base64图片及样式配置到压缩包，读取zip配置信息，并还原到配置页面 6. webpack同时打包B、C端页面 7. 项目效果 ①配置管理端直接交付给设计及产品同学，管理端配置完成后，审核通过即可现网生效。 ②导入、导入配置方便同一类皮肤微调重复使用，减小逐个配置成本

连续5年支持*游戏春节摇一摇活动，从最初版构建，到每年改版，深度参与其中，主要负责摇心愿结果页动效及福利发放相关功能开发 一、项目介绍 1、奖励领取页动画及领取兑换逻辑，支持多主题切换 2、通过 vue 多组件动态切换展示内容，使用 webpack 打包发布 3、使用离线包、批量上报、图片代码压缩、cdn 等技术提升访问速度 4、固化页面模板，通过配置自动生成运营活动，后续活动交由外包团队运营开发 二、问题回顾 1. 业务模块部署不当，高并发导致雪崩 2. 小程序版本页面关闭缺陷，导致*闪退 三、解决办法 1. 区分业务优先级，核心业务逻辑单独部署服务 2. 上报等活动效果相关上报做批量及延时上报，保证业务逻辑请求完成后，才可以做上报，优先保证用户体验 3. 修改小程序自动关闭页面流程，防止闪退 四、经验总结 输出大型活动开发、部署、测试、发布规范及常见问题及风险规避点，防止后续类似活动出现类似问题