携程酒店小程序开发背后的“黑科技”

本文将分享携程酒店小程序的一些开发经验， 和一些非技术的经验。这里的小程序包括微信小程序，支付宝，百度，头条。快应用因为与这些小程序的体系截然不同，就不放进来讨论了。文中所有观点均为个人观点， 不代表公司言论。

首先看一下项目背景。小程序的概念是微信发明的，2016 年左右内测，17 年不温不火，18 年忽然火爆起来。

当年小龙给出的定义是： 用完即走。这个理想很好，但一直没办法实现，因各大互联网都希望用户留下来，而不希望用户流失。所以 18 年小程序进行了大量的改进，都与“用完即走”的理念背道而驰。微信也不再提用完即走，还加了一句： “走了还会回来”。

通常我们会用小程序和 app 做比较，其实小程序更像 H5。尤其是出了 webview 之后，很多公司甚至直接用 webview 来做全流程，这种情况下， 小程序就沦为了一个空壳。

小程序和 H5 进行对比，就会发现小程序支持的功能更少。很多 H5 的风骚玩法，在小程序上都不能实现。反过来说，小程序又扩充了一些对硬件的访问，但是不是特别多，最典型的就是截屏的 callback，这个在 H5 是不存在的。

发布的时候因为是新平台，大家都不愿意投入，甚至多次传出了 “小程序要死了”的论调。这点和 silverlight 很像，区别是小程序现在活的很好，而且有越来越好的趋势。当然了这是现状。当时还是做的很艰辛的，各方面都不愿意投入资源来做。加上很多人担心小程序会吸血 app，更加恐慌这项新技术。

因此，携程这边自然而然形成了一个独特的开发模式。

第一个就是，产品与开发一起提需求。

对于普通的业务来说，通常产品会比较强势.小程序这里完全不同。小程序有两个问题： 第一， 竞品未必做的比我们好。第二， 竞品可能有一些私有 api，我们完全不能模仿。出于一些众所周知的原因，有些小程序天生是有一点特权的。

此外，微信小程序发展速度非常快，新的 api 出来了，开发比产品更加敏感，因此双方要进行合作，一起提需求。这也体现了“人人都是产品经理”，开发也可以参与到产品设计中。

保持简单。这是微信倡导的。微信有个大杀招，限制 size。不知道有多少人是老的小程序开发人员，最早的小程序 size 限制是 1M，携程当时在 1M 的限制内，上了好几个 BU 的业务。

主要人员来自 H5 开发转行。这个非常好理解。小程序虽然叫“程序”，写法和一些应用程序完全不同，却和 H5 没啥区别。很多 mvvm 框架写法和小程序是一样的，基本上没什么学习成本。

超越敏捷的速度开发。这个是被逼的。一个起步项目，没有太多节奏可言，抢一点是一点。 举个例子： 如果在上高地，你会按照先打奶和 DPS 后打肉的顺序严格执行吗？不会的，你会根据情况不断调整，能占便宜的时候就打最近的，仅此而已。节奏完全是乱的。

有个游戏叫“混乱之治”，以前很不理解这个游戏的名字，觉得 “混乱”是“混乱”， “治”是“治”。做了小程序之后则深有体会。

Webview 登录态问题。Webview 是小程序里一个很奇葩的存在，可以理解成微信向现实主义的妥协。原本是“忽悠”H5 开发上小程序这条船，结果却在小程序里又开了 webview， 让大家用 H5 做开发。因此这里就涉及到登录态同步的问题。

通常，webview 是做促销用的，很少用于主流程。原因是 webview 的灵活性。这个算优点也算缺点。优点是可以热更新，缺点是过于灵活容易触碰微信的底线。

微信给 webview 做了限制，必须全屏，不准遮挡。有一些黑科技可以绕过这些限制，但这会导致微信的封杀，完全是得不偿失的。我们通常用 webview 的灵活性， 来做促销页面。众所周知，促销是最容易发生需求变更的。

Webview 做促销也需要登录态。可以做到向内向外双向打通，但是在促销上，我们会进行单项打通，也就是只允许小程序把登录态无脑传递给 webview，不允许反向传。因为反向可能会污染登录态。

圆形二维码和普通二维码的选择。 这里的圆形二维码就是大家常见的，圆圆的那种小程序码。这种是微信极力推荐的。我们会根据情况，进行使用， 而不是全盘使用。因为普通二维码有更强的能力。

普通二维码是方型二维码，但是方型二维码不全是普通二维码，腾讯也提供了一个方型二维码的能力。因为有数量限制我们一般不用。腾讯还支持用一个普通的 url 映射到小程序路径。可以在小程序里写个 router，在官网设置一个绑定， 把 url 映射成微信小程序的 url。

这种做法会延伸出一个新的玩法，叫：通用二维码。简单的说就是，这个绑定关系，微信可以设，支付宝也可以设，百度也可以设。同一个二维码，微信扫出来会进入微信小程序，支付宝扫描可以进入支付宝小程序， 百度进百度小程序。如果在其他平台，不支持跳转， 例如 iphone 的相机，还可以正常打开 H5 页面，因为 url 可以做 302 跳转。这一点会很方便线下铺设二维码。

看似无用的 api 的使用方式。微信提供了很多有意思的 api，如何用是看大家的创意。

比如好多小程序都会拦截截屏事件。用户截屏说明用户想分享东西，那么就在截屏的时候弹出分享按钮，问用户是否想分享。这是一个顺其自然的操作方式，根本不需要教育用户。

我们提前上线了埋点，证明了截屏次数与订单数成正比。说明截屏的人是有下单意愿的，他们截屏，是为了分享给朋友，询问意见。那我们干脆直接把分享功能放进去了。现在看来这个操作已经是常规操作了，但当时微信加这个 api 的时候，这个玩法还是很让人叫好的。

下一个技术问题是推送和分享。这个可能会触及到微信的底线，这里提示一点：微信反对的是“恶意分享”，和“恶意推送”，而不是反对“分享”和“推送”，否则微信就不会提供这个能力了。这个大家可以想一想，两者有多大的差别。

人员分配问题。

微信小程序现在实际上是拆分成两个小团队在做的，一个小团队做关键集群的业务，一个小团队做非关键集群的业务。关键集群，主要是主流程， 下单。这个保持着非常传统的 scrum 节奏，因为订单是一个很严肃的事情，来不得半点玩笑。

还有一个小团队在做促销相关的开发。目前外界对小程序的认知还是：适合拉新。这一点虽然微信官方不认可，但是私下大家的做法，还是很看中了微信流量的。因为促销的变化性很大，而且非常容易惹事情，因此促销是有自己的专用集群的。而且能用 webview 的地方，是绝对不用原生做开发的，因为原生代码涉及到审核问题。虽然我们的审核速度还是很快的， 但是毕竟是个很不可控的行为，促销不喜欢这种不可控。

有些地方还是会用原生的，因为 webview 的能力有些不足。这个后面我们马上会提到。

黑科技。

第一点：没有什么是一次跳转不能搞定的。

这是我们在内部群提到过的一句话。最初的出处是，有些团队需要用 H5 做页面，但是又需要一些原生能力，例如分享。这一点是很多促销所必需的能力。

这个需求的本质，其实是“偷权限”。在 webview 要操作的东西，如果操作不了，那么就进行一次跳转，进入原生页面。在原生页面可以拥有你所想要的所有权限。

例如，用户想分享一个活动链接，点了一个 div，我们不可能在 div 上面挂分享事件，微信没有提供这个能力。那怎么办呢？可以跳转一个页面，上面有两个按钮，一个叫“分享给朋友”，一个叫“分享到朋友圈”。

为什么不直接出两个按钮， 非要点完了再进行一次选择呢？这不增加用户费力度吗？ 原因就是：只有进行一次跳转，才能偷到原生能力。而为了让这次跳转显得顺其自然，给用户一个解释，就不得不给出一个页面，假装在问：你是要分享给朋友呢，还是要分享到朋友圈呢？事实上，真正做的是通过这一次跳转，进入原生页面，使用原生能力。

而且，如果用户操作回退，比如滑动回退，还能回到之前的页面，一切看起来是顺其自然的。这样，在用户基本上没有感受到伤害的情况下，偷取了原生能力。

如果一次不行，那就两次。这个主要涉及到登录。例如，一个促销页面，点击一个按钮，需要检查权限。那么最简单的办法就是跳转到一个原生页面，然后再跳回来。

这里有个问题，回退之后，登录态发生了变化。要处理刷新问题。刷新往往是开发者最痛恨的操作，因为动不动就少刷一部分。促销团队上线压力很紧迫，开发时间远远比用户体验要宝贵。我们有时候就会直接牺牲用户体验，刷全页，性能差就加服务器，简单粗暴搞定。这个时候，有时候就不进行回退了，直接再走一次前进。

不要担心层数问题，逼急了就 relaunch。这个主要也是针对促销来说的。 主流程对层数是有严格要求的。但是促销不一样，层数用光了，需要跳转导流的时候直接一个 relaunch，抹掉历史，就没有层数问题了。促销很多事情都是简单粗暴， 但是特别有效。

讲了一大堆微信小程序的东西， 其实我们还做了其他厂商的小程序。为了降低开发成本，有各种转换工具，从微信小程序转换到支付宝，百度，头条甚至是 H5。

各家小程序的 api 基本相同，有点像当年 javascript 刚出来的时候的感觉， 大家都相似，但是总是有点兼容性的差异。转换工具只要解决这些差异即可。

最后一项，H5，可能有些和业界普遍的做法格格不入。业界普遍会使用 H5 转微信小程序，但是总会有各种兼容性问题。我们看来，H5 的功能是多于小程序的，也就是说 H5 是个全集，小程序相当于一个子集，从全集转子集，肯定会有各种不支持的东西出来。但是如果反过来想呢？从子集转全集，先有小程序再转 H5，那么基本上不会碰到什么兼容问题。这个工具还在开发中，这条路应该是一个比较平坦的路，能少很多坑。

以上就是携程酒店开发小程序的一些经验。 有一些是非技术的感想，甚至是吐槽，有一些是被逼无奈做出来的所谓的“黑科技”， 希望能够对大家有所启发。

作者介绍：

崔广宇，携程酒店研发部小程序开发经理，曾负责过反爬虫开发以及 H5 开发。

本文转载自公众号携程技术（ID：ctriptech）。

原文链接：

https://mp.weixin.qq.com/s/QQ1o4xExxdLMy5ZRYE7Law