本文根据美团前端工程师陈瑶在第31届美团技术沙龙上的演讲《金融扫码支付H5迁移小程序先锋之旅》整理。

前言

短短几年时间，微信小程序已从一颗小芽成长为参天大树，形成了大规模的开发者生态系统，尤其在支付和线下垂直领域潜力巨大。

作为领先的生活服务平台，美团的技术团队在小程序领域也进行了大量的探索和实践。 例如，它是一个使用Vue.js开发微信小程序的前端框架，并在美团点评的多个实际业务项目中得到了验证。 详细介绍可以阅读《用Vue.js开发微信小程序：开源框架剖析》文章。 目前已开源，项目地址为：

/-/。

本文介绍了美团扫码小程序的实践，并从内部链接和外部链接两个维度阐述了美团前端技术团队进行的一些探索。

什么是扫码支付小程序？

美团扫一付是美团针对C端消费者推出的线下收单服务。 相信您已经在很多线下餐厅和其他生活服务商户中体验过。 该业务主要通过小程序提供服务。 实际场景中，用户首先使用微信的“扫一扫”功能扫描商户二维码。 系统会自动调用扫码支付小程序，进入支付页面，最后输入金额完成商品支付。

目标和数据分析

支付服务的核心指标显然是用户支付成功的比例，我们称之为支付转化率。 对于扫码支付业务来说，支付转化率百分比越高，扫码支付业务的营业额就越高，与其带来的效益呈正相关。 因此，提高扫码支付小程序的支付转化率成为我们技术团队的重要任务。 经过数据分析，我们发现转化率损失主要存在于以下两个环节：

从扫描二维码到进入小程序，微信将完成获取小程序基本信息、准备资源（代码下载或更新）等准备工作。 在准备方面，如果准备失败或者等待时间过长，用户就会离开。 这部分由微信控制的链接称为外部链接。

从进入小程序到支付，会进行页面渲染、请求数据等，如果渲染时间和数据请求时间较长，很容易造成用户离开。 同样，如果数据请求失败，也会导致用户终止使用过程。 这部分是由我们美团扫码支付技术团队控制的链接称为内部链接。

如何提高外部链接的转化率？ 对于小程序开发者来说，扫码启动小程序的过程是一个黑匣子，我们无法得知其中的细节。 我们尝试和微信同学一起梳理扫码支付小程序，发现扫码支付小程序的外部链接丢失率很高。 经过查询数据，我们发现大部分用户都是手动点击右上角的。 辞职。

从商业角度来看，当用户使用扫码支付小程序时，可以认为他们有强烈的支付需求。 用户手动点击退出的部分原因可能是等待时间过长。 在这个环节中，对时间影响较大的是资源准备，即下载或者更新小程序代码的行为。 根据经验，可能影响下载和更新时间的因素包括两个方面：一是网络，二是代码包。

由于我们无法控制用户的网络，所以只能尝试从代码包入手。 当时没有使用分包的时候，我们的主包大小在3M左右，这意味着无论是新用户还是非缓存小程序用户在第一次使用时都需要等待下载3M左右的包。 在这种情况下，用户虽然享受到了小程序离线缓存套餐带来的好处，但大部分新的用户体验却丢失了。 所以我们尝试从包代码层面进行一些优化：

做了这些事情后，扫码支付分包的费用从原来的全包3M减少到了361K（主包300K+分包61K），外部链接的转化率也提高了3 %。 虽然转化率提高了，但是在预处理过程中仍然损失了部分转化率。 理论上，继续减少300K主封装可以有效提升。 但由于业务性质，我们无法继续缩减，所以我们向微信小程序提出了独立提案。 分包的概念：用户使用独立分包时不需要下载主包。

通过独立的子包加载，程序使用时的下载和更新阶段只需加载61K大小的子包。 目前该功能还处于灰度阶段。 扫码支付小程序团队也作为第一批内测用户正在体验。 我们也会在后续实践中分享优化效果。 您可以关注美团技术团队公众号，持续关注我们。

如何提高内部链接的转化率？

从进入小程序到支付，都属于我们的业务流程。 虽然我们可以控制这个环节转化率的损失，但对症下药一定要有依据。 所以我们做了一些数据监控：

对于这两类异常，接口超时或调用失败时都会进行重试。 为了避免极端情况下服务器流量急剧增加，峰值倍数增加，会根据提前获取全局配置时的“重试次数”来控制页面可以进行的重试次数，并且每次重试都需要一段时间。 然后用户手动触发它。 当超过重试次数时，进程终止。

如何监控内部和外部链接？

前面我们也提到，对于小程序开发者来说，扫码启动小程序是一个黑匣子。 我们开发者无法知道这里的细节，所以在监控外部链接方面，我们开发者要做的事情似乎屈指可数。 不过，不知道细心的同学有没有注意到，微信每次扫描二维码都会为我们在参数中添加一个字段。 其实这个字段代表的是用户使用扫一扫时微信服务器记录的时间。 因此，基于该领域的考虑，我们做了以下尝试，对以下两个参数值进行了实时监控：

由于客户端的时间戳是从本地手机系统获取的时间，可能存在差异。 因此918项目网，为了保证报告的准确性，我们每次都会取我们服务器的时间，记录客户端时间与服务器的时间差，并参考这个时间差来计算后续涉及服务器的所有时间。 （网络100级传输延迟暂时可以忽略）。

但由于我们扫码支付小程序的特殊应用场景是保证用户快速可靠的支付，由于外部链接的可控性不高，是否可以考虑在内部业务中将监控统计做得更细化过程？ 首先，如何为可能影响付款的每个链接提供可追踪的数据？ 针对这个方向，我们有别于传统的PV、UV统计，将业务报告分类如下：

基于以上解决方案的探索，我们团队基本实现了对很多可能影响支付流程的业务指标的整体掌控。 下一步，我们将进一步思考和考虑每一个潜在的优化点，然后及时做出战略优化和更新。 通过对扫码支付小程序的探索，我们积累了大量的优化经验。 美团的价值观是追求卓越。 我们会进一步探讨可以优化的地方，欢迎更多的同学和我们一起讨论。

关于作者

陈瑶于2015年从学校加入美团，此前曾参与美团平台手机触屏版的前端开发。 她从0到1参与了智能支付应用层的前端建设，现在负责美团收单业务的扫描。 码支付小程序业务。