雙11密令紅包的前端技術方案
玩法簡介
今年的雙11不僅買買買令人興奮，密令紅包也讓人欲罷不能、搶到手軟。每天，都有新鮮出爐的密令從各種渠道放出，只要打開手機淘寶，在搜索框輸入密令就可以搶現金紅包啦~
一年一度的紅包盛事沒有彩蛋怎么行呢？輸入秋褲、冰箱、手機膜試試看？哎呀我的手機怎么這樣了？
咳咳，雙11已經結束，我們還是回歸具體需求和技術實現本身吧:P
需求整理
如上所述，密令紅包主要分為以下兩種：
- 密令紅包：商家、明星、平臺或者個人預先設置一段密令，用戶通過搜索框輸入密令參與抽獎，得到紅包。
- 關鍵詞紅包：對于用戶輸入的一些特定搜索關鍵詞，播放一段動效（2種打底動效 + 6種特殊動效），然后參與抽獎獲得紅包。 </ul>
- 應用：淘寶、天貓
- 操作系統：iOS、Android
- 終端：Phone、Pad、PC </ul>
- 比起Phone和PC，Pad的使用場景受限，頁面pv/uv都比較小。
- Pad的展示效果類似PC，但交互體驗更像是Phone。
- 手機淘寶的自適應布局方案lib.flexible并沒有考慮Pad。 </ul>
- 添加入口：持續放在native頁面的某個位置，例如手淘的圖文詳情上浮動的“問大家”入口。
- 彈層覆蓋：例如今年雙11的密令紅包，就是使用了poplayer，在正常的搜索邏輯基礎上接入了密令紅包玩法。具體過程如下圖所示： </ul>
-
Phone效果：
</li> -
Pad效果：
</li> -
PC效果：
</li> </ul>小結
就這樣， 搜索被我們玩壞了！！！
這些玩法和一個個對應的技術點，拆開來看似乎不是很特別，但是作為整套解決方案，把一路的探索過程和踩過的坑梳理清楚并沉淀下來，還是很有意義的。
</div> </div> </div> https://github.com/amfe/article/issues/20
今年的雙11是無線主導，我們不能滿足于只做手淘中的頁面，還要在更多的地方把這個玩法落地：
設計一套技術方案來滿足這樣的需求，并在短時間內快速實現，還是蠻有挑戰的。待解決的問題主要有兩個： 跨終端適配 和 玩法接入 。
跨終端適配
這個玩法幾乎所有的頁面都需要適配Phone、Pad和PC。使用響應式開發，一套頁面適配所有端曾經是我們的夢想，但是也得回歸現實。不管是從設計方面，還是技術實現方面，密令紅包的PC版本都與Phone版本存在著較大的差異，針對PC和Phone做兩套頁面的實現是無法避免的。
對于Phone頁面，我們使用寒冬 @wintercn 大大親自設計的手機淘寶可伸縮布局方案lib.flexible。為了在工程上解決rem值轉換的問題， @songsiqi 開發了px2rem工具集，gulp插件、webpack loader、postcss插件一應俱全。
PC版本是需要以模塊方式提供給首頁、搜索結果等頁面，頁面兼容舊版本IE，使用KISSY。
而對于Pad頁面，之前的實踐和積累都是比較缺乏的。
結合淘寶Pad、天貓Pad頁面的具體情形，和密令紅包本身的需求，考慮到實現的成本，最終的解決方案是： Pad頁面在PC頁面模塊的基礎上適配而來，做一些額外的樣式和功能定制 。Pad頁面和PC頁面的不同之處在于，接入方是自己的頁面，而非外部頁面。
玩法接入
整個密令玩法都是基于 搜索框 來玩的。對于不同的終端，接入的方式也不同。
Phone、Pad：使用poplayer接入
Poplayer是淘寶/天貓APP的一個native組件，可以在當前native頁面上覆蓋一層h5頁面，當poplayer頁面背景為透明或半透明時，可配置用戶是否能夠點透至被覆蓋頁面。Poplayer的出現，融合了native與h5，我們得以利用h5頁面快速開發、快速迭代的優勢，對下方已有的native頁面的交互功能進行增強。主要應用場景如下：
PC：提供KISSY模塊接入外部頁面
PC上的密令玩法會接入淘寶/天貓/海淘的首頁、搜索結果等頁面。與Phone和Pad不同的是，這次我們暴露給外部頁面的是KISSY模塊，而非頁面。KISSY模塊的依賴關系如下圖所示：
接入密令紅包玩法相關模塊之后的搜索過程如下圖所示：
最終效果展示
以C2C紅包為例：