在云栖Teachday活动第二十八期上，淘宝无线开发工程师梨月带了题为《PopLayer 之旅》的精彩分享。分享中，她对PopLayer的起源、实现原理、工作方式等一一进行了仔细介绍；在分享结尾，梨月还分享了PopLayer在双十一计划内外的使用状况。
PopLayer的起源
PopLayer最早起源于2014年双十一，最初为应对启动仪式而设计，采用Native方式开发，需要加载到手淘双十一版本才能使用，开发之后只能使用一次，不存在复用价值；在2014年双十二时，采用了hybid的解决方案，通过在详情页上嵌入Webview，需要进行活动时，直接调用Webview，在其上再写一些对应的前段代码即可，在腊八节和三八节实现了复用；在2015年6月，引入了名为Poplayer的中间件，动态监听页面切换，切换到新页面时，再进行判断该页面是否具有相应的配置以及是否需要展示相应的活动，动态地添加Webview，实现了所有的场景一次投入重复使用。
总结来说，PopLayer可以在任意Activity ( ViewController ) 上附着的一个透明的View，它可以通过H5或Weex快速完成活动功能开发；活动是通过配置的形式投放出去的，所以在无需发版的情况下，通过运营后台直接就可以将活动发布出去；并且PopLayer它可以在不影响常态业务功能的同时，增强Native页面本身的交互能力。
PopLayer的实现方式
下面将从UI结构、用户交互、能力扩展、生命周期四部分来介绍PopLayer的实现方式。
UI结构
首先在UI结构上，在手淘的扫码页投放了一个活动的入口，其实我们不希望去篡改下面的Native页面的任何一个UI，所以是修改扫码页面它原有的UI和逻辑，不侵入到它这个页面中去，而是在页面上方覆盖了一个全屏的Poplayer View，该View是透明的，因此H5或Weex的开发可以在任意的位置部署它的业务逻辑。
用户交互
其次，由于是在全屏的页面上覆盖了View，用户在进行操作的时候，如何让用户的操作还可以按照原来的路径去响应呢？这就涉及到用户的交互，事实上默认是不捕获任何用户行为的，而是将所有的用户事件都会传到Native页面，由Native响应；但是在我有一些入口，比如现在点击领取双十一红包这也是一个Poplayer的入口，希望通过点击之后进入AR活动页面，此时需要在点击到这个位置的时候，从H5的逻辑进入到AR活动页面去，此时可以设置一个阈值，假设设置的阈值为0.8，按钮这边区域的Alpha值是1，当该Alpha大于所设的阈值时，就可以捕获了该用户事件的操作，然后交与Poplayer View去处理，下一步跳转到对应的AR互动页面上；对于Alpha小于0.8，也就是用户操作位置的不透明度小于设置的阈值，用户行为透传给Native处理，例如，此处点击返回按钮依旧会返回上一级页面。
能力扩展
那么Poplayer是怎么对Native的能力进行扩展的呢？首先，H5或Weex提供了动态能力；其次我们可以进行任意Native View的跟随，如图片跟随，补充原有的Native UI界面，例如，有些运营活动希望的不仅仅是运营活动，还希望可以进行Native元素进行互动；想过年不打烊的活动中，利用图片跟随方案，我们在首页是个icon的位置进行了一场打地鼠的互动活动，很好的增强了首页icon的交互性、趣味性。除了Native View的跟随外，类似的，我们也可以将整个PopLayer View作为跟随的元素来做营销互动。
生命周期
下面来谈一下Poplayer的触发方式。上文有提到，可以通过监听页面切换来判断在新的页面上是否有活动需要展示，因此页面切换是最常用的，大多数场景都采用这一方式去触发；在有的情况下，例如，在首页并不是用户切换到该页面就弹出活动，而是用户点击某个按钮或滑动到某个位置等操作，才弹出某个活动，这时可以通过Native触发，然后发送自定义消息来触发Poplayer的弹出；第三种触发方式是通过拦截Poplayer协议来触发Poplayer的弹出。
与触发对应的是关闭机制，Poplayer关闭方式包括两种情况：一是当首页有一个Poplayer，从首页切换到其他页面时，会关闭首页的Poplayer；其次Poplayer还为H5、Weex提供了Close API，它们可以通过调用该API来关闭Poplayer。
Poplayer的应用场景和技术意义
下面来看一下Poplayer的常见应用场景以及其技术意义。
目前一些活动，如元旦、饿货节、造物节、双十一等，每一个活动都会有一个揭幕式。现在所有的首页揭幕都是通过Poplayer完成的。Poplayer支持混合开发，它可以利用Native完成稳定的功能，又可以利用Poplayer完成多变的业务。例如搜索关键字案例，搜索还是完成稳定搜索这个功能，而像搜索秋裤时，会弹出弹幕浮层的效果。这个效果是由Poplayer完成的；同时，Poplayer支持复杂的交互，像马总敲钟的案例，在首页右上方有一个马总的头像，用户点击马总头像时，可以进去和马总共同敲开市钟，赢取大红包；此外，Poplayer可以支持Native元素的替换，并且能与之互动；最后，Poplayer支持静默逻辑，在某个页面投放一个页面空白的Poplayer，可以在用户无感知的情况下开启定位或传感器功能。
Poplayer的技术意义
有了Poplayer之后，运营人员可以很方便地投放运营活动，它最大的技术意义在于分离了稳定的产品与临时业务，使得在活动开发的过程中可以兼顾稳定产品和临时业务之间的逻辑，大大加速活动开发的效率；另外，虽然手淘任一页面都不属于我们团队，但可以在任意页面投放Poplayer，所以每个页面都会成为我们的一个营销入口；同时，当有一些新的产品想法时，可以对新产品试水，这是因为贸然地去做Native开发，代价会很大。通过在详情页投放Poplayer，在页面右侧出现一个问号，点击可进入H5页面，再对以前的买家调研，进行产品的评估。
Poplayer在双十一
最后谈一下Poplayer在双十一的应用。
在2015年双十一时，只计划使用在四个活动中使用Poplayer：一是首页的揭幕式；二是AR活动的抽奖；三是搜索红包；四是首页的红包雨。有了Poplayer这个技术产品之后，为这类的营销活动创造了可能；并且在计划外也得到了应用。在15年双十一时，有一个突发状况，本来红包雨已是最后一场，但由于文案的错误，对用户显示为两个小时后还有一场。因此，只能硬着头皮再上一场红包雨，这个突发情况整体从发现再到设计解决方案以及最后的开发上线，总共花费时间不超过两个小时；也就是说Poplayer给我们提供了急速交付能力，使得我们可以很好地处理线上的突发情况。
创造可能
现在来谈一下搜索红包，因为搜索红包当时相当于是把搜索给玩坏了，用户反响很好的一个活动。搜索红包分为命令红包和关键字红包，命令红包是平台和商家提供的红包，个人用户我们也可以去生成CC密令去发放红包。搜索命令先是在搜索页面去搜索一个命令，然后搜索完之后转到红包领取页面进行红包的领取，并且可以将这个活动分享给朋友。
另一个关键字红包，可以搜索如肥皂、冰箱等关键字时，在搜索结果页展现出一个关键字特效，特效结束后，也是会引流到店铺去领红包。搜索红包的设计链路比较长，它涉及到三张Native的页面，搜索页、搜索结果页和店铺首页，并且当时在手淘、天猫等6个客户端都投放了该活动。它的主要链路首先在搜索关键词页，搜索某一个命令或关键词，点击搜索之后，转到搜索结果页，此时会发送一条弹出Poplayer的消息，然后在搜索结果页上面弹出一个Poplayer，这个Poplayer里面承载的业务逻辑是一个中转页的逻辑，在其中会进行判断，如果搜索的关键词是平台命令或商家命令，然后再跳转到H5页面上去领取平台或商家提供的红包；如果判断是个人生成的个人命令，会跳转到H5去领取CC红包；如果是一个关键字，首先会在搜索结果页展示关键字的特效，特效结束后会跳转到店铺，然后在店铺里利用Poplayer进行抽奖。可以看到，整个搜索红包的链路非常长，如果不采用Poplayer，而是直接采用Native来做的话，可能会影响原本搜索到进店的整个逻辑；并且该搜索到店的过程是手淘用户一个主流程，如果出现差错，必然会导致故障的出现，整体的风险也较高。
采用Poplayer来开发这样一个搜索红包的方案的话，其实Native并不需要动用太多的代码，它只需要在搜索时给Poplayer发一条消息即可，其他逻辑都是在Poplayer内完成，因此对主链路其实没有太大的影响，所以风险也很小。即使在搜索红包活动中出现问题，也可以快速下线，不会影响之前的搜索到进店整体的逻辑和流程。
极速交付
除了计划内上线的活动外，还在计划外上线了8个活动，例如从首页引流到站内、临时脑爆一些玩法以及处理线上突发情况。这些临时活动全部是在48小时之内交付的，并且这8个活动差不多是有3个两个小时内交付的，最快的临时活动做到半个小时上线，而且做到临时活动无故障无线上Bug，其中有活动QPS峰值达到两百多万，但是它依然很稳定。因此，可以看到Poplayer将稳定业务和活动业务分离开之后，可以大大加速活动业务的开发，并且可以让开发者轻装上阵，风险极小，可以很轻便地去投放运营活动。
