阿里 11.11 密令红包的前端技术方案

玩法简介

双 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页面的不同之处在于,接入方是自己的页面,而非外部页面。

同一模块适配PC和Pad页面

玩法接入

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

Phone、Pad:使用 poplayer 接入

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

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

Phone、Pad接入

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

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

PC接入模块依赖图

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

PC接入中转逻辑

最终效果展示

以 C2C 红包为例:

Phone效果:

Phone效果

Pad效果:

Pad效果

PC 效果:

PC效果

小结

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

以上是 阿里 11.11 密令红包的前端技术方案 的全部内容, 来源链接: utcz.com/p/234309.html

回到顶部