介绍
小程序学习中心

字节小程序在抖音上的探索与实践

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

不同宿主基于各自发展的愿景和使命,集成小程序框架所赋予开发者的玩法空间,承载的业务场景各有不同。让 APP 有运行小程序的能力是可打破应用孤岛、连接更多服务的第一步。

方案价值

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

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

小程序生态完善,行业渗透率高。

  1. 提效开发:

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

跨平台兼容成本低:平台统一的对跨端碎片化差异兼容;

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

上手成本低:与业界小程序方案统一,有任意小程序经验可无成本接入开发。

  1. 性能&体验贴近原生:

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

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

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

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

  1. 突破传统 web 界限:

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

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

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

在抖音上的价值

价值主赛道-赋能抖音开放

抖音接入的价值

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

  1. 加速服务覆盖

对于抖音来说,通过开放小程序平台,可以引入更多不同类型的平台开发者和 SaaS 服务商,可以快速赋能于抖音不同重点垂类的拓展和延伸,保证用户在抖音内与以内容连接的垂类需求完成闭环。

  • 开放可以释放一种市场信号,向业内介绍抖音开放玩法,同一垂类玩法多家参与,协同平台的规则,形成良性竞争,助力平台发展。
  • 每当抖音需要拓展垂类时,可以在开放平台释放垂类扶持信号,可以快速吸引对应的平台和 SaaS 加入,一方面可以利用平台和 SaaS 资源快速铺设线下资源,另外一方面可以快速给对应达人提供变现方式,有助于该垂类的达人生态快速建设。
  1. 广告平台效率提升

对于平台商业化来说,小程序可以作为吸引广告客户的新手段,提升字节系广告平台业内竞争力。

  • 对于广告效果来说,小程序对比 H5 有更加原生化的体验,同时也具备留存和搜索入口,可以有效帮助广告主提升广告变现效率。对于广告品牌来说,小程序可以结合我们提供的开放能力更好的实现品牌客户的诉求,同时也可以利用小程序丰富的能力持续做出广告与抖音结合的 showcase,持续提升广告平台影响力。
  • 同时随着小程序开放后,有越来越多小程序可以在抖音平台得到收益验证,他们自然就会选择在抖音进行投放,使其快速获量,潜在为商业化拓展更多的客户。
  1. 强化企业社会价值与责任

字节可以通过小程序的形式,提供更多便民服务,提升企业整体价值与社会责任。

  • 平台可以推出政务类模板,承载本地政务服务,协同合作的抖音政务官号,主打内容连接服务概念,更加高效的向用户提供信息和服务,提升用户对于对于抖音平台的信赖程度。
  • 同时像如今疫情期间的微信和支付宝的健康宝小程序一样,只有开放才会提升平台整体业内影响力,让抖音也成为用户生活刚需之一,提升平台留存。

Tips:

不同宿主有着不同的优势和特点,对应的同小程序也有不同的结合玩法,像抖音目前除了用户主动通过搜索等场景主动触达,还在多个场景进行推荐分发:

价值子赛道-赋能上抖音的业务

充当业务开发的方案,让业务低成本高效率开发和迭代。

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

实践案例:今日头条、懂车帝、西瓜视频、幸福里、抖店等小程序方式上抖音

  1. 提供通用和丰富的组件库、模板,甚至支持基于低代码平台生成小程序
  • 平台所提供的组件库、模板及同低代码平台的打通可支撑平台所扶持的内部业务和合作业务同时, 也可以支持对外输出。

低代码平台生成小程序示例:

在抖音上的实践方案

方案 Show

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

  1. 方案本身

Tips:

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

  1. 方案 Show- 普通小程序

Tips:

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

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

实践案例:

  1. 方案 Show- 原生渲染小程序

Tips:

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

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

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

实践案例:目前多在对转化诉求较高的广告投放场景。

  1. 方案 Show- 混合渲染小程序

Tips:

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

线上抖音同城场景线上效果:

  1. 方案 Show- OneCard 卡片

Tips:

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

实践案例:

合作&加入

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

点击纠错
评价此篇文档