再谈字节小程序

作者：字节小程序基础技术团队-杨德立

前言

如今，全网小程序数量已超700w+个，细分行业200+个，开发者数量超500w个，作为移动互联网的重要新基建小程序互联网已成型，用户习惯已经养成。

字节小程序身处大的生态之中，基于字节APP而建。围绕开放场景、开放接口、开放信任关系搭建的一套以小程序为最终落地的技术载体连接外部企业主体所提供服务的全链路生态解决方案。方案在主要提供和具备多页应用级形态的开发和运行模式同时，还提供了单页、卡片等的开发和运行模式，可支持多形态和运行模式间的运行时打通和联动。目前已经覆盖字节内部抖音、抖音火山版、西瓜、头条等20+个APP，并支持对外赋能，已上线外部APP 50+个。

让宿主有运行小程序的能力是可打破应用孤岛、连接更多服务的第一步。不同宿主基于各自发展的愿景和使命，集成小程序框架所赋予开发者的玩法空间，承载的业务场景各有不同。基于一套小程序框架，可多种延展，以最轻量的方式实现同外部服务的快速连接，拓展能力边界，构建业务生态能力。

1.方案价值

1. 可规模化链接外部内容和服务：

   1. 方案安全性高，可规模化引入外部服务和内容 ：平台统一处理的沙盒隔离、平台管控（鉴权、审核、版控）、语法限定、能力封装、包编译和加载等策略在让用户可以较流畅和方便的使用小程序同时，稳定性和安全性做到统一、可控和有保障

   2. 小程序生态完善，行业渗透率高

2. 提效开发：

   1. 基于成型的标准去开发：让开发者可在平台提供的大量组件、API及UI组件库基础上开发和扩展

   2. 跨平台兼容成本低：平台统一的对跨端碎片化差异兼容

   3. 坑少：安全稳定性有保障，框架已经过大量小程序线上多业务场景的使用和验证，配套质量保障工具、策略完善

   4. 上手成本低：与业界小程序方案统一，有任意小程序经验可无成本接入开发

3. 性能&体验贴近原生：

   1. 逻辑 & 渲染分离：双线程执行，避免存在因逻辑长时间运行导致页面卡死的问题

   2. 更灵活多样的原生组件和原生能力： 像video、map、textarea、live-player、Canvas等原生组件；AR、VR等能力支持

   3. 离线性好： 在弱网络&间歇性网络下，可打开本地包，保障用户体验，从而避免了传统H5无网络情况下用户体验差的问题

   4. 性能上限高： 在加载效率、通信效率、渲染效率等多方面有更多的可探索和优化空间，在同一套小程序开发体系下，可探索和建设原生渲染和原生+原生混合的小程序渲染方案及编译与加载策略

4. 突破传统 web 界限：

   1. 渲染优化打破浏览器限制： 容器预热、预加载、预请求等优化手段有效提升首屏展现速度

   2. 多容器页面管理脱胎换骨： 避免浏览器多 tab 页跳页白屏、回退重加载等问题，预渲染机制与跳转动画让 web 体验无限贴近纯端实现

   3. 高度可控的资源包离线缓存与更新手段：在规避浏览器缓存策略不稳定的同时，也从根本上解决内容加载优化与内容更新的矛盾

2.价值出口

2.1价值主赛道-赋能字节宿主：

支持字节小程序平台面向企业开发者和服务商开发者，关注其 入驻->开发->场景分发->用户复访 以及 场景安全保障的路径。

对于连接外部的开发者，小程序开放平台所提供的生态框架希望外部的开发者整合其能提供的服务，满足抖音内用户、创作者的需求获得健康的收益，在这个生态下，让企业本身成就一番「事业」而不仅仅是在和字节APP做「生意」。

2.2价值子赛道-赋能业务：

2.2.1 充当核心业务开发的方案，让业务低成本高效率开发和迭代

1. 一套业务代码多端运行

• 小程序生来被赋予“一处代码、多处运行”的属性和光环，一套代码可以跑在多端多平台。使用小程序方案开发业务功能，可以较稳地做到降本提效，快速支撑业务的开发、上线和迭代。用统一的一波研发人力做到多端多平台支撑。

2. 提供通用和丰富的组件库、模板，甚至支持基于低代码平台生成小程序

• 平台所提供的组件库、模板及同低代码平台的打通可支撑平台所扶持的内部业务和合作业务同时， 也可以支持对外输出。

2.2.2 国内多家超级APP基于小程序打造的平台生态，为各行业和机构提供了在移动端运营自身生态和运营多渠道的可能性

• 赋能 那些有要“走出去” ， 将自身内容或服务，嵌入到更多的应用场景当中去的业务， 早期更多是通过开放API、SDK等形式，如今小程序成为了更佳的载体。可控性强，可承载更多更强的内容和玩法，迭代和运营管理更方便。

  • 走出去-到多生态平台，打通多生态体系：

    • 以猫眼电影为例，全景流量布局强化宣发服务能力，通过猫眼小程序的生态布局接入了更多支点，变得立体多元，实现从社交向搜索、短视频、直播等更为广泛的渠道拓展，2021年春节期间，覆盖抖音、微信、百度等多个平台的猫眼小程序生态总用户规模突破了4.5亿，为影片宣发能力和用户服务能力上开辟了新路径。

  • 走出去-玩转一个生态体系 ：

    • 像懂车帝、幸福里、西瓜小程序在字节系多个产品线的上线，包括头条，抖音，自身APP内等
    • 像星巴克小程序在阿里系多个产品线的上线，包括支付宝，手淘，盒马，饿了么等

2.3价值子赛道-赋能更多APP：

越来越多的行业（业务）匹配有“走出去”的诉求同时， 也有着“引进来”的强需。将外部供应商、客户等的资源和服务吸引到自己的生态内。

那些头部的超级平台，通过超级APP为用户提供连接一切服务所带动整个小程序生态不断发展背后，多行业供应商和客户使用小程序的占比变得越来越高，促进行业渗透效率越来越高。客户和供应商对更多开放平台也可支持小程序载体方式开放的呼声越来越高，促进越来越多开放平台将小程序为载体纳为首选。

2.3.1 典型行业-金融行业

金融行业对小程序技术框架的应用背景：

银行数字化转型、开放金融生态是既符合监管要求又符合银行发展路径的明确方向。

银行 App 作为数字化转型的重要抓手，产品能力升级与相关科技投入将持续提升。

小程序作为银行 App 生态开放的重要一环，将会在金融领域得到长足的发展。

1. 开放银行的大趋势背景

开放银行起源于英国和欧盟关于银行业的数据共享和开放数据的探索，近年尤其是从 19 年开始在国内持续升温。开放银行的内核在于“银行服务再也不是基于银行实体，虚拟化的银行本身即可提供”。它促进金融业务更加场景化。在手机银行中引入场景化的服务，就是其中的一种形式。

2. 国家政策及监管趋势

从当前的监管趋势来看，银行持续数字化进程，建设自有线上流量经营金融产品将是大势所趋。金融街论坛年会上，多位监管部门人士和专家强调了金融机构 数字化转型的必要性，肯定了金融科技在数字化转型中起到的重要作用。还谈到必须高度重视网络安全、数据隐私、寡头垄断等风险挑战，确保市场公平和金融稳定。

3. 小程序建设是银行 App 生态建设的实际需求

通常银行尤其是大行不缺用户，在银行线上化进程中，绝大部分银行客户下载了银行 App。但在实际运营 App 过程中，银行业 App 活跃度普遍偏低。金融行业惯用的提升 App 活跃度方式为引入生活服务、政务服务等非金融场景服务。而随着引入的服务越来越多，如何快速、高效引入外部服务场景就成为银行需要考虑的问题。

Tips：金融行业对小程序技术框架的需求将会呈现由大到小，由少到多的趋势，并且笔者判断这种趋势发展的速度将会很快。由大到小指的是将会由大行向中腰部银行辐射，由少到多指的是随着有需求的银行将逐渐下沉需求量将会逐渐变多。

2.3.2 典型行业-电商行业

电商行业对小程序技术框架的应用背景：

有平台自身要走出去的强诉求，线上流量有限，借力更庞大的流量渠道，更丰富的营销推广工具，提高运营效率、扩大销量

有平台自身对已有的商家开放平台要突破生态规模的强需

有来自头部KA和供应商希望通过小程序方式入驻的强诉求

1. 平台要走出去

电商平台行业痛点： 线上流量有限，新平台难以打开市场空间；获客成本日益增加，新客转化低；客户易流失，复购订单少；低价文化，平台补贴似流水；

通过小程序走出去： 借力超级平台所提供的庞大流量渠道和丰富的营销推广工具

2. 商家开放平台要升级成支持商家小程序方式接入

赋能商家引流、留存、转化、配置等整套入驻和运营玩法，帮助商家在平台上有更大的发挥空间和品牌建设，让更多商家愿意入驻同时，让平台生态更加丰富，获利环节更多。

3. 响应头部商家实际需要：一套小程序玩法在多电商平台售卖和运营

通过小程序方式入驻到电商平台， 小程序作为商家一个独立的店铺，顾客进入小程序只能在这一家店铺浏览挑选，较好避免其他店铺品牌的干扰，强化了店铺的品牌形象，提升品牌忠诚度，沉淀顾客更轻松。同时还有更重要的一点： 商家如果在多个电商平台均是通过小程序方式投放，可以在各电商平台安全管控下，低成本的结合库存和各平台销售情况，高效的调整价格及匹配多样的运营活动。

Tips：金融行业、电商行业只是诸多行业里的冰山一角，有部分企业已经行动起来，并尝到其中甜头，有要开放、要走出去同时引进来的 行业和领域都适用于此方案。在平台具备较强的管控同时，可以给到更丰富和灵活的开放方式和空间。

3.字节小程序框架包含内容

3.1 涉及内容

包含项目	功能描述
IDE开发者工具	小程序开发者工具是面向小程序开发者推出的 PC 端开发者工具，支持小程序开发、调试、预览、上传等基本功能，并且集成开发者服务（包含智能客服等），支持在 Windows、Mac 多平台上运行，核心目标是为了帮助开发者更高效地开发小程序。
小程序代码转换工具	小程序代码转换工具可以帮助开发者快速从其他小程序转换为字节小程序或自家小程序。
文档站	管理员使用markdown在后台编辑文档，将小程序的相关API特性、工具用法展示给广大开发者。
小程序截图工具	通过爬虫工具获取小程序路径/参数，并对线上/待上线小程序进行截图，帮助审核同学快速完成审核工作，核心目标是提升开发者提审速度。
小程序SDK	对小程序容器封装，支撑小程序运行时及API、组件能力的封装，内部采用多层级设计，包含通用基础层、业务基础层、应用层、接入层。 集成小程序SDK是让你的APP可以运行小程序的前提
管理平台	提供小程序上下线管理、配置管理、运营管理等
平台服务	提供登录、包管理、编译、审核、预览等服务， 对外可使用公有云服务，也可支持私有化部署

3.2 字节小程序方案Show

在主流的小程序方案支撑和承载上，并无较大差异。匹配多业务场景提供了更多开发模式支持和更多渲染方案的支持。

3.2.1方案本身

Tips：一句话：常规认知里的小程序方案优点我们都有，缺点我们可以没有，一套开发标准下可以满足市面所有对解决方案的期待

3.2.2方案Show- 普通小程序

Tips：开发标准适用性较广，已大规模对外开放，一处开发，多处运行，可低成本支持跨BAT小程序互转；

采用双线程架构、多进程模式（Android）、hybrid渲染等优化技术。支持全屏、X分屏展示、支持同进程多小程序实例运行。

3.2.3方案Show- 原生渲染小程序

Tips：开发标准适用性偏弱，目前底层基于Lynx渲染，API可和普通小程序拉齐，但仅支持有限的CSS和组件，尚不适合规模化开放；

适用于开放和覆盖到页面简单，对性能高的合作方和模板化场景内；

较适用于通过低代码平台生成小程序的场景，把低代码平台支持的组件和模板支持用纯原生渲染。

3.2.4方案Show- 混合渲染小程序

Tips：使用WebView渲染页面和使用Oryx/LynxView渲染的页面共享同一个运行时 ，让高标准要求的页面可以使用webview渲染同时， 可通过Oryx/LynxView满足高性能和体验要求的场景

3.2.5方案Show- OneCard卡片

Tips：基于小程序技术体系，面向标准化、轻量化、高性能的开放卡片场景，提供给开发者的View级别解决方案，可跟小程序运行时打通，可跟原生页面更好联动。

4.合作&加入

笔者来自字节小程序基础技术团队。团队聚焦和致力于让字节小程序框架成为业内方案效果更优，能力更强，影响力和覆盖面更大的小程序框架。 我们负责字节小程序框架建设并向字节内及外部应用赋能。如果你有要进一步了解和使用这套框架的需要，欢迎进一步交流。如果你也热衷于这个生态和方案的建设，欢迎加入我们。合作&加入联系：yangdeli@bytedance.com

此文提到的小程序框架后续将在火山引擎应用开发套件 MARS上线，MARS 是字节跳动终端技术团队过去九年在抖音、今日头条、西瓜视频、飞书、懂车帝等 App 的研发实践成果，面向移动研发、前端开发、QA、 运维、产品经理、项目经理以及运营角色，提供一站式整体研发解决方案，助力企业研发模式升级，降低企业研发综合成本。欢迎大家持续关注和接入使用。