迷你应用开发者工具

Thomas Steiner

注意 ：此帖是文章集的一部分，其中每篇文章都是基于前几篇文章。如果您刚刚阅读完本单元，不妨从头再来开始阅读。

开发者体验

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

迷你应用 IDE

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

• 微信开发者工具
• 支付宝开发者工具
• 百度开发者工具
• ByteDance 开发者工具
• 快捷应用开发者工具

迷你应用起始项目

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

• 微信演示
• 支付宝演示
• 百度演示
• ByteDance 演示
• 快速应用演示

开发流程

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

带有模拟器、代码编辑器和调试程序的微信开发者工具。

带有代码编辑器、模拟器和调试程序的 Alipay 开发者工具。

包含模拟器、代码编辑器和调试程序的百度开发者工具。

带有模拟器、代码编辑器和调试程序的 ByteDance 开发者工具。

带有代码编辑器、模拟器和调试程序的快速应用开发者工具。

如您所见，所有 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 开发者工具检查百度开发者工具显示模拟器是以 Electron <webview> 标记形式实现的。

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

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

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

ByteDance 开发者工具显示一个二维码，用户可使用 Douyin 应用扫描该二维码，以立即在设备上进行测试。

用于预览迷你应用的中级 ByteDance 着陆页（在桌面浏览器中打开以显示流程）。

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

使用 ByteDance 开发者工具在真实设备上以无线方式远程调试迷你应用。

调试程序

元素调试

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

使用微信开发者工具检查 <image> 元素。

深入了解自定义元素

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

使用微信开发者工具检查 <image> 元素，显示它实际上是 <wx-image> 自定义元素。

CSS 调试

另一个区别是 CSS 的各种方言中自适应像素的新长度单位 rpx（稍后会详细介绍此单元）。微信开发者工具使用独立于设备的 CSS 长度单位，使针对不同设备尺寸进行开发变得更加直观。

使用微信开发者工具检查视图的自适应像素 (200rpx 0) 中指定的内边距。

性能审核

性能是迷你应用的首要考虑因素，因此微信开发者工具和其他一些开发者工具集成了 Lighthouse 式的审核工具，这也就不足为奇了。审计的重点领域为总体、性能、经验和最佳实践。您可以自定义 IDE 视图。在下面的屏幕截图中，我暂时隐藏了代码编辑器，以便为审核工具提供更多屏幕空间。

微信开发者工具中的内置审核工具，会显示“总体”“性能”“体验”和“最佳实践”。

API 模拟

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

微信开发者工具的集成 API 响应模拟功能。

成功 ：请继续阅读下文，了解迷你应用的标记、样式设置和脚本。

致谢

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