再談字節小程序

作者：字節小程序基礎技術團隊-楊德立

前言

如今，全網小程序數量已超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.合作&加入

筆者來自字節小程序基礎技術團隊。團隊聚焦和致力於讓字節小程序框架成爲業內方案效果 更 優，能力 更 強，影響力和覆蓋面 更 大的小程序框架。 我們 負責 字節 小程序框架 建設 並 向字節內及外部應用 賦能 。如果你有要進一步瞭解和使用這套框架的需要歡迎進一步交流。如果你也熱衷於這個生態和方案的建設歡迎加入我們。合作&加入聯繫：[email protected]

此文提到的小程序框架後續將在字節跳動應用開發套件 MARS 上線，MARS 是字節跳動終端技術團隊過去九年在抖音、今日頭條、西瓜視頻、飛書、懂車帝等 App 的研發實踐成果，面向移動研發、前端開發、QA、 運維、產品經理、項目經理以及運營角色，提供一站式整體研發解決方案，助力企業研發模式升級，降低企業研發綜合成本。歡迎大家持續關注和接入使用。