2019年9月12日，W3C首次公开发布小程序标准化白皮书，文档介绍了这种目前非常流行的依赖Web技术、融合原生应用功能的混合解决方案。一旦这个标准发布，未来各类小程序是否能够实现统一呢？

文档状态

本节介绍本文档发布时的状态。本文档可能会被其他文档取代。W3C 当前出版物列表和本技术报告的最新版本可在 W3C 技术报告索引中找到：

这项工作仍在进行中。该提案正在 W3C Web 中文兴趣小组孵化。本文档由 Web 中文兴趣小组作为第一份公开工作草案发布。

问题列表是讨论此规范的首选位置：。或者，您可以将评论发送到我们的邮件列表。请将它们发送至。

发布此首份公共工作草案并不意味着 W3C 会员对其的认可。这是一份草案文档，可能会随时被其他文档更新、取代或淘汰。对本文档的引用应表明这是一项正在进行的工作。

编写本文档的小组遵循 W3C 专利政策。该小组并不预期本文档将成为 W3C 推荐标准。W3C 维护与该小组交付成果相关的所有专利披露的公开列表；该页面还包括披露专利的说明。如果个人实际了解他认为包含“必要权利要求”的专利，则他必须根据 W3C 专利政策第 6 条披露该信息：#sec-

本文档遵循 ​​2019 年 3 月 1 日的 W3C 流程文档：

介绍

问题

原生应用在我们的日常生活中很流行，但它们可以在很多层面上得到改进。

Web是一个避免这些问题的理想平台，但迄今为止它还不够完美。

什么是小程序？

小程序是一种新的移动应用程序格式，它是一种依赖于 Web 技术（尤其是 CSS 和）的混合解决方案，但也集成了原生应用程序功能。

小程序受到一些超级应用的欢迎，因为它的一些功能有助于填补Web与原生平台之间的空白。

我们不能简单地使用 PWA 吗？

小程序并非旨在取代 PWA、Web 或原生应用程序。

主机环境

案例分析

案例一：共享单车

小程序的流行使得共享单车成为一种无缝服务，无需繁琐的应用程序。

小程序共享单车服务

对于用户来说，小程序的便捷性体现在以下几个方面：

案例二：AR动物园

小程序开发者只需要使用HTML/CSS/作为编程语言，但小程序比传统应用程序更加灵活，因此团队可以在日常开发过程中快速开发复杂的功能。

这款小程序利用AI技术来识别这些动物，构建了一个AR动物园。开发者可以通过添加一些组件或API来轻松实现这一需求，这些组件或API提供了对原生功能或高级功能的访问，例如图像识别、AR 3D动物模型渲染、语音合成的语音API、地图SDK提供的AR导航等。

小程序可以通过搜索引擎、主应用中的小程序商店、二维码获取。

AR动物园小程序

对于开发者来说，小程序的好处是显而易见的。

案例三：物联网小程序

小程序的目标之一是连接不同平台的信息和服务，使其成为智能汽车、语音控制扬声器和智能电视等物联网应用的理想选择。

小程序适配车载屏幕和系统是可行的，为此，一些小程序供应商已经建立了专门针对车载系统的小程序平台，帮助在多种车型上分发和升级应用程序。这使得数百万的Web开发者能够进入汽车应用生态系统。

这些车载小程序可以服务于很多用户场景，包括加油、洗车、电子收费、保险、餐厅预订或娱乐。例如，当系统检测到剩余油量低于20%时，可以向车主推荐加油小程序，用户可以获取最近的加油站信息并前往加油，包括支付流程都在小程序中完成，实现“不下车加油”。

智能汽车小程序（加油应用）

小程序概览

核心功能如下：

将视图层与逻辑层分离

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

小程序的总体结构

视图层负责小程序页面的渲染，包括 Web 组件和原生组件渲染，可以看作是混合渲染。比如 Web 组件渲染可以用 来处理，但有些 Web 组件渲染不支持或者性能受限；小程序中还会依赖一些原生组件，比如地图、视频等。

逻辑层用JS实现，负责小程序的事件处理、API调用、生命周期管理。

扩展程序的原生函数通常来自于宿主机原生应用或者操作系统，这些函数包括支付、文件处理、扫描、打电话等，它们通过一定的API进行调用。小程序在调用原生API时，会通过JS将API调用传递给扩展程序的原生函数进行进一步处理，并通过JS从扩展程序的原生函数中获取结果。

小程序调用API时的数据流程

对于每个建立的连接，需要呈现的数据都会被传输以进行进一步处理。

如果该事件是由小程序页面中的组件触发的，那么事件会被发送到该页面进行进一步处理，同时等待发送的数据重新渲染小程序页面。

渲染过程可以认为是无状态的，所有的状态都会存储在 中。

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

丰富的 API 和组件

小程序平台提供了众多组件帮助开发者构建精美的UI，包括View、Form等基础组件，以及Maps等高级组件。

小程序厂商还为开发者提供了许多API来访问Web和原生功能；这些API既包括UI显示API、图片API等基础选项，也包括账户API、地图API、支付API等高级选项。

API通常和组件配合使用，当用户点击小程序页面的组件时，会调用相关API完成用户的交互，必要时还会刷新当前小程序页面。

小程序建设

为了实现与原生应用类似的用户体验，小程序资源通常会打包在一起。下载并安装小程序包后，显示应用页面所需的所有静态页面模板/CSS/文件已在用户设备上准备就绪。这些资源在下次更新前始终可用，无需额外下载。

小程序是压缩格式（例如 zip）的档案，其中包含：

包含处理应用程序级生命周期回调的代码的应用程序级逻辑文件。

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

支持数字签名验证。

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

小程序插件

小程序除了呈现为小程序页面外，还可以以信息片段的形式呈现，即小程序小部件。在此形式下，开发者可以将其服务和/或内容放入各种宿主场景（称为宿主环境），内容可以是助手、搜索页面等。此功能将小程序的服务与场景关联起来，为用户提供更多便利。

例如，当用户购买火车票时，智能助手上的小程序插件会立即展示火车的最新状态，用户点击后可以跳转到全屏小程序页面查看更多详情。

从主屏幕到小程序的小部件

与小程序页面一样， 也是通过 URI 来描述的，宿主环境通过 URI 路径指定要加载的小程序包和对应的 ，并通过 URI 查询参数将数据传递给 ， 加载后会在宿主环境中进行显示和渲染。宿主和 的数据，以及其他 的数据都是隔离的，保证了安全性和独立性。

很多情况下，一个插件可以打开一个小程序页面，进行一些比较复杂的操作，这种情况下插件通常需要和对应的小程序共享数据，比如保持一致的登录状态，因此插件和小程序的数据是可以互通的，也就是说小程序插件和页面拥有相同的数据访问权限。

小程序插件交互

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

单实例，多入口点

小程序的发现、打开、访问入口有很多，与很多网页应用不同，同一个小程序只会创建一个实例，因此小程序的状态和数据是全局一致的。比如用户通过二维码入口首次打开并登录小程序后，从小程序商店等其他入口返回应用时，用户仍保持登录状态。

小程序入口包括但不限于：

性能和用户体验

小程序试图通过一些被实践证明有效的机制来提升其性能和用户体验。

盒

使用小程序构建器，用户首次打开小程序时只需下载软件包，无需再次下载小程序内的静态资源（//CSS），这样加载和跳转页面会更快，该功能可以提升用户操作体验，节省网络流量。

同时，小程序具有预下载机制，可以提前下载小程序软件包，或者单独预加载首页，并在下载过程中并行进行流解压，最大限度缩短小程序启动阶段和时间消耗，提高首次打开首页的性能。

多种渲染环境

小程序在渲染环境间采用原生页面栈管理，页面切换由原生代码驱动，因此页面内手势操作、页面间切换均可获得与原生应用同样流畅的体验。

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

预构建且可重复使用的运行时环境

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

预定义组件和 API

小程序平台提供了非常丰富的组件和API，大部分都设计精良，可以帮助开发者保证工作效率。

框架预设和热更新

小程序的运行环境由两部分组成：一部分是原生代码提供的基础功能，另一部分是框架，包括开发者的API和实现的一些组件。框架内置于原生应用中，在小程序执行前会提前加载到小程序运行环境中。框架可以热更新（使用过程中重新加载），这带来了很大的性能提升潜力。

小程序概览

本部分介绍一些目前主流的小程序或者相关平台。

支付宝小程序

支付宝小程序运行在支付宝原生应用之上，是Web与原生混合的解决方案，支付宝小程序依托CSS、JS等Web技术，同时集成了支付、信用服务、人脸认证​​等支付宝原生应用的功能。

目前，支付宝原生APP上运行的小程序已超过100万个，DAU（日活跃用户）达2.3亿，用户场景涵盖零售、交通、医疗等。

百度智能小程序

百度智能小程序是指基于百度应用及其他合作伙伴平台，将人与信息和服务智能连接的开放生态产品。通过百度的AI能力和对智能小程序内容的理解，我们可以将智能小程序与用户精准对接。借助百度的搜索和信息流双引擎，用户可以在智能小程序中获得类似APP的体验。截至2019年7月，我们拥有超过15万个智能小程序，月活跃用户数达2.7亿。

百度智能小程序在我们的开源联盟内开源，该联盟拥有30多个合作伙伴，涵盖超级应用、移动操作系统、车载操作系统、语音控制扬声器和电视。

快应用（包括小米、华为等快应用联盟）

快应用是快应用联盟12家头部手机厂商共同开发的小程序标准，覆盖超过2亿MAU，开发者一次开发即可运行在所有硬件厂商平台上。快应用深度集成在操作系统中，在手机系统众多应用场景中一键即可访问。快应用引入原生渲染路径，有效融合前端开发与原生性能体验。

快应用可以以两种形式运行：类似于原生应用页面的快应用页面，以及用于场景化展示信息的插件，满足不同的用户需求，以多种形式将系统与小程序连接成一个整体。

小程序

PC端小程序尚处于早期探索阶段，小程序是运行在PC浏览器上的轻量级应用，相比传统网页，功能更加丰富，更易于与PC操作系统交互。

PC小程序仅对经过验证的企业账号开放，且大部分功能受到严格限制，因此可视为高度可信的网络内容。

渐进式网页

PWA 是现代 Web 应用的最新统称。作为原生应用的对应物，PWA 应用的外观和行为与原生应用类似，可以安装到主屏幕 / 启动器 / 开始菜单；可以发送推送通知以重新吸引用户注意力；可以离线使用或在网络状况不佳的情况下运行；支持功能广泛的设备，并且仍在不断发展以利用开放 Web 标准定义的新功能；用户可以在 PWA 应用内进行支付；PWA 应用对搜索引擎友好，可以完美地与超链接配合使用。PWA 在技术和业务层面都取得了成功（被许多网站广泛采用，尤其是面向消费者的网站）。

与网络合作

本节选取一些典型用例，并提出了一些使小程序获得Web支持的API提案。

应用程序生命周期

混合渲染

小程序是 Web 渲染和 渲染的混合方案，如果能有一个好的方法把 Web 和 渲染的结果结合起来就好了。

从 Web 和本地渲染结果

提案：小程序需要标准化的API，帮助将原生的渲染结果融入到Web渲染结果中。

过渡动画

小程序希望在页面切换时提供转场动画，让用户得到和使用原生应用类似的体验，但现在几乎不可能实现。

建议：小程序需要一个API调用来添加页面切换时的过渡动画。

标准化小程序构建包

小程序可以采用标准化的分发格式，为多个小程序宿主平台制定统一的封装解析约定。目前各个小程序宿主平台提供的开发工具不同（封装方式不同），不同宿主环境下的解析方式也不同。

提案：小程序其实就是分发过程中用到的一些文件的打包（压缩）集合，我们可以用统一的文件后缀（.ma）来描述小程序，并规定如何创建和解析.ma文件。

规范小程序页面跳转流程

可以在一个小程序中引用另一个小程序的热门页面，并在用户访问时准确地引用它。

建议：定义一组标准化协议（URI）来访问小程序。

小程序插件

与小部件或小程序一样，小部件允许用户直接获取信息和/或完成任务，而无需打开任何网页或应用程序页面。小部件可以显示在网页浏览器以外的环境中，例如桌面或 。

提议：

性能和调优

在小程序中定义时间事件进行交互

小程序需要知道小程序页面的交互时间（TTI）什么时候完成。

提案：一个标准化的事件，通知小程序页面交互时间已经结束。

图形和媒体

模型元素

细节丰富的 3D 模型越来越受欢迎，与 AR 结合，将提供比 2D 更好的用户体验。其业务案例可能涉及在线购物、广告、教育等。然而，目前的 Web 平台缺乏标准且便捷的方法来处理 3D 模型。在本文档中，我们建议定义一个 HTML 标签来直接处理 3D 模型，类似于我们使用相应的 HTML 标签处理音频、视频和图像的方式：

用户可以使用手势从不同角度查看 3D 模型。3D 模型还可以放大/缩小。它可以全屏查看或嵌入 HTML 页面并与其他 HTML 内容一起显示。

用户可以使用相机将 3D 模型放置在现实世界环境中。用户可以指定不同的位置来放置模型。

提案：在网络上指定 3D 模型并使用 AR 为交互式 3D 内容提供支持的元素。

面部追踪

脸部追踪可用于许多 3D 场景。

实时视频中的面部效果

为实时视频添加面部效果。这些效果包括全屏滤镜、面部重塑和化妆、2D 贴纸、3D 头饰等。大多数这些效果都严重依赖于视频源的实时面部跟踪。

游戏

游戏开发者可以根据跟踪的面部数据设计游戏策略，例如眨眼时触发特定的游戏逻辑，或检查水果是否落入嘴里。

虚拟化妆

让用户在产品页面上试用口红、眼影、眼镜和帽子，以帮助他们做出决定。

提案：一种面部追踪 API，以视频元素作为输入，并在每一帧更新面部追踪输出，包括：

手势跟踪和识别

手势可用于视频效果和 AR/VR 游戏场景，使应用程序更具互动性和吸引力。

提案：用于跟踪手部运动和获取手部轮廓的高级 API。

底层 AR API 基于

我们会将小程序中的部分 AR API 迁移到网页端，因为它们有助于在游戏、3D 模型预览和互动广告中提供更好的 AR 体验。

提案：提供基于和的低级AR API，包括：

用于世界追踪的相机视图矩阵

4x4 视图矩阵提供手机的空间位置和方向，开发人员可以使用它来实时更新其 3D 虚拟世界中的相机矩阵。这使得现实世界的位置与虚拟世界中物体的位置相关联。

平面检测与跟踪

实时检测和跟踪现实世界中的平面。提供 4x4 变换矩阵，表示每个平面的中心位置和方向。使用它将 3D 虚拟对象放置在地面/桌面上。

锚点

锚点定义了现实世界中固定的位置和方向。开发者可以从 4x4 变换矩阵创建锚点，该矩阵可以通过命中测试获得。此矩阵将在每一帧中更新，以确保与矩阵对应的虚拟对象可以在现实场景中固定在某个位置和方向上。

命中测试

获取一个表示屏幕位置对应的真实世界空间中的位置和姿态的4x4的变换矩阵，实现点击、放置虚拟物体等功能。

更好地支持 AR API

安全和隐私注意事项