迷你应用开发者工具

至此,我已经介绍了迷你应用本身,接下来我想重点介绍各种超级应用平台的开发者体验。所有平台上的迷你应用开发都在超级应用平台免费提供的 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.jsElectron 应用的形式实现的,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 窗口以进行远程调试。

一部运行迷你应用的手机,其中部分界面由 ByteDance 开发者工具调试程序突出显示,在笔记本电脑上运行检查界面。
使用 ByteDance 开发者工具在真实设备上以无线方式远程调试迷你应用。

调试程序

元素调试

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

使用微信开发者工具的“Wxml”面板检查图片。它显示正在使用的标记是 `image` 标记。
使用微信开发者工具检查 <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 MedleyKayce BasquesMilica MihajlijaAlan Kent 和 Keith Gu 审阅。