记一次电商活动页开发经历

对电商项目来说，营销活动肯定是少不了的促销手段，比如淘宝的双11、支付宝最近的瓜分15亿等等，那么在很多时间节点，我们前端开发就要进行一些活动页的开发。我们bilibili会员购项目在这过年前夕也将上线一个集卡游戏的活动页，我负责开发的部分是闯关和抢仓库的部分。整个集卡游戏的流程就是许愿集赞、下单做任务获得卡牌，然后用卡牌来闯关，最后到仓库中抢商品，当然还有一些其他的辅助页。

在做这次活动页的过程中也遇到了一些问题，这些问题在平时的业务开发中可能遇到的稍微少一点，这里我列出来记录一下：

1. 闯关页从第1关进入第2关时，背景有一个往前走的动画效果，并且保留动画最后一帧的状态。animation-fill-mode: forwards;
2. 闯关查看卡牌详情时价格需要千分位加逗号，数字用图片代替。
3. 每一关除了正常的背景图，还有一张光圈背景，用img加定位加层级实现。
4. 点击bilibili app或浏览器返回键，自定义处理一些业务逻辑。监听popState，必须先pushState
5. 抢仓库页头图机械手臂需要动画扫描效果，手臂分为了5段。css3动画
6. 抢仓库底部按钮置底了，需要处理iphone x适配。
7. 抢货成功时需要用canvas画分享图片。
8. 在canvas中拉cdn上的图片资源时存在跨域问题。设置crossOrigin属性
9. 开发时在chrome中查看canvas画出来的图片时，是base64的，由于安全问题被chrome拦截的处理。
10. 前端强缓存导致img onload事件执行失败，在url加查询参数避免走缓存。
11. canvas中绘制超出定宽文字出现省略号，画六边形头像。measureWidth方法
12. 弹窗和toast插件的处理。

闯关和抢仓库最终做出来的效果如下：

闯关：第1关、第2关、第3关；

抢仓库：列表、抢成功、放弃、分享至其他渠道