迷你應用程式開發人員工具

Thomas Steiner

開發人員體驗

既然我已介紹過小小的應用程式，接下來我想聚焦在各種超級應用程式平台的開發人員體驗。所有平台都提供簡單的應用程式開發，都是透過超級應用程式平台免費提供的 IDE 進行。雖然還有更多，我想著重於比較熱門的四個項目，以及比較 Quick App 的第五種應用程式。

迷你應用程式 IDE

如同超級應用程式，大多數 IDE 都只提供中文版本。實際上，您應確保安裝的是中文版本，而不是有時提供的英文 (或海外) 版本，因為其內容可能不是最新版本。請注意，如果您是 macOS 開發人員，請注意並非所有 IDE 皆已簽署，這表示 macOS 會拒絕執行安裝程式。您可以自行承擔風險，略過 Apple 說明所述。

迷你應用程式入門專案

為了迅速開始開發迷你應用程式，所有超級應用程式供應商均提供可立即下載及測試的試用版應用程式，有時也會整合至各種 IDE 的「New Project」精靈中。

開發流程

啟動 IDE 並載入或建立 (示範) 迷你應用程式後，第一步一律必須登入。通常，您只需使用 IDE 產生的超級應用程式 (已登入的位置) 掃描 QR code。在極少數的情況下，您必須輸入密碼。登入後，IDE 會知道您的身分，並讓您開始程式設計、偵錯、測試及提交應用程式進行審查。後續可看到上方段落提及的五個 IDE 螢幕截圖。

顯示模擬器、程式碼編輯器和偵錯工具的 WeChat 開發人員工具應用程式視窗。
我們提供模擬器、程式碼編輯器和偵錯工具的 WeChat 開發人員工具。
顯示程式碼編輯器、模擬器和偵錯工具的 Alipay 開發人員工具應用程式視窗。
Alipay 開發人員工具，支援程式碼編輯器、模擬器和偵錯工具。
百度開發人員工具應用程式視窗，顯示模擬器、程式碼編輯器和偵錯工具。
百度開發人員工具和模擬工具、程式碼編輯器和偵錯工具。
ByteDance 開發人員工具應用程式視窗，顯示模擬器、程式碼編輯器和偵錯工具。
使用模擬器、程式碼編輯器和偵錯工具的 ByteDance 開發人員工具。
「快速應用程式開發人員工具」應用程式視窗，顯示程式碼編輯器、模擬器和偵錯工具。
具備程式碼編輯器、模擬器和偵錯工具的快速應用程式開發人員工具。

如您所見，所有 IDE 的基本元件都非常相似。您隨時都能使用 Monaco Editor 編寫程式碼編輯器，這個編輯器也支援 VS Code 的相同專案。所有 IDE 都會根據 Chrome 開發人員工具前端的偵錯工具，進行一些修改，詳情請參閱偵錯工具。每一的 IDE 是以 NW.js 或 Electron 應用程式的形式實作，IDE 中的模擬工具會視為 NW.js <webview> 標記或 Electron <webview> 標記，而後者是以 Chromium <webview> 標記為基礎。如果您對 IDE 的內部設計感興趣，通常只要使用鍵盤快速鍵 Control + Alt + I (或 Mac 上的 Command + Option + I)，即可在 Chrome 開發人員工具進行檢查。

用來檢查百度開發人員工具的 Chrome 開發人員工具，顯示模擬器的 WebView 標記顯示在 Chrome 開發人員工具的「Elements」面板中。
使用 Chrome 開發人員工具檢查百度開發人員工具後，您會發現模擬工具是 Electron 的 <webview> 標記。

模擬器和實體裝置測試與偵錯

這個模擬工具類似 Chrome 開發人員工具的裝置模式，您可以模擬不同的 Android 和 iOS 裝置、變更縮放比例和裝置方向，也可以模擬各種網路狀態、記憶體壓力、條碼讀取事件、非預期的終止事件和深色模式。

雖然內建模擬器足以大致瞭解應用程式的行為，但裝置端測試和一般網頁應用程式一樣，無法取代。測試開發中的迷你應用程式只需掃描 QR code 即可。舉例來說，在 ByteDance 開發人員工具中，掃描 IDE 動態產生的 QR code 會導向雲端託管的小型應用程式，接著就能立即在裝置上測試。這項做法對 ByteDance 的運作方式，是 QR code 背後的網址 (範例) 會重新導向至代管網頁 (範例)，其中包含了採用特殊 URI 配置的連結 (例如 snssdk1128://)，以便在 Douyin 或 Toutiao 等多種 ByteDance 超級應用程式中預覽迷你應用程式 (詳情請參閱範例)。其他超級應用程式供應商不會進入中繼頁面，而是直接開啟預覽畫面。

ByteDance 開發人員工具顯示 QR code，使用者可以使用 Douyin 應用程式掃描，查看裝置上目前的迷你應用程式。
ByteDance 開發人員工具，顯示使用者可使用 Douyin 應用程式掃描的 QR code，在裝置上立即進行測試。
在該公司的多個超級應用程式中預覽 ByteDance 迷你應用程式的中繼到達網頁，並使用一般電腦瀏覽器開啟，以便執行反向工程。
預覽小型應用程式的中繼 ByteDance 到達網頁 (在電腦版瀏覽器中開啟以顯示流程)。

更引人注目的功能，是雲端預覽遠端偵錯功能。只要掃描特別的 IDE 產生的 QR code，迷你應用程式就會在實體裝置上開啟，並顯示在電腦上執行的 Chrome 開發人員工具視窗以進行遠端偵錯。

一部手機正在執行迷你應用程式，畫面上醒目顯示了 ByteDance 開發人員工具偵錯工具的部分內容，正在筆電上執行檢查。
使用 ByteDance 開發人員工具，在實體裝置上無線對小型應用程式進行無線偵錯。

Debugger

元素偵錯

使用過 Chrome 開發人員工具的使用者，都非常熟悉小型的應用程式偵錯體驗。但其中有一些重大差異，是針對小型應用程式設計的工作流程。不使用 Chrome 開發人員工具的元素面板，迷你應用程式 IDE 則有專為其特定 HTML 方言量身打造的面板。舉例來說，在 WeChat 中，這個面板的名稱是 Wxml，代表 WeiXin 標記語言。在百度開發人員工具中稱為「Swan Element」。ByteDance 開發人員工具呼叫 Bxml。Alipay 會將其命名為「AXML」，而「快速應用程式」會參照面板做為 UX。我稍後會深入介紹這些標記語言。

使用 WeChat 開發人員工具的「Wxml」面板檢查圖片。這表示使用中的標記是「image」標記。
使用 WeChat 開發人員工具檢查 <image> 元素。

背後的自訂元素

透過 about://inspect/#devices 在實際裝置上檢查 WebView，發現 WeChat 開發人員工具刻意隱藏了真相。如果 WeChat 開發人員工具顯示 <image>，我當下看到的是名為 <wx-image> 的自訂元素，其中 <div> 是唯一的子項。值得注意的是，這個自訂元素不使用 Shadow DOM。請參閱後續章節，進一步瞭解這些元件。

使用 Chrome 開發人員工具檢查實際裝置上執行的 WeChat 迷你應用程式。當 WeChat 開發人員工具回報我查看的是「image」標記時，Chrome 開發人員工具顯示我確實處理的是「wx-image」自訂元素。
使用 WeChat 開發人員工具檢查 <image> 元素時，會發現該元素實際上是 <wx-image> 自訂元素。

CSS 偵錯

另一個差異在於不同 CSS 方言的回應式像素的新長度單位 rpx (詳情請參閱本單元後續章節)。WeChat 開發人員工具使用裝置獨立的 CSS 長度單元，讓針對不同裝置尺寸進行開發更清楚好懂。

在 WeChat 開發人員工具中，檢查指定頂端和底部邊框間距為「200rpx」的檢視畫面。
使用 WeChat 開發人員工具檢查檢視畫面以回應式像素 (200rpx 0) 指定的邊框間距。

效能稽核

小型應用程式的效能是首屈一指的效能，因此 WeChat 開發人員工具和一些其他開發人員工具的整合 Lighthouse 型稽核工具並不令人意外。稽核的重點領域包括 整體效能、經驗和最佳做法您可以自訂 IDE 的檢視畫面。在下方的螢幕截圖中，我已暫時隱藏程式碼編輯器，以便讓稽核工具擁有更多螢幕空間。

使用內建稽核工具執行效能稽核。分數則顯示整體、效能、經驗和最佳做法，每 100 分 (滿分 100 分)。
WeChat 開發人員工具內建的稽核工具可顯示整體成效、效能、經驗和最佳做法。

API 模擬

模擬 API 回應會直接包含在 WeChat 開發人員工具中，不需要開發人員設定獨立服務。透過簡單易用的介面，開發人員可以設定 API 端點和所需的模擬回應。

在 WeChat 開發人員工具中設定 API 端點的模擬回應。
WeChat 開發人員工具的整合式 API 回應模擬功能。

特別銘謝

本文由 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu 審查。