双11密令红包的前端技术方案

[songsiqi]

玩法简介

今年的双11不仅买买买令人兴奋，密令红包也让人欲罢不能、抢到手软。每天，都有新鲜出炉的密令从各种渠道放出，只要打开手机淘宝，在搜索框输入密令就可以抢现金红包啦~

一年一度的红包盛事没有彩蛋怎么行呢？输入秋裤、冰箱、手机膜试试看？哎呀我的手机怎么这样了？

咳咳，双11已经结束，我们还是回归具体需求和技术实现本身吧:P

需求整理

如上所述，密令红包主要分为以下两种：

• 密令红包：商家、明星、平台或者个人预先设置一段密令，用户通过搜索框输入密令参与抽奖，得到红包。
• 关键词红包：对于用户输入的一些特定搜索关键词，播放一段动效（2种打底动效 + 6种特殊动效），然后参与抽奖获得红包。

今年的双11是无线主导，我们不能满足于只做手淘中的页面，还要在更多的地方把这个玩法落地：

• 应用：淘宝、天猫
• 操作系统：iOS、Android
• 终端：Phone、Pad、PC

设计一套技术方案来满足这样的需求，并在短时间内快速实现，还是蛮有挑战的。待解决的问题主要有两个： 跨终端适配 和 玩法接入 。

跨终端适配

这个玩法几乎所有的页面都需要适配Phone、Pad和PC。使用响应式开发，一套页面适配所有端曾经是我们的梦想，但是也得回归现实。不管是从设计方面，还是技术实现方面，密令红包的PC版本都与Phone版本存在着较大的差异，针对PC和Phone做两套页面的实现是无法避免的。

对于Phone页面，我们使用寒冬 @wintercn 大大亲自设计的手机淘宝可伸缩布局方案lib.flexible。为了在工程上解决rem值转换的问题， @songsiqi 开发了px2rem工具集，gulp插件、webpack loader、postcss插件一应俱全。

PC版本是需要以模块方式提供给首页、搜索结果等页面，页面兼容旧版本IE，使用KISSY。

而对于Pad页面，之前的实践和积累都是比较缺乏的。

• 比起Phone和PC，Pad的使用场景受限，页面pv/uv都比较小。
• Pad的展示效果类似PC，但交互体验更像是Phone。
• 手机淘宝的自适应布局方案lib.flexible并没有考虑Pad。

结合淘宝Pad、天猫Pad页面的具体情形，和密令红包本身的需求，考虑到实现的成本，最终的解决方案是： Pad页面在PC页面模块的基础上适配而来，做一些额外的样式和功能定制 。Pad页面和PC页面的不同之处在于，接入方是自己的页面，而非外部页面。

玩法接入

整个密令玩法都是基于 搜索框 来玩的。对于不同的终端，接入的方式也不同。

Phone、Pad：使用poplayer接入

Poplayer是淘宝/天猫APP的一个native组件，可以在当前native页面上覆盖一层h5页面，当poplayer页面背景为透明或半透明时，可配置用户是否能够点透至被覆盖页面。Poplayer的出现，融合了native与h5，我们得以利用h5页面快速开发、快速迭代的优势，对下方已有的native页面的交互功能进行增强。主要应用场景如下：

• 添加入口：持续放在native页面的某个位置，例如手淘的图文详情上浮动的“问大家”入口。
• 弹层覆盖：例如今年双11的密令红包，就是使用了poplayer，在正常的搜索逻辑基础上接入了密令红包玩法。具体过程如下图所示：

PC：提供KISSY模块接入外部页面

PC上的密令玩法会接入淘宝/天猫/海淘的首页、搜索结果等页面。与Phone和Pad不同的是，这次我们暴露给外部页面的是KISSY模块，而非页面。KISSY模块的依赖关系如下图所示：

接入密令红包玩法相关模块之后的搜索过程如下图所示：

最终效果展示

以C2C红包为例：

• Phone效果：

  

• Pad效果：

  

• PC效果：

  

小结

就这样， 搜索被我们玩坏了！！！

这些玩法和一个个对应的技术点，拆开来看似乎不是很特别，但是作为整套解决方案，把一路的探索过程和踩过的坑梳理清楚并沉淀下来，还是很有意义的。

[qingying]

工具小能手

[kujian]

插件和适配方案很不错。mark

[w91]

这个流程图不错，用的什么软件？

[songsiqi]

@naiyiwang Gliffy

[w91]

@songsiqi 多谢~

[robinli08]

很全面

[ghost]

mark

[liuxusheng2006]

学习了。。good work