一、活动背景

作为一家团队文化氛围浓厚的公司，每年的3/8女神节活动那是必不可少的。

一般来说，这样的活动想要收到足够的效果，那高密度的人员聚集是必不可少的（比如去年就组织了大型送玫瑰花活动加现场抽奖）。奈何今年正是疫情期间，这种形式实在是无法开展。那怎么办呢？

于是人力想到了线上抽奖（还有另外两个活动，因为没有参与，所以就不列出来啦），很荣幸的，人力让我来负责前端，与另一个部门一位优秀的后端同事来配合完成整个线上抽奖活动，当然啦，还有一位认真负责，非常优秀的UI同事。

本次的抽奖活动定于3/6号周五中午进行，发布形式为向集团APP内注册h5应用，开发时间大约两天。

二、前期准备

在正式着手开发之前，人力已经为我们准备了一份完整的女神资料表（绝密资料，概不外传！）。由于无法保证集团用户数据的准确，所以系统内用到的所有个人资料数据（员工编码除外）都将来自该表格。

鉴于我和后端同事都是第一次往集团APP内嵌入应用，那么第一步自然是要阅读集团的第三方开发文档。

通过阅读文档我们得知，往APP内嵌入h5页面的大致流程就是：

搭建一个可在公网访问的网站
去APP内注册一个应用，填写应用参数，并填写上述网站首页的链接地址
通过与集团APP后台服务进行一系列交互，获取当前用户数据

第一步基本上与搭建常规网站无异。

第二步则是登录集团APP，新建一个应用。由于一般用户缺少发布给其他人的权限，因此这一步主要由人力的相关人员完成。

第三步则是获取用户数据。既然是抽奖，那么必然要知道抽奖人是谁。而作为内嵌到集团APP的h5应用，我们需要从集团的后台服务器获取这些数据。这个过程大致为：当用户点击APP中注册的应用时，APP会向我们的服务器发送请求获取首页，同时，在发送首页请求时，会在url后面添加一个临时的code参数，一分钟有效。服务端可通过配置拦截器来拦截该请求，提取code参数。然后通过几个特定格式的请求与APP的后端服务器进行交互，获取该用户的参数，并将获取到的员工编码存储到后端的session中。

接下来就很简单了，集团的APP会在内置浏览器（webView）中显示我们的首页，之后用户的操作和流程控制等均由我们自己的代码负责。

三、技术选型

这里指的是前端技术选型。

由于目前公司在前端方面基本已经采用了vue技术栈，所以这里我就毫不犹豫选择了vue进行前端开发。在vue的基础上，我选择了基于Promise的http库：axios；vue官方支持的路由组件：vue-router；另外引入了mockjs，在开发阶段模拟后端请求，以提高并行开发能力。这些基本上都是一个最简单的vue项目的标配。

除了基本的技术框架外，还有一个不得不正视的问题，那就是字体问题。作为一个UI，在设计活动页面的时候必然是以美观为第一要务的，所以基本上不太可能选择基本的web字体格式。一般来说，UI会为前端提供其所用的字体文件：xxx.ttf，而这个字体文件基本上会在10MB以上。

有一部分浏览器会在字体文件下载完成之前先用浏览器内置的字体格式显示页面内的文字，还有一部分则会一直等待字体文件下载完毕才会渲染页面上的文字。无论哪种情况，让用户因为下载一个10多兆的字体文件而等待七八秒以上才能看到最终页面都不在一个前端开发者可接受的范围内。

即使换个字体，还是会面临同样的问题。如果想把所有的文字段落都使用图片代替也不现实，毕竟文字模板中还穿插着少量的动态数据。

那怎么办呢？

在这里我要向大家隆重介绍一个基于nodejs的字体文件压缩工具：font-spider。它的压缩原理是，通过font-spider xxx.html命令，自动识别该文件内用到的第三方字体，然后检查文件内的哪些文字用到了该字体（我们暂称为目标文字），最后从完整的字体文件中剔除目标文字以外的所有文字。

一个完整的中文字体库大约有五万多个字符，而本项目中只用到了其中大约两百多个。使用font-spider剔除了五万多个未用到的字符之后，字体文件大小直接从13M压缩到了200KB，而且从一个ttf格式的文件生成了兼容各大浏览器的四种文件格式，简直是梦幻般的效果！

四、主要的技术实现

完成了前期的技术铺垫，我收到了来自UI的设计图 – 一个160多兆，psd格式的美图（为了保护UI的知识产权，这里就不上高清大图了）！

这里切图工作就不再啰嗦了。切图完成后总共得到了十多个图片，存入项目assets/img文件夹备用。

然后是字体文件压缩。首先运行一下命令安装font-spider:

npm install font-spider -g

为了简单，我把人力给出的完整文案放到一个单独的HTML文件中进行压缩，格式大致如下：

<!DOCTYPE html>
<html><head><style type="text/css">@font-face { font-family: '华康方圆';src: url('./HuaKangGuJiMuLan-Regular-2.eot');src: url('./HuaKangGuJiMuLan-Regular-2.eot?#font-spider') format('embedded-opentype'),url('./HuaKangGuJiMuLan-Regular-2.woff') format('woff'),url('./HuaKangGuJiMuLan-Regular-2.ttf') format('truetype'),url('./HuaKangGuJiMuLan-Regular-2.svg') format('svg');font-weight: normal;font-style: normal; }body{font-family: '华康方圆';}</style></head><body><p>xxx(文案数据)</p></body>
</html>

由于设定body内的文字全部使用华康方圆体，因此这里出现的文字都会被保存到最终生成的字体文件中。将完整的字体文件放在该HTML同级目录下

打开cmd命令行，进入当前文件夹路径下，输入：

font-spider spider.html

压缩结果如下：

原文件被自动备份到了.font-spider文件夹内。生成的四个字体文件放到项目的assets/font文件夹备用（虽然这里有四个字体文件，但是最终浏览器只会下载其支持的第一个字体文件，准备多个格式的文件可以兼容各大浏览器）。

下面就是真正的前端代码编写了。

活动主要包括四个页面：抽奖页面、在京女神获奖页面，非在京女神活动页、男职员广告页。由于是单页应用，实际上这里的四个页面指的是四个组件，由APP.vue组件通过路由来决定当前用户应该跳转到哪个组件显示。

要决定显示哪个组件，当然必须先知道当前用户的参数，比如性别、是否在京、是否已开奖、开奖结果等，这些参数通过后台接口getUser提供。因此在显示页面之前，前端会向后端发起一次请求，获取当前用户的数据对象。路由逻辑如下：

性别为男，直接加载男职员广告页
性别为女，未开奖，跳转到开奖页
性别为女，已开奖，跳转到获奖页，显示获奖结果

跳转到开奖页之后，如果用户点击开奖，则向后端发起请求。如果是非在京的，则不返回任何数据，只是记录已开奖，前端根据用户参数，显示一个活动页。如果是在京的，则后端根据当前各个奖品的剩余数量，按照概率计算出所中奖品（据人力反馈，最终大家所中奖品都很符合自己的心意，不知道是不是后端进行了大数据分析，作为前端，咱就不关心这个了哈哈），前端获取到中奖类型后，显示对应的文案和奖品图片。

如果是实际参与到抽奖的女神，应该可以看到，在点击抽奖信封的时候，获奖页有一个短暂的淡入效果，并且信纸有一个向上抽动的小动画。关于淡入效果的实现比较简单，只需要把路由组件放在一个transition组件中，配置淡入的css动画即可。不过信纸的向上抽动效果代价就略大一些。

这里我说的是代价，而不是难度。因为实现抽动效果的难度并不大，下面的代码就可以实现：

<script>export default{methods: {flowPaper(){setTimeout(function(){let paper = document.getElementById("paper");let content = document.getElementById("content");let award = document.getElementById("award");paper.style.top = "20%";content.style.top = "27%";award.style.bottom = "10%";}, 100)}},mounted(){this.flowPaper();}}
</script><style>
.paper, .content, .award{transition: top .6s;-moz-transition: top .6s; /* Firefox 4 */-webkit-transition: top .6s; /* Safari and Chrome */-o-transition: top .6s; /* Opera */...}
</style>

短短几行js，加一个css过渡动画定义就可以了。但是由该动画引出的，是对前端构图的变更。

如果没有抽取动画，前端完全可以把背景、信纸以及信纸上的装饰物切成一张图，只留出打印文字以及显示获奖图片的位置即可。但是要实现抽取动画，这三个图层必须隔离开，因为只有信纸位于背景图和装饰物的中间图层，才可能实现抽动效果。于是我把上面的图片切成了四张图片：背景图、信纸、奖品和信纸上的装饰物。背景图、信纸和装饰物可以在五种奖品的获奖页使用，而奖品则需要根据中奖结果动态设置。再配合上文案的三个段落，就完成了获奖页面的构图。接下来只需要设置一个100毫秒的延迟，用js修改信纸、段落和奖品图片的位置，配合css所定义的过渡效果，就可以产生柔和的信纸抽出效果。

另外，由于信纸采用的百分比高度，因此它的长度在各个分辨率的手机上并不是固定的，但是文字的行高却很难保证与所有的屏幕高度恰好匹配，这带来的结果就是要么在小屏手机上奖品被遮挡，要么在大屏手机上文字挤在一堆，影响美观度。

为了解决这个问题，我对页面构图进行了简单的分析（由于时间有限，行高的自适应问题做的稍微有点粗糙）。我发现几乎在所有的手机上，文字加奖品图片的高度都大约是屏幕高度的一半，而奖品图片又可以采用固定大小，因此整个段落的高度大约是屏幕高度的一半减去奖品高度。再用这个结果除以大致的行数，就可以得到一个粗略的行高值。用js动态设置这个行高值，就可以大大提高页面对不同分辨率手机的适应能力（说是这么说，但真正动起手来，大约调了一个多小时才调整到基本满意）。

另外还有一个问题，就是页面返回。集团的APP内提供了一个返回键，在最初的版本中，我发现当抽完奖之后去点击这个返回键，就会出现白页，而且在相当长一段时间内都没搞清楚什么原因。经过反复的测试，我发现实际上点击这个返回键的行为与点击浏览器的返回键是一致的，于是我转移到浏览器去分析如何解决。下面是某个页面的路由参数：

http://xxx/indexhtml#/WomanPage

我发现点击了返回键之后，路由变成了下面的样子：

http://xxx/indexhtml#/

现在就白页了。那么问题就很明显了，因为我的路由表里没有配/对应的组件，所以没有东西可以渲染。我当时想到的解决方案是，在路由表里配一个/对应的组件，然后找UI临时做一个返回页，写点祝福语什么的（没错，我又理直气壮地跟UI要了一张好看的图片）。

UI的图片给我了，放上去，发现效果还不错。但是咱作为前端，总感觉这问题它不简单。后来去查vue-router相关的资料，突然想到，如果用this.$router.replace代替this.$router.push，那不就解决了吗？

果不其然，现在一点返回，就可以成功退出页面了。但是人力小姐姐偏偏就看上了刚才做好的返回页，咱能咋办呢，那就加回去呗（一个bug转需求的感人故事）！

五、完工上线

这就没啥可说的啦，技术人员负责导入数据，启动服务；人力那边配置APP应用地址和图标，选择可见范围为公司所有人。11:38，女神纷纷拿起手机，点击抽奖，下午送礼到工位，活动圆满成功，拍手庆贺！

在所有的功能里，我最喜欢的就是那个信纸向上抽出的动画效果了。虽然实现起来并不难，但是我想让每位女神感觉到，你所中的奖品并不是事先准备好的，它的确是你刚从信封里拆出来的。我把这个0.6秒的动画称为“0.6秒的惊喜”，作为我送给公司三百多位女神的礼物！

前端技术分享之3/8女神节抽奖活动相关推荐

好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
前端技术分享之HTMLHTML5
前端技术分享之HTML&&HTML5 HTML 发展历史 HTML文档模式标准模式 HTML 4.01 严格型 XHTML 1.0 严格型 HTML 5 准标准模式 HTML 4.0 ...
2019年长沙前端技术分享大会圆满成功
做一个积极的人编码.改bug.提升自己我有一个乐园,面向编程,春暖花开! 本文首发: 唐胡子俱乐部,授权发布! 摘要长沙百名互联网前端程序员齐聚长沙互联网活动基地(唐胡子俱乐部). 主办单位:唐 ...
Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
web前端技术分享：前端开发与后端开发的区别是什么？
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
30个前端技术分享主题
这是我们团队前30期的前端内部技术分享主题,我做的是第1.10.19期的分享,仅供大家参考
web前端技术分享：web前端的求职前景好不好？
想要进军互联网行业,大部分人会选择web前端和web前端这两个技术,因为两者之间的发展前景是非常好的.下面我们就先来了解一下web前端的求职前景好不好? web前端的求职前景好不好?近几年的热门行业里 ...
Web前端技术分享：全栈工程师常用的开发工具
全栈工程师,也叫全端工程师,是指掌握多种技能,并能利用多种技能独立完成产品的人.全栈工程师熟悉多种开发语言,同时具备前端和后台开发能力,从需求分析,原型设计到产品开发,测试,部署,发布全流程都十分熟悉 ...
web前端技术分享：详解模块化require 和 import的区别
在前端开发中,我们可以使用很多模块化的库来帮助我们更好的实现效果,有一些库的功能类似很多同学就不知道该如何选择,比如require和import,今天小千就给大家介绍一下两者的区别. 一.区别 1.r ...

前端技术分享之3/8女神节抽奖活动