圖解小程式的特征與架構，及其應用機制

本文主要講解小程式的總體架構，及其包含的特征。

核心特征

視圖層與邏輯層分離

在小程式中，視圖層通常與邏輯層分離。視圖層負責渲染小程式頁面，包括Web元件和原生元件的展示，可以認為是混合渲染。例如，某些 Web 元件可能不被 WebView 支援或存在性能限制，是以 小程式 也需要依賴原生元件，例如地圖、視訊等元件。

請添加圖檔描述

邏輯層是用 JavaScript Workers 實作的。Worker 負責 小程式 的事件處理、API 調用和生命周期管理。

小程式在原生能力的擴充，通常來自托管的原生應用程式或作業系統，包括支付、檔案處理、圖像掃描、電話呼叫等。這些功能通過特定的 API 調用。當 小程式 調用原生 API 時，它會将 API 調用轉移到擴充的原生功能，以便通過 JavaScriptBridge 進行進一步處理。它通過 JavaScript Bridge 從擴充的本機功能中擷取結果。如下圖所示，示範了當 API 被調用時，資料在小程式中的流轉。

請添加圖檔描述

如上圖所示，Worker 為每個 Render 建立連接配接，将需要渲染的資料傳輸到 Render 進行進一步處理。

如果小程式頁面中的某個元件觸發了事件，該頁面的 Render 會将事件發送給 Worker 進行進一步處理。同時，Render 會等待 Worker 發送的資料重新渲染小程式頁面。

這裡的渲染可以認為是無狀态的，所有的狀态都會存儲在worker中。

那麼這麼做有什麼好處呢？其實，分離視圖層和邏輯層的好處有如下幾點：

• 友善多個小程式頁面之間的資料共享和互動。
• 在小程式的生命周期中擁有相同的上下文可以為那些來自原生應用程式開發背景的開發人員（如：安卓、蘋果、鴻蒙開發者）提供類似的編碼體驗。
• 視圖層 和 邏輯層的分離，可以防止 JavaScript 執行影響或減慢頁面渲染的情況，這有助于提高渲染性能。

豐富的 APIs 群組件

小程式平台提供了許多元件來幫助開發人員建構精美的 UI，包括視圖、表單、圖像等基本元件和地圖等進階元件。

小程式平台還為開發人員提供了許多 API 來通路 Web 和原生功能，包括 UI 顯示 API、圖像處理 API 等基本接口，以及使用者帳戶 API、地圖 API 和支付 API 等進階接口。

API 通常與元件一起工作。當使用者在小程式頁面點選某個元件時，會調用相關API完成使用者互動，并在需要時重新整理目前小程式頁面。

小程式構造器

為了獲得與原生應用類似的使用者體驗，小程式資源通常被打包在一起。下載下傳安裝小程式包後，小程式所需的所有靜态資源（即頁面模闆、CSS、JavaScript檔案等文檔）都會持久存在于使用者的裝置上。 在下次更新之前，這些資源始終可用，無需任何備援下載下傳。

小程式包是一個壓縮的 ZIP 存檔，這個文檔中包括如下檔案：

• 位于包根目錄中的配置檔案。配置檔案包括了：整個小程式的總體描述和頁面的描述，包括它們對應的路徑和配置，用于頁面設定和打開。
• 小程式的邏輯檔案，其中包含處理小程式的生命周期回調的腳本。
• 一個或多個檔案，包含頁面結構的模闆代碼、頁面樣式的 CSS 樣式表和頁面邏輯的 JavaScript 代碼。
• 支援完整性驗證的數字簽名。

為了在搜尋和執行時定位特定的小程式，小程式必須在平台上具有包名或辨別符。

小程式小部件

除了小程式頁面，小程式還可以顯示為資訊片段或小程式小部件。 在這種形式中，開發人員可以将他們的服務和/或内容放到各種主機場景中，稱為主機環境。該功能将小程式的服務和内容與具體場景聯系起來，為使用者提供更多便利。

例如，當使用者購買旅行的火車票時，智能助手上的小程式小部件會立即顯示火車的最新狀态。使用者可以點選這個小部件并跳轉到小程式的全屏頁面以擷取更多詳細資訊。

就像在小程式頁面中一樣，小部件也由 URI 方案來描述。 宿主環境通過其 URI路徑指定要加載的小程式包和對應的 widget，并通過 URI 查詢參數将資料傳遞給widget。加載小部件後，它會在宿主環境中顯示和渲染。來自主機和小部件的資料以及來自不同小部件的資料被隔離以確定安全性和獨立性。

在很多場景下，一個小部件可以打開一個小程式頁面進行更複雜的操作。在這種情況下，小部件通常需要與其對應的小程式共享資料（例如，保持一緻的登入狀态）。是以，小程式和頁面擁有相同的資料通路權限。

請添加圖檔描述

小部件的目标之一就是讓使用者忘記傳統的 app 概念，以服務的形式真正滿足使用者的需求。是以，除了所有的 app 調用路徑外，小部件 還可以在不同的場景下通過不同的方法觸發，比如文本關鍵詞、語音分析、圖檔識别、掃碼等。

一個執行個體，多個入口：全局性

有多個入口可以發現、打開和通路小程式。與多個 WebView 中的 Web 内容不同，同一個 小程式 隻會建立一個執行個體，是以 小程式 以全局一緻的方式保持其狀态和資料。例如，使用者第一次通過二維碼入口打開并登入小程式後，下次從小程式商店等其他入口傳回時，該使用者将會保持登入狀态。

小程式的入口包括但不限于如下幾種：

• 小程式應用市場（如：支付寶小程式應用市場、百度、快應用、360、PWA）
• 搜尋引擎
• 智能助手
• 二維碼掃描
• 浏覽器
• AI 語音
• …

性能和使用者體驗

小程式試圖通過一些實踐來證明是存在有效的機制來提高它們的性能和使用者體驗的。

• 打包：通過小程式的構造函數，使用者隻需在小程式第一次打開時下載下傳包，小程式中的靜态資源（如頁面、腳本、CSS）就不需要再次下載下傳，實作加載和跳轉頁面的效率更高。此功能改善了使用者體驗并節省了網絡流量。

  同時，小程式具有預下載下傳機制，可以提前下載下傳小程式包，也可以單獨預下載下傳首頁，并在下載下傳過程中并行進行流式解壓，盡量減少小程式啟動階段的耗時和均衡 第一次打開時首頁性能的損失。

• 多個渲染視圖：小程式在渲染視圖之間使用原生頁面棧管理，頁面切換由原生代碼驅動。是以，頁面中的手勢操作，頁面之間的切換，都可以達到與原生一模一樣的流暢體驗。

  由于視圖層和邏輯層的隔離，視圖層可以獨立渲染。不被 JavaScript 邏輯代碼阻塞，頁面的渲染速度可以大大提高。

• 運作時環境的預建構和複用：小程式的運作環境通常是在啟動小程式之前預先建構好的，進而減少了啟動小程式的時間。 預建内容包括渲染視圖、靜态資源、開發者定義的預取請求和小程式運作時容器。小程式激活後，它會接管預先建構的渲染視圖，然後我們将繼續預先建構一個新的渲染視圖到緩存池中，用于下一個。 由于渲染視圖數量有限制，當任何渲染視圖關閉或超過數量限制時，最早打開的渲染視圖将被銷毀。 當小程式應用退出時，運作時被銷毀，應用環境和資源可以被複用。
• 預定義的元件和 API：小程式平台提供了非常豐富的元件和 API。這些元件和 API 通常經過精心設計，可以滿足開發人員的性能要求。
• JavaScript 架構預設和熱重載：小程式的運作環境包含兩大部分，原生代碼提供的基本能力和架構，包括開發者API和一些 JavaScript 實作的元件。 JavaScript 架構内置于原生應用程式中，在執行小程式前會提前加載到小程式運作環境中。 JavaScript 架構可以熱重載（在使用期間重載），這為提高性能帶來了很多可能性。

登入便捷

小程式平台為使用者提供了多種登入小程式的方式。 如果使用者已經通過身份認證登入平台，可以将平台的登入資訊分享給小程式，快速實作小程式自身賬号體系與平台賬号體系的互通，讓小程式的通路過程更加流暢。光滑的。

例如，傳統的帶有短信驗證的登入過程比較耗時：使用者需要先手動輸入手機号，收到短信後輸入驗證碼才能登入。小程式的優點是開發者可以使用平台提供的元件/API安全擷取使用者手機号， 友善地提示使用者使用手機号授權一鍵登入流程，使使用者整個流程變得簡單，降低了開發者擷取使用者資訊的成本。

分包

小程式分包是一種改進小程式包開發過程的建構機制。它幫助開發者将不同的業務子產品劃分為不同的子包。這個特點，對于開發者和使用者都是有利的。

• 對于開發者：小程式預設有主包，它包含啟動頁面檔案和公共資源。 分包是一種靈活劃分開發者業務子產品的建構類型，達到更好的解耦機制，有利于協作。
• 對于使用者：使用者啟動小程式時，預設會下載下傳主包，并啟動主包中的頁面。 如果使用者需要在分包中打開頁面，小程式運作時會開始下載下傳和加載分包并啟動分包頁面。

通過這樣的分包建構機制，在多個團隊一起開發的時候更好的解耦和協作。當使用者使用小程式時，分包機制可以提高小程式首頁的加載速度，按需加載分包，優化使用者體驗。

插件

在小程式中，插件/擴充是一個封裝的子產品，它為現有的小程式添加特定功能，它可以是元件、JavaScript 子產品或頁面。 插件/擴充隻能在小程式中執行，不能單獨運作。開發者可以像小程式一樣開發插件/擴充，上傳到小程式平台供其他小程式複用。

這種插件機制有助于：

• 通過代碼重用降低開發成本并幫助開發人員輕松添加新功能
• 在開發人員不知情的情況下自動更新功能
• 通過不加載未使用的功能來減少小程式的包大小

是以，插件機制降低了小程式開發的門檻，為小程式生态帶來了更多的開發者。

最後，給大家介紹一下現有的一些小程式應用商店。

小程式應用商店

• 支付寶小程式： 支付寶小程式運作在支付寶原生應用之上，是Web和原生的混合解決方案。支付寶小程式依賴于 CSS 和 JavaScript 等 Web 技術。同時，它內建了支付寶原生應用的支付、信用服務、人臉認證等功能。超過 100 萬個小程式在支付寶原生應用上運作，DAU（日活躍使用者）達 2.3 億。使用者場景包括零售、交通、醫療服務等。
• 百度智能小程式：百度智能小程式是指基于百度應用和其他合作夥伴平台，将人們與資訊和服務智能連接配接的開放生态産品。通過百度的人工智能能力和對智能小程式所有内容的了解，百度精準連接配接使用者和智能小程式。借助百度的搜尋和資訊流雙引擎，使用者可以在智能小程式中實作類似應用的體驗。
• 快應用（快應用聯盟，包括小米和華為）: 快應用是快應用聯盟12家頂級手機廠商共同開發的小程式标準，MAU超過2億。開發者可以實作一次性開發并運作在所有硬體廠商的平台上。與作業系統深度融合的快應用，在手機系統的多種場景下，一鍵擷取。通過引入原生渲染路徑，實作前端開發與原生性能體驗的有效結合。快應用可以以兩種形式運作：快應用頁面形式，如原生應用頁面，以及在場景中呈現資訊的小部件形式。兩者适配不同的使用者需求，在多種場景下将系統與小程式連接配接為一體。

• 360 PC 小程式： PC 上的小程式仍處于探索階段。360 PC 小程式 是一個在他們的 PC 浏覽器中運作的輕量級應用程式。與傳統的網頁相比，它提供了更多的功能和更容易與 PC 作業系統互動。

  PC 小程式僅适用于經過驗證的企業帳戶。大多數功能都受到嚴格的規定，是以它們可以被視為高度可信的 Web 内容。

• PWA： PWA 是總結現代 Web 應用程式的最新術語。作為原生應用程式的對應物，PWA 的外觀和感覺就像原生應用程式，可以安裝在裝置主螢幕/啟動器/開始菜單上；它可以發送推送通知以重新吸引使用者；它可以在離線時使用，并且在網絡條件較差的情況下運作； 它适用于具有廣泛功能的裝置，并且仍在不斷發展以适用于開放 Web 标準定義的新功能；使用者可以在 PWA 應用程式内進行付款；PWA 應用程式對搜尋引擎友好，可以與超連結完美配合。 PWA 在技術和業務方面都很成功（被許多網站廣泛采用，尤其是在面向消費者的網站中）。