迷你应用开发者工具

Thomas Steiner

开发者体验

现在，我已经介绍了本身的小程序，接下来我想重点介绍各种超级应用平台的开发者体验。所有平台上的小程序开发都在超级应用平台免费提供的 IDE 中进行。虽然还有更多，但我想重点介绍最受欢迎的四种，以及一种用于比较的快应用。

迷你应用 IDE

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

小程序初始项目

为了让开发者快速开始开发小程序，所有超级应用提供方都提供了可立即下载和测试的演示版应用，这些应用有时还会集成到各种 IDE 的“新建项目”向导中。

开发流程

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

微信开发者工具应用窗口，其中显示了模拟器、代码编辑器和调试器。
包含模拟器、代码编辑器和调试器的微信开发者工具。
支付宝开发者工具应用窗口，其中显示了代码编辑器、模拟器和调试器。
包含代码编辑器、模拟器和调试器的支付宝开发者工具。
百度开发者工具应用窗口，其中显示了模拟器、代码编辑器和调试器。
包含模拟器、代码编辑器和调试器的百度开发者工具。
ByteDance DevTools 应用窗口，其中显示了模拟器、代码编辑器和调试器。
包含模拟器、代码编辑器和调试器的 ByteDance 开发者工具。
快速应用开发者工具应用窗口，显示代码编辑器、模拟器和调试程序。
包含代码编辑器、模拟器和调试器的快应用开发者工具。

如您所见，所有 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）检查它们即可。

Chrome 开发者工具用于检查百度开发者工具，显示 Chrome 开发者工具的“元素”面板中的模拟器 WebView 标记。
通过 Chrome 开发者工具检查百度开发者工具，发现模拟器是以 Electron <webview> 标记实现的。

模拟器和真机测试与调试

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

虽然内置模拟器足以让您大致了解应用的运行情况，但与常规 Web 应用一样，设备端测试是不可替代的。只需扫描二维码，即可测试正在开发中的小程序。例如，在 ByteDance DevTools 中，使用真实设备扫描 IDE 动态生成的二维码会导致迷你应用在云端托管，然后可以立即在设备上进行测试。对于 ByteDance，此功能的运作方式是，二维码 (example) 后面的网址会重定向到托管网页 (example)，该网页包含具有特殊 URI scheme（例如 snssdk1128://）的链接，用于在各种 ByteDance 超级应用（例如抖音或今日头条）上预览小程序（此处提供了一个示例）。其他超级应用提供商不会经过中间网页，而是直接打开预览。

ByteDance DevTools 显示了一个二维码，用户可以使用抖音应用扫描该二维码，以便在设备上查看当前小程序。
ByteDance DevTools 显示了一个二维码，用户可以使用抖音应用扫描该二维码，以便立即在设备上进行测试。
用于在各种 ByteDance 超级应用中预览 ByteDance 小程序的中间着陆页，在常规桌面浏览器中打开以对流程进行逆向工程。
用于预览小程序的中间 ByteDance 着陆页（在桌面浏览器中打开以显示流程）。

更具吸引力的功能是基于云的预览远程调试。只需扫描一个由 IDE 生成的特殊二维码，即可在实体设备上打开小程序，同时在计算机上运行 Chrome 开发者工具窗口以进行远程调试。

一部手机正在运行一个微应用，笔记本电脑上运行的 ByteDance DevTools 调试器突出显示了该微应用的部分界面。
使用 ByteDance 开发者工具在真实设备上以无线方式远程调试小程序。

Debugger

元素调试

对于曾经使用过 Chrome 开发者工具 的人来说，小程序调试体验非常熟悉。不过，两者之间存在一些重要区别，使得工作流程更适合小程序。与 Chrome 开发者工具的“元素”面板不同，小程序 IDE 具有针对其特定 HTML 方言量身定制的自定义面板。例如，对于微信，该面板称为 Wxml，表示 WeiXin 标记语言。在百度开发者工具中，它被称为 Swan Element。ByteDance DevTools 将其称为 Bxml。 支付宝将其命名为 AXML，而快应用则将该面板简称为 UX。我将在稍后深入探讨这些标记语言。

使用微信开发者工具的“Wxml”面板检查图片。这表示所使用的标记是“图片”标记。
使用微信开发者工具检查 <image> 元素。

深入了解自定义元素

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

使用 Chrome 开发者工具检查在真实设备上运行的微信小程序。微信开发者工具报告说我正在查看 `image` 标记，而 Chrome 开发者工具则显示我实际上是在处理 `wx-image` 自定义元素。
使用微信开发者工具检查 <image> 元素会发现，它实际上是一个 <wx-image> 自定义元素。

CSS 调试

另一个区别是，在各种 CSS 方言中，新增了用于表示自适应像素的长度单位 rpx（有关此单位的更多信息，请参阅下文）。微信开发者工具使用与设备无关的 CSS 长度单位，以便更直观地针对不同尺寸的设备进行开发。

在微信开发者工具中检查具有指定顶部和底部内边距（均为 `200rpx`）的视图。
使用微信开发者工具检查以响应像素 (200rpx 0) 为单位指定的视图内边距。

性能审核

性能对于小程序至关重要，因此微信开发者工具和其他一些开发者工具都集成了一款受 Lighthouse 启发的评估工具，这一点并不令人意外。审核的重点领域包括“总分”“效果”“体验”和“最佳实践”。您可以自定义 IDE 的视图。在下面的屏幕截图中，我暂时隐藏了代码编辑器，以便为审核工具提供更多屏幕空间。

使用内置审核工具运行性能审核。得分显示总分、性能、体验和最佳实践，每项满分为 100 分。
微信开发者工具中的内置审核工具，显示总分、性能、体验和最佳实践。

API 模拟

模拟 API 响应直接集成到微信开发者工具中，无需开发者设置单独的服务。通过易于使用的界面，开发者可以设置 API 端点和所需的模拟响应。

在微信开发者工具中为 API 端点设置模拟响应。
微信开发者工具的集成式 API 响应模拟功能。

致谢

本文已由以下人员审核：Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu。