此页面由 Cloud Translation API 翻译。

迷你应用开发者工具

Thomas Steiner

开发者体验

至此，我已经介绍了迷你应用本身，接下来我想重点介绍各种超级应用平台的开发者体验。所有平台上的迷你应用开发都在超级应用平台免费提供的 IDE 中进行。虽然还有很多，但我还是想着重介绍四种最受欢迎的应用，为快速应用提供的第五种服务进行比较。

迷你应用 IDE

与超级应用一样，大多数 IDE 仅支持中文。实际上，您需要确保安装的是中文版本，而不是有时可用的英语（或海外）版本，因为它可能不是最新版本。如果您是 macOS 开发者，请注意，并非所有 IDE 都已签名，这意味着 macOS 会拒绝运行安装程序。您可以自行承担风险绕过此设置，如 Apple 帮助中所述。

迷你应用起始项目

为了快速开始进行迷你应用开发，所有超级应用提供商都提供了可立即下载和测试的演示版应用，有时还集成到各种 IDE 的“New Project”向导中。

开发流程

启动 IDE 并加载或创建（演示版）迷你应用后，第一步始终是登录。通常，您只需使用 IDE 生成的超级应用（您已登录该应用）扫描二维码。您很少需要输入密码。在您登录后，IDE 会知道您的身份，并允许您开始编程、调试、测试，并提交应用以供审核。在下文中，您可以看到上一段提到的五个 IDE 的屏幕截图。

显示模拟器、代码编辑器和调试程序的微信开发者工具应用窗口。 — 带有模拟器、代码编辑器和调试程序的微信开发者工具。

显示代码编辑器、模拟器和调试程序的 Alipay 开发者工具应用窗口。 — 带有代码编辑器、模拟器和调试程序的 Alipay 开发者工具。

显示模拟器、代码编辑器和调试程序的百度开发者工具应用窗口。 — 包含模拟器、代码编辑器和调试程序的百度开发者工具。

显示模拟器、代码编辑器和调试程序的 ByteDance DevTools 应用窗口。 — 带有模拟器、代码编辑器和调试程序的 ByteDance 开发者工具。

显示代码编辑器、模拟器和调试程序的 Quick App DevTools 应用窗口。 — 带有代码编辑器、模拟器和调试程序的快速应用开发者工具。

如您所见，所有 IDE 的基本组件都非常相似。您始终拥有基于 Monaco Editor 的代码编辑器，这个项目也为 VS Code 提供支持。所有 IDE 中都有一个基于 Chrome 开发者工具前端的调试程序，此调试程序进行了一些修改，后面会进行详细介绍（请参阅 Debugger）。IDE 本身是以 NW.js 或 Electron 应用的形式实现的，IDE 中的模拟器则以 NW.js <webview> 标记或 Electron <webview> 标记的形式实现，而后者则基于 Chromium <webview> 标记。如果您对 IDE 内部构件感兴趣，通常只需使用 Chrome 开发者工具进行检查，只需使用键盘快捷键 Ctrl + Alt + I（在 Mac 上，则按 Command + Option + I）即可。

Chrome 开发者工具用于检查百度的开发者工具，它在 Chrome 开发者工具的“Elements”面板中显示模拟器的 WebView 标记。 — 使用 Chrome 开发者工具检查百度开发者工具显示模拟器是以 Electron `<webview>` 标记形式实现的。

模拟器和真实设备测试和调试

模拟器类似于您可能从 Chrome 开发者工具的设备模式了解的内容。您可以模拟不同的 Android 和 iOS 设备、更改缩放比例和设备屏幕方向，但也可以模拟各种网络状态、内存压力、条形码读取事件、意外终止和深色模式。

虽然内置的模拟器足以让您大致了解应用的行为，但设备端测试（就像对常规 Web 应用一样）是不可替代的。只需扫描二维码，即可测试开发中的迷你应用。例如，在 ByteDance 开发者工具中，使用真实设备扫描 IDE 动态生成的二维码会生成云托管版本的迷你应用，然后可立即在设备上进行测试。对 ByteDance 来说，二维码背后的网址（示例）会重定向到一个托管页面（示例），该页面包含具有特殊 URI 架构的链接（例如 snssdk1128://），以便在 Douyin 或 Toutiao 等各种字节跳动超级应用中预览迷你应用（点击此处查看示例）。其他超级应用提供程序无需浏览中间页面，而是直接打开预览。

ByteDance 开发者工具显示了一个二维码，用户可以使用 Douyin 应用扫描该二维码，从而查看设备上当前的迷你应用。 — ByteDance 开发者工具显示一个二维码，用户可使用 Douyin 应用扫描该二维码，以立即在设备上进行测试。

用于预览 ByteDance 迷你应用在该公司各种超级应用中的中间着陆页，在常规桌面浏览器中打开，以便对该流程进行逆向工程。 — 用于预览迷你应用的中级 ByteDance 着陆页（在桌面浏览器中打开以显示流程）。

更具吸引力的功能是基于云端的预览远程调试。只需扫描同样由 IDE 生成的特殊二维码后，迷你应用会在实体设备上打开，并在计算机上运行 Chrome DevTools 窗口以进行远程调试。

调试程序

元素调试

使用过 Chrome 开发者工具的所有人都非常熟悉迷你应用调试体验。不过，存在一些重要的差异，使得针对迷你应用定制的工作流。与 Chrome 开发者工具的“Element”面板不同，迷你应用 IDE 具有一个自定义面板，该面板是针对其特定 HTML 方言量身定制的。例如，以微信为例，此面板称为 Wxml，它代表微信标记语言。在百度开发者工具中，该元素称为 Swan Element。ByteDance 开发者工具将其称为 Bxml。支付宝将其命名为 AXML，“快捷应用”引用该面板简单地称为“用户体验”。我稍后会深入探讨这些标记语言。

使用微信开发者工具的“Wxml”面板检查图片。它显示正在使用的标记是 `image` 标记。 — 使用微信开发者工具检查 `<image>` 元素。

深入了解自定义元素

通过 about://inspect/#devices 在真实设备上检查 WebView 显示，微信开发者工具故意隐藏了事实。在微信开发者工具显示 <image> 的地方，我实际看到的是一个名为 <wx-image> 的自定义元素，它以 <div> 作为其唯一子级。值得注意的是，此自定义元素未使用 Shadow DOM。稍后将详细介绍这些组件。