写点什么

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

  • 2020-02-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-02-15 17:45892

评论

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

管理团队的最佳实践

爱吃小舅的鱼

管理团队

小游戏3.0时代,应回归到游戏价值本身

FinFish

小程序容器 小游戏 小游戏技术 实时互动技术

能让企业“网络隐身”的SPA,到底是什么黑科技?

芯盾时代

网关 零信任 SPA

我们的 WebAssembly 实验:扩展 NGINX Agent

NGINX开源社区

nginx Wasm nginx 开源版

适合才最美:Shiro安全框架使用心得

威哥爱编程

Java javaWeb shiro JavaEE

RAR Extractor - Unzip for mac功能强大的解压缩软件

Mac相关知识分享

极狐GitLab 足下科技,加速国产智驾操作系统的发展与普及

极狐GitLab

gitlab 智能驾驶 客户案例

淘宝商品详情API接口Java GET调用指南

代码忍者

API 接口 pinduoduo API

大众点评诉百度,数据爬虫合法边界引关注

本原智数

人工智能 数据合规 本原智数 数据爬虫

不要让基础技术设施成为稳定性瓶颈

老张

环境配置 基础架构 稳定性治理

AOT使用经验总结

沙漠尽头的狼

京东零售推荐系统可解释能力详解

京东零售技术

人工智能 推荐模型 可解释

摩尔线程开源vLLM-MUSA 加速国产GPU AI

吴脑的键客

人工智能

After Effects 2025 for mac(ae2025视频后期优化处理) v25.0.1中文版

Mac相关知识分享

10人小公司管理指南:从沟通到绩效评估

爱吃小舅的鱼

公司管理

开源项目管理工具如何选?9款值得一试的选择

爱吃小舅的鱼

开源项目管理工具

纽约时报诉OpenAI:生成式AI时代的数据陷阱与法律边界

本原智数

人工智能 数据采集 数据合规 本原智数

大模型准确率从17%到90%!为什么提示词工程是今天最珍贵的技能?

本原智数

人工智能 大模型 生成式AI 提示词工程 本原智数

TableFill:一天搞定1000人的数据填报工作

袋鼠云数栈

华为应用市场:赋能开发者全生命周期服务体验

热爱编程的小白白

After Effects 2025 全新升级 铸就特效传奇!

Rose

Premiere Pro 2025 for mac(adobe pr 2025)中文版

Mac相关知识分享

CompletableFuture总结和实践

百度搜索:蓝易云

如何正确保护Python代码,不是Pyinstaller

LLLibra146

Python 代码保护

一书了解AI的下一个浪潮!

博文视点Broadview

adobe pr 2025有哪些新功能?

Rose

开源建木荣获 GitCode年度十大开源社区荣誉

都广科技

#开源

4K Wallpaper mac(4K壁纸软件)

Mac相关知识分享

Print to PDF Pro for mac(PDF文件打印软件) v5.2.5激活版

Mac相关知识分享

SpringBoot启动原理详解(图文全面总结)

江南一点雨

三分之一的生成式AI项目将被放弃?从零开始看RAG如何变现

本原智数

人工智能 大模型 生成式AI rag 本原智数

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