小程序开发者工具

Thomas Steiner

开发者体验

既然我已经介绍了小程序本身，我想重点介绍各种超级应用平台的开发者体验。所有平台上的小程序开发都在超级应用平台免费提供的 IDE 中进行。虽然还有更多，但我只想关注最流行的四种，以及第五种用于比较的快应用。

小程序 IDE

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

小程序启动器项目

为了快速开始小程序开发，所有超级应用提供商都提供演示应用，可以立即下载和测试，有时也集成在各种 IDE 的“新建项目”向导中。

开发流程

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

WeChat DevTools application window showing simulator, code editor, and debugger.
带有模拟器、代码编辑器和调试器的微信开发者工具。
Alipay DevTools application window showing code editor, simulator, and debugger.
带有代码编辑器、模拟器和调试器的支付宝开发者工具。
Baidu DevTools application window showing simulator, code editor, and debugger.
带有模拟器、代码编辑器和调试器的百度开发者工具。
ByteDance DevTools application window showing simulator, code editor, and debugger.
带有模拟器、代码编辑器和调试器的字节跳动开发者工具。
Quick App DevTools application window showing code editor, simulator, and debugger.
带有代码编辑器、模拟器和调试器的快应用开发者工具。

如您所见，所有 IDE 的基本组件都非常相似。您始终拥有一个基于 Monaco Editor 的代码编辑器，与 VS Code 相同的项目。在所有 IDE 中，都有一个基于 Chrome DevTools frontend 的调试器，并进行了一些修改，稍后会详细介绍（请参阅调试器）。IDE 本身要么作为 NW.js 应用实现，要么作为 Electron 应用实现，IDE 中的模拟器被实现为 NW.js <webview> 标签或 Electron <webview> 标签，而这些标签又基于 Chromium <webview> 标签。如果您对 IDE 内部结构感兴趣，通常可以使用 Chrome DevTools 通过键盘快捷键 Control+Alt+I（或 Mac 上的 Command+Option+I）进行检查。

Chrome DevTools used to inspect Baidu's DevTools showing the simulator's webview tag in the Chrome DevTools' Elements panel.
使用 Chrome DevTools 检查百度开发者工具显示模拟器是作为 Electron <webview> 标签实现的。

模拟器和真机测试与调试

该模拟器与您可能从 Chrome DevTools 的 设备模式 中了解到的类似。您可以模拟不同的 Android 和 iOS 设备，更改比例和设备方向，还可以模拟各种网络状态、内存压力、条形码读取事件、意外终止和暗黑模式。

虽然内置模拟器足以大致了解应用的行为方式，但与常规 Web 应用一样，真机测试是不可替代的。测试正在开发中的小程序只需扫描二维码即可。例如，在字节跳动开发者工具中，使用真机扫描 IDE 动态生成的二维码会导致云托管版本的小程序，然后可以立即在设备上进行测试。字节跳动的工作方式是二维码背后的 URL (示例) 重定向到托管页面 (示例)，其中包含带有特殊 URI 方案的链接，例如 snssdk1128://，以在各种字节跳动超级应用（如抖音或今日头条）上预览小程序（这是一个示例）。其他超级应用提供商不经过中间页面，而是直接打开预览。

ByteDance DevTools showing a QR code that the user can scan with the Douyin app to see the current mini app on their device.
字节跳动开发者工具显示一个二维码，用户可以使用抖音应用扫描该二维码以进行即时真机测试。
Intermediate landing page for previewing a ByteDance mini app in various of the company's super apps, opened on a regular desktop browser for reverse-engineering the process.
用于预览小程序的中间字节跳动着陆页（在桌面浏览器上打开以显示流程）。

更引人注目的功能是基于云的预览远程调试。只需扫描同样由 IDE 生成的特殊二维码，小程序就会在物理设备上打开，并在计算机上运行 Chrome DevTools 窗口以进行远程调试。

A mobile phone running a mini app with parts of the UI highlighted by the ByteDance DevTools debugger running on a laptop inspecting it.
使用字节跳动开发者工具无线远程调试真机上的小程序。

调试器

元素调试

对于任何使用过 Chrome DevTools 的人来说，小程序调试体验都非常熟悉。但是，也有一些重要的差异，使工作流程更适合小程序。小程序 IDE 没有 Chrome DevTools 的元素面板，而是有一个定制的面板，该面板根据其特定的 HTML 方言量身定制。例如，在微信的情况下，该面板称为 Wxml，代表 WeiXin Markup Language。在百度开发者工具中，它被称为 Swan Element。字节跳动开发者工具将其称为 Bxml。支付宝将其命名为 AXML，而快应用则简单地将面板称为 UX。我将在稍后深入探讨这些标记语言。

Inspecting an image with WeChat DevTools' 'Wxml' panel. It shows that the tag in use is an `image` tag.
使用微信开发者工具检查 <image> 元素。

底层的自定义元素

通过 about://inspect/#devices 检查真机上的 WebView 可以发现，微信开发者工具故意隐藏了真相。微信开发者工具显示 <image> 的地方，我实际看到的是一个名为 <wx-image> 的自定义元素，其子元素为 <div>。有趣的是，此自定义元素不使用 Shadow DOM。有关这些组件的更多信息，请稍后阅读。

Inspecting a WeChat mini app running on a real device with Chrome DevTools. Where WeChat DevTools reported I am looking at an `image` tag, Chrome DevTools reveals I am actually dealing with a `wx-image` custom element.
使用微信开发者工具检查 <image> 元素显示它实际上是一个 <wx-image> 自定义元素。

CSS 调试

另一个区别是各种 CSS 方言中用于响应式像素的新长度单位 rpx（有关此单位的更多信息，请稍后阅读）。微信开发者工具使用设备无关的 CSS 长度单位，使针对不同设备尺寸进行开发更加直观。

Inspecting a view with a specified top and bottom padding of `200rpx` in WeChat DevTools.
使用微信开发者工具检查视图的响应式像素 (200rpx 0) 中指定的内边距。

性能审核

性能是小程序的重中之重，因此微信开发者工具和其他一些开发者工具具有集成的 Lighthouse 启发式审核工具也就不足为奇了。审核的重点领域是总分、性能、体验和最佳实践。IDE 的视图可以自定义。在下面的屏幕截图中，我临时隐藏了代码编辑器，以便为审核工具提供更多屏幕空间。

Running a performance audit with the built-in audit tool. The scores show Total, Performance, Experience, and Best Practice, each 100 out of 100 points.
微信开发者工具中内置的审核工具显示总分、性能、体验和最佳实践。

API 模拟

API 响应模拟直接成为微信开发者工具的一部分，而不是要求开发者设置单独的服务。通过易于使用的界面，开发者可以设置 API 端点和所需的模拟响应。

Setting up a mock response for an API endpoint in WeChat DevTools.
微信开发者工具集成的 API 响应模拟功能。

致谢

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