开发者体验
至此,我已经介绍了迷你应用本身,接下来我想重点介绍各种超级应用平台的开发者体验。所有平台上的迷你应用开发都在超级应用平台免费提供的 IDE 中进行。虽然还有很多,但我还是想着重介绍四种最受欢迎的应用,为快速应用提供的第五种服务进行比较。
迷你应用 IDE
与超级应用一样,大多数 IDE 仅支持中文。实际上,您需要确保安装的是中文版本,而不是有时可用的英语(或海外)版本,因为它可能不是最新版本。如果您是 macOS 开发者,请注意,并非所有 IDE 都已签名,这意味着 macOS 会拒绝运行安装程序。您可以自行承担风险绕过此设置,如 Apple 帮助中所述。
迷你应用起始项目
为了快速开始进行迷你应用开发,所有超级应用提供商都提供了可立即下载和测试的演示版应用,有时还集成到各种 IDE 的“New Project”向导中。
开发流程
启动 IDE 并加载或创建(演示版)迷你应用后,第一步始终是登录。通常,您只需使用 IDE 生成的超级应用(您已登录该应用)扫描二维码。您很少需要输入密码。在您登录后,IDE 会知道您的身份,并允许您开始编程、调试、测试,并提交应用以供审核。在下文中,您可以看到上一段提到的五个 IDE 的屏幕截图。
![显示模拟器、代码编辑器和调试程序的微信开发者工具应用窗口。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/wechat-devtools-applicati-e7bdd4cc5967b.png?authuser=5&hl=hu)
![显示代码编辑器、模拟器和调试程序的 Alipay 开发者工具应用窗口。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/alipay-devtools-applicati-6f47f9ec8e0f1.png?authuser=5&hl=hu)
![显示模拟器、代码编辑器和调试程序的百度开发者工具应用窗口。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/baidu-devtools-applicatio-f4c5cc799b3e1.png?authuser=5&hl=hu)
![显示模拟器、代码编辑器和调试程序的 ByteDance DevTools 应用窗口。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/bytedance-devtools-applic-1f60b6ef6e2c7.png?authuser=5&hl=hu)
![显示代码编辑器、模拟器和调试程序的 Quick App DevTools 应用窗口。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/quick-app-devtools-applic-5d28bf9a61062.png?authuser=5&hl=hu)
如您所见,所有 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 标记。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/chrome-devtools-used-ins-107c9e255b2fa.png?authuser=5&hl=hu)
<webview>
标记形式实现的。
模拟器和真实设备测试和调试
模拟器类似于您可能从 Chrome 开发者工具的设备模式了解的内容。您可以模拟不同的 Android 和 iOS 设备、更改缩放比例和设备屏幕方向,但也可以模拟各种网络状态、内存压力、条形码读取事件、意外终止和深色模式。
虽然内置的模拟器足以让您大致了解应用的行为,但设备端测试(就像对常规 Web 应用一样)是不可替代的。只需扫描二维码,即可测试开发中的迷你应用。例如,在 ByteDance 开发者工具中,使用真实设备扫描 IDE 动态生成的二维码会生成云托管版本的迷你应用,然后可立即在设备上进行测试。对 ByteDance 来说,二维码背后的网址(示例)会重定向到一个托管页面(示例),该页面包含具有特殊 URI 架构的链接(例如 snssdk1128://
),以便在 Douyin 或 Toutiao 等各种字节跳动超级应用中预览迷你应用(点击此处查看示例)。其他超级应用提供程序无需浏览中间页面,而是直接打开预览。
![ByteDance 开发者工具显示了一个二维码,用户可以使用 Douyin 应用扫描该二维码,从而查看设备上当前的迷你应用。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/bytedance-devtools-showin-5971d90f52171.png?authuser=5&hl=hu)
![用于预览 ByteDance 迷你应用在该公司各种超级应用中的中间着陆页,在常规桌面浏览器中打开,以便对该流程进行逆向工程。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/intermediate-landing-page-406369c8a848.png?authuser=5&hl=hu)
更具吸引力的功能是基于云端的预览远程调试。只需扫描同样由 IDE 生成的特殊二维码后,迷你应用会在实体设备上打开,并在计算机上运行 Chrome DevTools 窗口以进行远程调试。
![一部运行迷你应用的手机,其中部分界面由 ByteDance 开发者工具调试程序突出显示,在笔记本电脑上运行检查界面。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/a-mobile-phone-running-m-042b833648b9.png?authuser=5&hl=hu)
调试程序
元素调试
使用过 Chrome 开发者工具的所有人都非常熟悉迷你应用调试体验。不过,存在一些重要的差异,使得针对迷你应用定制的工作流。与 Chrome 开发者工具的“Element”面板不同,迷你应用 IDE 具有一个自定义面板,该面板是针对其特定 HTML 方言量身定制的。例如,以微信为例,此面板称为 Wxml,它代表微信标记语言。在百度开发者工具中,该元素称为 Swan Element。ByteDance 开发者工具将其称为 Bxml。支付宝将其命名为 AXML,“快捷应用”引用该面板简单地称为“用户体验”。我稍后会深入探讨这些标记语言。
![使用微信开发者工具的“Wxml”面板检查图片。它显示正在使用的标记是 `image` 标记。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/inspecting-image-wechat-d732811586a65.png?authuser=5&hl=hu)
<image>
元素。
深入了解自定义元素
通过 about://inspect/#devices 在真实设备上检查 WebView 显示,微信开发者工具故意隐藏了事实。在微信开发者工具显示 <image>
的地方,我实际看到的是一个名为 <wx-image>
的自定义元素,它以 <div>
作为其唯一子级。值得注意的是,此自定义元素未使用 Shadow DOM。稍后将详细介绍这些组件。
![使用 Chrome 开发者工具检查在真实设备上运行的微信迷你应用。根据微信开发者工具报告,我查看的是 `image` 标记,而 Chrome 开发者工具显示我实际上处理的是 `wx-image` 自定义元素。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/inspecting-wechat-mini-a-54fc65cc5ce63.png?authuser=5&hl=hu)
<image>
元素,显示它实际上是 <wx-image>
自定义元素。
CSS 调试
另一个区别是 CSS 的各种方言中自适应像素的新长度单位 rpx
(稍后会详细介绍此单元)。微信开发者工具使用独立于设备的 CSS 长度单位,使针对不同设备尺寸进行开发变得更加直观。
![在微信开发者工具中检查以指定上下内边距为 `200rpx` 的视图。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/inspecting-view-a-speci-d17a746cb7bfb.png?authuser=5&hl=hu)
200rpx 0
) 中指定的内边距。
性能审核
性能是迷你应用的首要考虑因素,因此微信开发者工具和其他一些开发者工具集成了 Lighthouse 式的审核工具,这也就不足为奇了。审计的重点领域为总体、性能、经验和最佳实践。您可以自定义 IDE 视图。在下面的屏幕截图中,我暂时隐藏了代码编辑器,以便为审核工具提供更多屏幕空间。
![使用内置审核工具运行性能审核。得分会显示“总体”“性能”“体验”和“最佳实践”,满分为 100 分。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/running-performance-audi-fa75ebecfd4e2.png?authuser=5&hl=hu)
API 模拟
模拟 API 响应是微信开发者工具直接组成部分的一部分,无需开发者设置单独的服务。通过简单易用的界面,开发者可以设置 API 端点和所需的模拟响应。
![在微信开发者工具中为 API 端点设置模拟响应。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-devtools/image/setting-a-mock-response-b73d071a1206d.png?authuser=5&hl=hu)
致谢
本文由 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu 审阅。