1.词汇表
MOP : MiniProgram Open Platform 小程序开放平台
Native:原生
Sandbox:沙箱
- 系统架构 凡泰小程序借鉴目前主流微信小程序、支付宝小程序等互联网成熟的小程序平台。
总体架构包括:
SDK - 通用SDK开发包,提供给第三方合作App(“宿主”)进行打包 为应用提供安全沙箱机制,保证嵌入应用的安全性 兼容微信小程序和一般H5应用 小程序 - 行业应用以小程序的形式发布到行业小程序应用中心 (应用商店的模式) 持牌机构开发的计划嵌入到第三方App中的业务应用采用微信小程序的形式发布 小程序与相应的业务后端系统协同完成特定的服务 服务中心 - 成立行业应用服务中心 SDK开发/维护/升级/安全 运营行业小程序应用中心 第三方App应用证书签发管理 持牌机构小程序证书管理 为监管机构提供统计数据
以上是凡泰小程序架构的示意图,最上面是主要的4个场景入口,开发者可以根据自己的业务场景运营这些场景入口,把这些入口的流量充分利用起来。中间框内的是小程序的核心引擎,上面是对开发者提供的基础组件和基础 API 能力,开发者根据这些组件和 API 来开发自己的小程序,满足用户的需求。
小程序前端框架这块借鉴了主流前端框架Vue的设计思路,从小程序的应用形态,提供了简洁的编程模型,定义了一套组件和 API 接口的规范,降低了学习门槛,方便开发者快速开发小程序。在小程序框架内部提供了小程序的生命周期管理,通过事件的方式把小程序每个阶段都注入到小程序里面,开发者可以通过这些事件来处理小程序每个阶段需要完成的业务逻辑。同时框架内部使用了虚拟 DOM 来处理页面的每次更新,提升了页面的渲染性能。
前端框架下面是小程序Native引擎,包括了小程序容器、渲染引擎和 JavaScript引擎,这块主要是把客户端 Native 的能力和前端框架结合起来,给开发者提供系统底层能力的接口。在渲染引擎上面,凡泰小程序不仅提供 JavaScript + WebView 的方式,还提供 JavaScript + Native 的方式,在对性能要求较高的场景,可以选择 Native 的渲染模式,给用户更好的体验。
示意图左边和右边分别是面对开发者提供的研发支撑和运维支撑服务,可以帮助开发者更有效率的开发小程序,在上线后也提供众多的工具帮助开发者管理和运营线上的小程序。
2.1 运行时架构 小程序编程模型是分为多个页面,每个页面有自己的 template、CSS 和 JS,实际在运行的时候,业务逻辑的 JS 代码是运行在独立的 JavaScript 引擎中,每个页面的 template 和 CSS 是运行在各自独立的 WebView 里面,页面之间是通过函数 NavigateTo 进行页面的切换。
每个 WebView 里面的页面和公共的 JavaScript 引擎里面的逻辑的交互方式是通过消息服务,页面的一些事件都会通过这个消息通道传给 JavaScript 引擎运行环境,这个运行环境会响应这个事件,做一些 API 调用,可调到客户端凡泰小程序提供的一些能力,处理之后会把这个数据再重新发送给对应的页面渲染容器来处理,把数据和模板结合在一起来,在产生最终的用户界面。
2.2分离视图层与逻辑层 在小程序中,视图层通常与逻辑层分离
视图层负责渲染小程序页面,包括 Web 组件和原生组件渲染,可以将其视为混合渲染。例如,Web 组件渲染可以由 WebView 处理,但 WebView 不支持某些 Web 组件渲染,或者是性能受限;小程序还依赖于某些原生组件,例如地图、视频等。
逻辑层是用 JS Worker 实现的。Worker 负责小程序的事件处理、API 调用和生命周期管理。
Worker 为每个 Render 建立连接,传输需要渲染的数据以进一步处理。
如果事件由小程序页面中的组件触发,则此页面的 Render 将向 Worker 发送事件以进一步处理。同时,Render 将等待 Worker 发送的数据来重新渲染小程序页面。
渲染过程可被视为无状态,并且所有状态都将存储在 Worker 中。
视图层和逻辑层分离有很多好处:
方便多个小程序页面之间的数据共享和交互。
在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验。
Render 和 JS worker 的分离和并行实现可以防止 JS 执行影响或减慢页面渲染,这有助于提高渲染性能。
2.3丰富的 API 和组件 小程序平台提供了许多组件来帮助开发人员构建精美的 UI,包括 View、Form、Image 等基本组件以及 Maps 等高级组件。
小程序供应商还为开发人员提供了许多 API,以便访问 Web 和原生功能;这些 API 既有 UI 显示 API 和图像 API 这样的基础选项,也有账户 API、地图 API、支付 API 等高级选项。
API 通常与组件一起使用。当用户单击小程序页面上的某个组件时,它将调用相关的 API 来完成用户的交互,并在需要时刷新当前的小程序页面。
2.4小程序构造 为了获得与原生应用程序相似的用户体验,小程序资源通常打包在一起。下载并安装小程序软件包后,用来显示应用程序页面所需的所有静态页面模板 /CSS/JavaScript 文件都已经在用户的设备上就绪了。在下次更新之前,这些资源始终可用,无需任何额外下载内容。
小程序包是压缩格式(例如 zip)存档,包括:
l 一个配置文档,位于包的根目录下。配置文件应包括:
l 整个小程序的概述。
l 页面描述及其对应路径,用于页面定位和开启。
l 一个包含 JavaScript 代码的应用级逻辑文件,处理应用级生命周期回调。
l 一个或多个页面文件,包含页面结构的模板代码、页面样式的 CSS 代码和页面逻辑的 JavaScript 代码。
l 支持数字签名验证。
为了在搜索和执行时定位特定的小程序,小程序必须在平台上具有包名或 ID。还需要一个小程序图标帮助用户识别。
2.5打包 使用小程序的构造器,用户只需在首次打开小程序时下载软件包即可,之后无需再次下载小程序中的静态资源(页面 /JavaScript/CSS),这样加载和跳转页面就会更快。此功能可改善用户操作体验并节省网络流量。
同时,小程序有一个预下载机制,可以提前下载小程序软件包,或者单独预载第一页,并在下载过程中并行执行流解压,以最大限度地减少小程序启动阶段和耗时,提升初次打开首页的性能表现。
2.6多重渲染环境 小程序在渲染环境之间使用原生页面堆栈管理,页面切换由原生代码驱动。因此,在页面中的手势操作和页面之间的切换可以实现与原生应用完全相同的流畅体验。
由于视图层和逻辑层的隔离,视图层可以独立渲染。不受 JavaScript 逻辑代码的阻碍,可以大大提高页面的渲染速度。
2.7预构建和复用运行时环境 小程序的运行时环境通常在启动应用程序之前预先构建,从而缩短了启动时间。预构建的内容包括渲染环境、静态资源、开发人员定义的预取请求和小程序运行时容器。小程序激活后,它将接管预构建的渲染环境,然后我们继续为缓存池预构建新的渲染环境以备下一次使用。渲染环境数量有一个限制,当任何渲染环境关闭或超出数量限制时,最早打开的渲染环境将被销毁。当小程序退出时其运行时将被销毁,而应用程序环境和资源可以复用。
2.8 JavaScript 框架预设和热更新 小程序的运行时环境包含两大部分,其一是原生代码提供的基本功能,其二是一个框架,包括开发人员 API 和一些由 JavaScript 实现的组件。JavaScript 框架内置于原生应用程序中,并将在执行小程序之前提前加载到小程序运行时环境中。JavaScript 框架可以热更新(在使用期间重新加载),带来了很多性能提升的潜力。
2.9 安全沙箱 沙箱是一种安全机制,为运行中的程序提供的隔离环境。通常是作为一些来源不可信、具破坏力或无法判定程序意图的程序提供实验之用。
基于虚拟化的沙箱基于虚拟化的沙箱为不可信资源构建封闭的运行环境,在保证不可信资源原有功能的同时提供安全防护。根据虚拟化层次的不同,基于虚拟化的沙箱可分为两类,即系统级别的沙箱和容器级别的沙箱
容器级别的沙箱与基于硬件层虚拟化的系统级别沙箱相比,采用了更为轻量级的虚拟化技术,在操作系统和应用程序之间增加虚拟化层,实现用户空间资源的虚拟化,但在资源使用效率和资源管理上占有较大的优势。
3.集中式监管 随着小程序生态的不断壮大,合作伙伴的数量也在急剧增加,如何对生态伙伴提供的服务形成有效的管控,如何对小程序的质量进行保障,这是我们面临的新挑战。面对这个问题,我们在制定相应技术标准和运营规范的同时,对小程序从入驻到运营,从质量、体验、安全、合规、效能等维度建设了平台化的质量与风险管控能力。
巡检是开发者生态质量与风险保障重要的一环,是识别问题的重要手段。小程序为开发者提供的服务场景非常丰富而且复杂,为解决这一系列问题,我们通过自建识别引擎,并整合多项基础检测单元的服务能力,以“技术 + 一体化 + 平台化”的方式,建设主动巡检(稽查)的能力,即巡检平台。