GMTC北京站9折购票最后一周,2022年大前端方向又有哪些技术热点? 了解详情
写点什么

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

  • 2020 年 2 月 15 日
  • 本文字数:3873 字

    阅读完需:约 13 分钟

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

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


首先看一下项目背景。小程序的概念是微信发明的,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


2020 年 2 月 15 日 17:45360

评论

发布
暂无评论
发现更多内容

零数科技入选毕马威中国“2021领先金融科技50企业”

科技热闻

【TcaplusDB知识库】TDR表GOSDK示例代码-删除数据

tcaplus

构建面向异构算力的边缘计算云平台

火山引擎边缘计算

gpu 云原生 边缘计算 算力

【伙伴故事】一盏智能灯,点亮家庭和工业照明的新未来

华为云开发者社区

物联网 华为云 AIOT PLC 智能照明

快过年了,用五种不同的JS特效带你看烟花

海拥(haiyong.site)

大前端 js 28天写作 前端特效 1月月更

MobTech观察 | CSDN:企业数字化转型如何提升段位?杨冠军畅谈企业数字化前世今生

MobTech袤博科技

数据分析 数字化转型 数据治理 企业 数据可视化

4种Spring Boot 实现通用 Auth 认证方式

华为云开发者社区

拦截器 spring-boot Auth 传统AOP 参数解析器

“云联邦”构建连云成片、无缝混合的一朵云

华为云开发者社区

混合云 多云 华为云Stack 云联邦 联邦认证

微帧ROI视频智能编码:基于人眼感兴趣区域,实现极致观感体验

微帧Visionular

视频编码

TcaplusDB君 · 行业新闻汇编(一)

tcaplus

TcaplusDB君 · 行业新闻汇编(五)

tcaplus

喜讯!Apache APISIX Committer 张晋涛当选「中国开源先锋 33 人」

Apache APISIX 中国社区

云原生 微服务网关 APISIX 网关

共建龙蜥社区,支撑商业建设

OpenAnolis小助手

Linux 开源 开发者

【TcaplusDB知识库】TDR表GOSDK示例代码-插入数据

tcaplus

【TcaplusDB知识库】TDR表GOSDK示例代码-更新数据

tcaplus

【TcaplusDB知识库】TDR表GOSDK示例代码-查询数据

tcaplus

TcaplusDB君 · 行业新闻汇编(三)

tcaplus

TcaplusDB君 · 行业新闻汇编(二)

tcaplus

做网络安全竟然不了解ATT&CK?这篇文章的介绍详细到令人尖叫

博文视点Broadview

移动数字化平台如何让企业生态协同更高效?

WorkPlus Lite

Hoo虎符研究院 | 币圈后浪——Osmosis一种高级AMM协议

区块链前沿News

Hoo 虎符交易所 虎符研究院

利用 Amazon Batch 来为容器化负载调用海量云端算力

亚马逊云科技 (Amazon Web Services)

计算

面试官: Flink双流JOIN了解吗? 简单说说其实现原理

华为云开发者社区

sql flink join 双流join 数据库SQL

武汉智慧城市建设新名片 一城一云打造数字经济新引擎

InfoQ_967a83c6d0d7

零数科技入选毕马威中国“2021领先金融科技50企业”

科技热闻

TcaplusDB君 · 行业新闻汇编(四)

tcaplus

携程酒店小程序开发背后的“黑科技”_技术管理_崔广宇_InfoQ精选文章