小程序编程方式

小程序中行之有效的方法

在本章中,我想从 Web 开发人员的角度研究小程序,总结我从小程序研究中学到的经验教训,或者回答“以小程序方式开发意味着什么”这个问题。

组件

小程序没有重新发明轮子,让开发者再次构建常见 UI 范例(如选项卡、手风琴、轮播等)的另一种实现,而是直接提供了一组默认组件,如果您需要更多组件,还可以进行扩展。在 Web 上,同样有很多选择,我在关于小程序组件的章节中列出了一些。在理想情况下,Web 上的组件库的构建方式应该允许您自由组合它们。但在实践中,很多时候,当您使用组件时,会存在某种关于您需要购买的设计系统的锁定,或者组件库的分发方式是“全有或全无”,无法轻松地将单个组件添加到项目中。但是,也有一些原子组件可以单独使用,或者像 generic-components 这样的库,它们是有意不设置样式的。找到并使用这些组件似乎是个好主意。

模型-视图-视图模型

模型-视图-视图模型 (MVVM) 架构模式促进了图形用户界面(视图)的开发通过标记语言与后端逻辑(模型)的开发分离——这意味着视图不依赖于任何特定的模型平台。虽然该模式有一些有据可查的缺点,但总的来说,它非常适合像小程序这样复杂程度的应用程序。它尤其可以在丰富的模板库中发挥作用(请参阅下一章)。

页面式思维

调试小程序表明它们本质上是多页面应用程序 (MPA)。这有很多优点,例如,它允许简单的路由和无冲突的每页样式设置。人们已经成功地将 MPA 架构应用于渐进式 Web 应用。以页面为单位思考也有助于管理资源,例如每个页面的 CSS 和 JavaScript 文件,以及其他资源(如图像和视频)。最重要的是,以这种方式构建意味着如果您不加载任何其他内容,您可以免费获得基于路由的代码拆分。在这种情况下,每个页面根据定义严格来说只加载其运行所需的内容。

构建过程

小程序没有可见的构建过程。在 Web 上,像 Snowpack 这样的现代构建工具利用 JavaScript 内置的 模块系统(称为 ESM)来避免不必要的工作,并保持快速,无论项目变得多大。虽然像 Web Bundles 这样的技术仍处于早期阶段,但它可以很容易地添加到构建过程中。

强大的功能

Web 平台最近获得了许多新功能。现在可以访问设备,通过 蓝牙USBHID串口NFC。小程序在 WebView 中运行并依赖于 JavaScript 桥,而在 Web 上,这些强大的功能可以直接使用,因此您无需针对 JavaScript 桥提供的 API 进行编程,而是直接针对浏览器 API 进行编程,而无需中间参与者。

致谢

本文由 Joe MedleyKayce BasquesMilica MihajlijaAlan Kent 和 Keith Gu 审阅。