写点什么

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

  • 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:45867

评论

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

渣本全力以赴33天,四面阿里妈妈(淘宝联盟),拿下实习岗offer

小Q

Java 学习 编程 架构 面试

史上最通俗Netty入门长文:基本介绍、环境搭建、动手实战

JackJiang

网络编程 Netty nio 即时通讯 IM

奋力准备一个月成功进字节,来看一下我都看了哪些资料做了哪些准备

小Q

学习 编程 程序员 架构 面试

这4个Java异常框架,很多人竟然还不知道

比伯

Java 编程 架构 面试 计算机

7面阿里,最后一面居然挂在了JVM上面!狠下决心恶补JVM知识

Java架构之路

Java 程序员 架构 面试 编程语言

阿里P8大牛整理的300页图解网络知识+计算机底层操作系统

Java架构之路

Java 编程 程序员 架构 面试

2020年底备战—从技术到面试合集

iOSer

ios 编程 面试

go-zero 如何扛住流量冲击(一)

万俊峰Kevin

microservice go-zero goctl Go 语言

《深入理解java虚拟机》- java内存区域

never say never

JVM笔记 堆内存

《程序员面试金典》.pdf

田维常

面试

SpringBoot-技术专题-Hystrix学习介绍

洛神灬殇

为什么有的专科程序员比本科程序员薪资高?他们之间有多大的区别?

Java架构师迁哥

来不及解释了,快上车!LR.NET开发平台助力企业信息互联

雯雯写代码

懵了!一口气问了我18个JVM问题!

yes

面试 JVM

为什么容器内存占用居高不下,频频 OOM

996小迁

Java 架构 容器 面试 k8s

vscode + vim : vscode 全键盘使用方案

lmymirror

vim vscode Spacemacs

深圳区块链钱包系统开发,区块链钱包app源码

13530558032

区块链IM即时社交通讯系统开发,区块链社交平台源码搭建

13530558032

接口测试并不只是测试参数和返回值

测试人生路

接口测试

区块链交易所软件,数字货币场外交易系统搭建

13530558032

K3d vs Kind 谁更适合本地研发

郭旭东

Kubernetes k3s kind

备战2021年金三银四,阿里P8面试官梳理的2020年999道大厂高频Java面试题(附答案)

Java架构之路

Java 编程 程序员 架构 面试

微服务架构中的“参天大树”:SpringBoot+SpringCloud+Docker

小Q

Java 学习 容器 面试 微服务

基于Vue实现一个有点意思的拼拼乐小游戏

徐小夕

Java GitHub 开源 H5游戏 H5

区块链币支付系统开发搭建,USDT支付平台源码

13530558032

适用初学者的5种Python数据输入技术

华为云开发者联盟

Python 数据 函数

影视剪辑类自媒体运营心得:如何抓住观众的痛点

石头IT视角

【应用运维】公司业务迭代迅速,运维如何高效进行应用发布?

嘉为蓝鲸

可视化 PaaS 运维自动化 部署与维护 发布

C++调用Go方法的字符串传递问题及解决方案

华为云开发者联盟

c++ 内存 代码

解读登录双因子认证(MFA)特性背后的TOTP原理

华为云开发者联盟

算法 totp 密钥

这才是图文并茂:我写了1万多字,就是为了让你了解AQS是怎么运行的

鄙人薛某

Java 并发编程 AQS 并发 ReentrantLock

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