開發人員體驗
現在我已介紹過迷你應用程式本身，接下來要著重於各種超級應用程式平台的開發人員體驗。在所有平台上開發迷你應用程式時，都必須使用超級應用程式平台免費提供的 IDE。雖然還有更多，但我想著重介紹最熱門的四種，以及第五種快速應用程式，以供比較。
迷你應用程式 IDE
與超級應用程式一樣，大多數 IDE 僅提供中文版本。請務必安裝中文版，不要安裝有時會提供的英文 (或海外) 版本，因為這些版本可能不是最新版。如果您是 macOS 開發人員，請注意並非所有 IDE 都已簽署，因此 macOS 會拒絕執行安裝程式。您可以自行承擔風險，按照 Apple 說明所述略過此步驟。
迷你應用程式入門專案
如要快速開始開發迷你應用程式，所有超級應用程式供應商都會提供可立即下載及測試的示範應用程式，有時也會整合到各種 IDE 的「New Project」(新專案) 精靈中。
開發流程
啟動 IDE 並載入或建立 (試用) 迷你應用程式後，第一步一律是登入。通常只要使用 IDE 產生的 QR code，透過已登入的超級應用程式掃描即可。你極少需要輸入密碼。登入後，IDE 會識別您的身分，讓您開始程式設計、偵錯、測試，以及將應用程式送交審查。以下是上段提及的五個 IDE 的螢幕截圖。
如您所見，所有 IDE 的基本元件都非常相似。您一律會使用以 Monaco 編輯器為基礎的程式碼編輯器，以及與 VS Code 相同的專案。在所有 IDE 中，都有以 Chrome 開發人員工具前端為基礎的偵錯工具，並經過一些修改，稍後會詳細說明 (請參閱「偵錯工具」)。IDE 本身會實作為 NW.js 或 Electron 應用程式，而 IDE 中的模擬器則會實作為 NW.js <webview> 標記或 Electron <webview> 標記，這些標記則是以 Chromium <webview> 標記為基礎。如果您對 IDE 內部結構感興趣，通常只要使用 Chrome 開發人員工具檢查即可，鍵盤快速鍵為 Control+Alt+I (在 Mac 上為 Command+Option+I)。
<webview> 標記的形式實現。
模擬器和實際裝置測試與偵錯
模擬器與 Chrome 開發人員工具的裝置模式類似。您可以模擬不同的 Android 和 iOS 裝置、變更比例和裝置方向，也可以模擬各種網路狀態、記憶體壓力、條碼讀取事件、非預期終止和深色模式。
雖然內建模擬器足以大致瞭解應用程式的行為，但裝置端測試 (如同一般網頁應用程式) 仍無可取代。只要掃描 QR code，就能測試開發中的迷你應用程式。舉例來說，在 ByteDance 開發人員工具中，使用實體裝置掃描 IDE 動態產生的 QR code，即可連往雲端託管的迷你應用程式版本，然後立即在裝置上測試。ByteDance 的運作方式是，QR code 背後的網址 (example) 會重新導向至代管網頁 (example)，其中包含具有特殊 URI 配置的連結，例如 snssdk1128://，可在各種 ByteDance 超級應用程式 (如抖音或今日頭條) 中預覽迷你應用程式 (請參閱這個範例)。其他超級應用程式供應商不會經過中繼頁面，而是直接開啟預覽畫面。
雲端預先發布版遠端偵錯功能更是令人期待。只要掃描 IDE 產生的特殊 QR code，迷你應用程式就會在實體裝置上開啟，電腦則會執行 Chrome 開發人員工具視窗，以進行遠端偵錯。
Debugger
元素偵錯
如果您曾使用 Chrome 開發人員工具，對迷你應用程式進行偵錯時，會感到非常熟悉。不過，兩者之間仍存在一些重要差異，因此工作流程會根據迷你應用程式進行調整。迷你應用程式 IDE 並非使用 Chrome 開發人員工具的「Elements」面板，而是採用專為特定 HTML 方言量身打造的自訂面板。舉例來說，如果是 WeChat，面板會稱為「Wxml」，代表 WeiXin 標記語言。在百度開發人員工具中，這項功能稱為「Swan 元素」。ByteDance 開發人員工具將其稱為 Bxml。Alipay 將其命名為 AXML，而快應用程式則將面板簡稱為 UX。我將在稍後深入探討這些標記語言。
<image> 元素。
自訂元素的運作原理
透過 about://inspect/#devices 在實體裝置上檢查 WebView 時，會發現 WeChat 開發人員工具刻意隱藏了真相。WeChat 開發人員工具顯示 <image> 的位置，實際上我看到的是名為 <wx-image> 的自訂元素，且該元素只有一個子項 <div>。值得注意的是，這個自訂元素並未使用 Shadow DOM。這些元件的詳細說明請見下文。
<image> 元素時，會發現該元素實際上是 <wx-image> 自訂元素。
CSS 偵錯
另一個差異是 CSS 各種方言的新長度單位 rpx，適用於回應式像素 (稍後會詳細說明這個單位)。WeChat 開發人員工具使用與裝置無關的 CSS 長度單位，讓您更直覺地為不同裝置大小進行開發。
200rpx 0) 指定的邊框間距。
成效稽核
效能是迷你應用程式的重中之重，因此 WeChat 開發人員工具和其他一些開發人員工具整合了 Lighthouse 啟發的稽核工具，也就不足為奇了。稽核的重點領域包括總分、效能、體驗和最佳做法。您可以自訂 IDE 的檢視畫面。在下方的螢幕截圖中，我暫時隱藏了程式碼編輯器，以便為稽核工具提供更多螢幕空間。
API 模擬
開發人員不必設定個別服務，因為模擬 API 回應是 WeChat 開發人員工具的內建功能。開發人員可透過簡單易用的介面設定 API 端點和所需的模擬回應。
特別銘謝
本文由 Joe Medley、 Kayce Basques、 Milica Mihajlija、 Alan Kent 和 Keith Gu 審查。