POPLAYER起来HIGH~~
zldream1106 opened this issue · comments
前言
红包雨戳红包~~ 戳戳戳有木有戳到high？!
搜索框已然被你们玩坏~~ 你们有木有想念它？！
66元的红包~~ 有木有让你抓狂为什么自己竟然中奖了？！
...
这些让你又爱又恨的玩法，跨页面、跨终端，时间紧、任务急，既要保证玩得high，又要保证稳定性，随便玩玩~~~ 双十一玩坏了怎么行！
duangduangduang~~ ---> POPLAYER <---- ~~来了，这些新玩法的背后，是 淘宝无线事业部-技术互动 组的客户端哥哥兢兢业业、呕心沥血的成果。
没错，这是新的 客户端 技术解决方案，技术改变生活，不但改变了广大人民的日常生活，也改变了前端喵的开发生活，更给我们带了新的业务思考~~~
POPLAYER是神马？
简单来说，对于前端开发的童鞋而言，poplayer可以直观的理解为 —— 在当前页面上再覆盖一层 独立页面 。
- POPLAYER不会影响被覆盖页面
大家都知道，淘宝天猫的客户端采用hybrid技术，即在native中嵌套html页面（下文简称h5页面），所以我们看到的页面有可能是native的，也有可能是h5的。 poplayer层作为一个独立完整的页面，可以覆盖在任何native或html页面上，但是却不会与被覆盖页面互相影响。
比如这次大家玩得很high的红包雨，就是充分利用了这个特性。
- POPLAYER允许透明区域点击穿透
如果只是覆盖在上面有什么好玩？！当然还要更好玩！！！咱能给poplayer层设置透明度，告诉客户端哥哥。“这玩意儿我要透明度超过0.6的时候点击到下层页面！！“。所以只要咱们想，想点哪里点哪里！
还记得哆啦A梦君的小手么？没错，那是一大层poplayer在上面飘，实际上点穿了poplayer才点到了商品详情页！)
- POPLAYER支持多种交互场景
POPLAYER作为独立的页面，要不要展示以什么姿势展示是个问题：
红包雨的打开方式简单明了，切到首页，链接匹配 ~~ 开！！！
玩坏的搜索君，在大家戳一下“搜索”后，命中 ~~ 开！！！
双十一预热万店同庆，接口返回了正确的值，前端同学开心了 ~~ 开！！！
前端君默默的写一个poplayer相关协议头的url地址，戳 ~~ 开！！！
-----------------><----------------
那么怎么关闭？
前端童鞋不开心了 ~ 关！
服务端哥哥不开心了 ~~ 关！
客户端哥哥不开心了 ~~ 关！
这种任(bei)性(bi)妄(wu)为(chi)的灵活性，让开发的童鞋们怎能不开心不快乐！—— 运营妹纸，快来求我啊求我啊~~~！！！
POPLAYER改变前端生活
poplayer如此happy，那么poplayer对前端同学到底做了什么？
跨页面开发
如果产品君有一个需求，需要同时在首页+商品详情页+搜索页添加一个欢乐氛围的小动画，肿么办？
通常前端同学会说，嗯~~ 我来给你开发一个能让你new着玩的小动画，但是你要让首页+商品详情页+搜索页的同学在她们的页面上实例化我一下，所以我发布一下没问题，你要先搞定那三个页面的同学为了引用这玩意儿发布一下！！
那么问题来了，双十一期间要保证客户端产品的稳定性，啊喂还有页面是native的呢？！
poplayer改变前(chan)端(pin)狗生活！！！盖一层poplayer、配置一下这不是分分钟的事儿！！ 既保证你们各个产品线的稳定性，又能让大家high起来~~ 所以你们玩high了各种抽红包有木有！！！
跨平台支持
作为一种新的客户端技术解决方案，最大的问题在于，要兼容天猫ios、天猫android、天猫ipad、淘宝ios、淘宝android、淘宝ipad、淘宝国际，这么多客户端多亏了客户端哥哥全部支持好了！！
实际上，poplayer这种技术已然在之前的实践中逐步应用，比如大家现在司空见惯的产品“淘口令”，比如之前“715哆啦A梦”活动的大量应用，以及后来部分产品线大家以为是native的入口，其实都是poplayer偷偷的在那里跑着，直到“万店同庆”，poplayer终于兼容了全部客户端，并在双十一期间带大家玩到high！~~
所以论poplayer怎样改变了我的生活~~~
为了兼容特意写了独立页面、独立库啊喂~！
因为踩坑专门在内网写了一篇长文啊喂~~！！
跟这么多客户端找来找去很爽么啊喂~~！！
--------------------------><------------------------------
所以论poplayer如何让我的生活更加快乐~~~
双十一过后终于可以去吼客户端哥哥：你们还敢三国杀、快去填坑啊喂~~！！！
前端小妹终于有机会去跟客户端哥哥搭讪、艳遇了啊喂~~！！！
用户体验
伪装浮层： poplayer允许独立的页面伪装成浮层的样子，让用户无感知的、流畅的完成页面的相关操作；作为前端开发，再也不用纠结自己开发的东西会给别人的代码空间造成污染，也不用担心因为业务关系、自己引用了别人奇怪的代码影响自己的代码（处女座你说是不是？）
决定展示权： 在传统的前端开发中，前端同学是没有机会在用户无感知的情况下关闭页面的，只要页面被请求回来，通过代码关掉可以，但是总会在用户面前闪一下，用户体验很不好。 比如“万店同庆”，不在活动范围的页面是需要关闭poplayer的，这个关闭有两种方式：1. 链接地址带特定的值，客户端解析直接关闭。 2. 前端请求接口判定对方不符合条件，关闭。 对于第一种方式，根本不用前端操心了有木有！！ 对于第二种，不符合条件我就不调用展示poplayer的代码有木有！！
POPLAYER让业务更美好
以上扯了这么多淡，继续扯一下poplayer对业务做了什么——
- 产品的稳定性V.S.运营的灵活性
其实从上文就可以看出来，由于poplayer允许前端页面独立的、跨页面的展示，同时前端页面的开发迭代是远快于native的，poplayer既能保证产品线业务的独立、稳定运行，又能保证运营活动的快速、灵活推进，宜室宜家，上得了厅堂入得了厨房，搞的定产品忽悠得住运营。运营妹妹、产品哥哥遇到跨产品线的需求时，再也不用跪求各种产品线开发了。
- 风险控制
人非圣贤孰能无过，几天几夜不睡觉的小伙伴们一不留神文案配错也是有的，链接地址配错了搞不好就要和廉政MM好好解释了，前端开发的童鞋们惺忪着睡眼代码写错了也是难以避免的，这时候只要重新发配置，可以快速关闭全部业务线上的所有poplayer页面，改好了测试好了再重新上线，只要不是时间强相关的业务，用户一般是不知道我们开了小差的，这风险嘛 嘿嘿~~ 千万不要告诉老板是我说的！！！
- 脑洞大开
poplayer结合一些客户端的AR等新技术，可以玩出来很多脑洞大开的新效果，市场运营的同学们你们可以玩的玩法更多了，脑洞可以开得更大了，行业运营的同学你们可以跨行业、跨产品多瞅瞅西逛逛了，整合各处资源，咱们一起玩起！！
技术改变生活，poplayer改变业务模式~~！！
那啥有新页面别找我开发，我找客户端哥哥填坑呢~~！！！
小结
好了，写到这里相信你已经看出来这是一篇 吹水+吐槽+恶意卖萌 文，当然这里还是必须感谢客户端哥哥一直以来在我的无情践踏中依旧茁壮成长，耐心的解决调试、兼容、大坑等一系列问题，感谢各位看官看我扯到现在。
更多poplayer技术细节前端部分请继续查看本系列文章~~!!
更多poplayer技术细节客户端部分 —— 加入我们吧！！
作者已经自己玩high了~
相当的high
然而你写出来只是给你自己看，并没有什么用。
开源吗？
呆萌呆萌的
@huike1989 抱歉，目前不开源O(∩_∩)O~
有两个问题，一个是，polayer数据是预先缓存在本地的么？还是说，只是加载一个在线的url。
另外就是，匹配之后会展示poplayer，是根据类似于页面的path之类的东西来做的匹配么？(native和poplayer怎么做数据交互)
非常感谢，希望能得到答复。 @zldream1106
我只能说一点营养价值都没有 浪费了几分钟~ 能来点干货嘛 各种方案 并无卵用。。。
...
自 high～～
什么鬼
然并卵 完全自heigh啊 我都要被你玩坏了
- 的确是有存储数据在本地的方案的，但是这不是poplayer的功能。他的主要优点还是能够跨页面、跨native的覆盖一层“新的浏览器”，使得新浏览器的页面可以独立运行在任何页面之上。所以可以简单理解为：额外加载了一个url。
- 关于poplayer的四种打开方式，文章“POPLAYER支持多种交互场景”部分每一句都是一种不同的触发方式，对应一种技术方案。其中的“链接匹配”，是由客户端做url的特殊值匹配，来决定是否运行前端代码。之后是否展示页面的决定权再交给前端。
然而什么都没讲…妹子是PM还是RD啊…
没有干活 然并卵
真的是自嗨~ 看完没有收获
想法很好， 但不要光自high， 说点干货哦~~~
这个poplayer开源么？ 在哪可以下载
看题目以为是po player，原来是pop layer
好玩
没读出所以然来，差评
现在开源了吗