小程序框架设计

小程序构造

为了获得与原生应用程序相似的用户体验，小程序资源通常打包在一起。下载并安装小程序软件包后，用来显示应用程序页面所需的所有静态页面模板 /CSS/JavaScript 文件都已经在用户的设备上就绪了。在下次更新之前，这些资源始终可用，无需任何额外下载内容。

小程序包是压缩格式（例如 zip）存档，包括：

• 一个配置文档，位于包的根目录下。配置文件应包括：整个小程序的概述；页面描述及其对应路径，用于页面定位和开启。

• 一个包含 JavaScript 代码的应用级逻辑文件，处理应用级生命周期回调。

• 一个或多个页面文件，包含页面结构的模板代码、页面样式的 CSS 代码和页面逻辑的 JavaScript 代码。

• 支持数字签名验证。

为了在搜索和执行时定位特定的小程序，小程序必须在平台上具有包名或 ID。还需要一个小程序图标帮助用户识别。

分离视图层与逻辑层

在小程序中，视图层通常与逻辑层分离。

视图层负责渲染小程序页面，包括 Web 组件和原生组件渲染，可以将其视为混合渲染。例如，Web 组件渲染可以由 WebView 处理，但 WebView 不支持某些 Web 组件渲染，或者是性能受限；小程序还依赖于某些原生组件，例如地图、视频等。逻辑层是用 JS Worker 实现的。Worker 负责小程序的事件处理、API 调用和生命周期管理。

扩展的原生功能通常来自宿主原生应用程序或操作系统，这些功能包括支付、文件处理、扫描、电话等。它们通过某些 API 调用。当小程序调用原生 API 时，它会将 API 调用传递给扩展的原生功能，以便通过 JS Bridge 进一步处理，并通过 JS Bridge 从扩展的原生功能获取结果。

Worker 为每个 Render 建立连接，传输需要渲染的数据以进一步处理。如果事件由小程序页面中的组件触发，则此页面的 Render 将向 Worker 发送事件以进一步处理。同时，Render 将等待 Worker 发送的数据来重新渲染小程序页面。渲染过程可被视为无状态，并且所有状态都将存储在 Worker 中。

视图层和逻辑层分离有很多好处：

• 方便多个小程序页面之间的数据共享和交互。
• 在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验。
• Render 和 JS worker 的分离和并行实现可以防止 JS 执行影响或减慢页面渲染，这有助于提高渲染性能。

生命周期

实例

用来发现、打开和访问小程序的入口众多。与多 WebView 的 Web 应用不同，同一个小程序只会创建一个实例，因此小程序以全局一致的方式保持其状态和数据。例如，在一个用户通过二维码入口第一次打开并登录小程序后，当用户从小程序商店等另一个入口返回应用时仍将保持登录状态。

性能与用户体验

打包体加载

使用小程序的构造器，用户只需在首次打开小程序时下载软件包即可，之后无需再次下载小程序中的静态资源（页面 /JavaScript/CSS），这样加载和跳转页面就会更快。此功能可改善用户操作体验并节省网络流量。

同时，小程序有一个预下载机制，可以提前下载小程序软件包，或者单独预载第一页，并在下载过程中并行执行流解压，以最大限度地减少小程序启动阶段和耗时，提升初次打开首页的性能表现。

多重渲染环境

小程序在渲染环境之间使用原生页面堆栈管理，页面切换由原生代码驱动。因此，在页面中的手势操作和页面之间的切换可以实现与原生应用完全相同的流畅体验。

由于视图层和逻辑层的隔离，视图层可以独立渲染。不受 JavaScript 逻辑代码的阻碍，可以大大提高页面的渲染速度。

预构建和复用运行时环境

小程序的运行时环境通常在启动应用程序之前预先构建，从而缩短了启动时间。预构建的内容包括渲染环境、静态资源、开发人员定义的预取请求和小程序运行时容器。小程序激活后，它将接管预构建的渲染环境，然后我们继续为缓存池预构建新的渲染环境以备下一次使用。渲染环境数量有一个限制，当任何渲染环境关闭或超出数量限制时，最早打开的渲染环境将被销毁。当小程序退出时其运行时将被销毁，而应用程序环境和资源可以复用。

辅助功能

小程序小部件

除了以小程序页面的形式渲染之外，小程序还能以信息片段的形式显示，亦即小程序小部件。在这种形式下，开发人员可以将他们的服务和 / 或内容放到各种宿主场景（称为宿主环境）中，内容可以是助手、搜索页面等。此功能将小程序的服务与场景关联起来，为用户提供更多便利。

例如，当用户购买火车票时，智能助手上的小程序小部件立即显示列车的最新状态。用户可以单击这个小部件并跳转到全屏小程序页面以获取更多详细信息。

与小程序页面相同，小部件也由 URI scheme 描述。宿主环境指定小程序包和对应的小部件通过 URI 路径加载，并通过 URI 查询参数将数据传递给小部件。小部件加载后，它将在宿主环境中显示和渲染。来自宿主和小部件的数据以及来自其他小部件的数据会被隔离，以确保安全性和独立性。

在许多情况下，小部件可以打开小程序页面以执行更复杂的操作。在这种情况下，小部件通常需要与其对应的小程序共享数据，例如保持一致的登录状态。因此小部件和小程序的数据可以互通。换句话说，小程序小部件和页面具有相同的数据访问权限。

小部件的一个目标是让用户忘记传统的应用程序概念，并以服务的形式真正满足用户的需求。因此，除了所有传统的应用程序调用路径之外，小部件还可以在各种场景下由多种方法触发，例如文本关键字、语音分析、图片识别、扫描代码、事件意图等。

小部件的一个目标是让用户忘记传统的应用程序概念，并以服务的形式真正满足用户的需求。因此，除了所有传统的应用程序调用路径之外，小部件还可以在各种场景下由多种方法触发，例如文本关键字、语音分析、图片识别、扫描代码、事件意图等。