本文介绍了微信小程序的相关问题，主要介绍了基础设施原理，包括宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等，希望对您有所帮助。

【相关学习推荐:小程序学习教程】

下图为微信小程序的整体架构图：

让我们简要谈谈微信小程序的发展历史。只有了解自己和敌人，我们才能赢得一百场战斗。微信小程序简称小程序。2017年1月9日，张小龙在微信公开课上宣布正式上线。小程序的英文名称 Mini Program，这是一个无需下载安装即可使用的应用程序，它实现了应用程序“触手可及”的梦想，用户可以通过扫描或搜索来打开应用程序。

自推出以来，小程序一直被称为便携版 APP，两者的区别无非是小程序相对轻便，开发成本低，开发周期短，效果快。

小程序不是一个凭空冒出来的概念，当微信出现时 WebView 逐渐成为移动 Web 微信是一个重要的入口，有相关的 JS API 了。

WebView 是移动终端(手机，IPad）提供的运行 JavaScript 系统渲染是环境 Web 网页的控件可以与页面一起使用 JavaScript 交互，实现 APP 与 Web 混合开发，WebView 渲染 Web 页面需要强大的渲染核心支持，这其中 Android 与 IOS 系统的核心是不同的。

据了解，小程序诞生的背景主要驱动力是移动网页在微信上传播体验差，能力弱。当然，我认为也有出身 APP 缺点原因的推动，比如每次都要从 App Store 或者在其他应用市场下载，即使下载，也会占用很大的系统空间，如果不经常使用，也很有可能被用户删除。

先抛开本地APP的问题，即使微信团队后来推出了移动网页在微信上传播体验差、能力弱的问题 JS-SDK 解决移动网页能力不足的问题，但是 JS-SDK 该模式并没有解决使用移动网页时遇到的不良体验问题。原因可以概括为三点：白屏问题、页面切换僵硬和点击迟缓。

为了解决这些问题，微信团队面临的问题是如何设计一个更好的系统，让所有开发者都能在微信上获得更好的体验。这个问题是以前的 JS-SDK 不能处理的需要一个新的系统来完成，它需要所有的开发人员都能做到：

• 快速加载。

• 能力更强。

• 本地体验。

• 开放易用、安全的微信数据。

• 开发高效简单。

这就是小程序的起源。文档

微信小程序的宿主环境是微信客户端，它依赖于微信客户端的运行，并与小程序一起运行 基础库 版本有很大的相关性。

我们可以把 微信客户端 以及 小程序基础库 宿主环境简称微信小程序。

微信applet可以调用宿主环境提供的微信客户端的能力，完成许多普通网页无法完成的功能，使applet比普通网页具有更多的能力。小程序将在不同版本（不同的微信客户端）运行 由于宿主环境不同，对于不同版本的宿主环境进行程序兼容也是不可避免的。

小程序的主要开发语言是 Javascript，它类似于传统的网页开发，但仍有一定的区别：

• 网页开发、渲染线程和脚本相互排斥，这就是为什么长时间的脚本操作可能会导致页面失去响应的原因。本质是我们常说的 JS 是单线程。

• 视图层与逻辑层分开，双线程同时运行，使用视图层界面 WebView 渲染时，逻辑层运行 JSCore 中。

• 网页开发主要面向各厂商的浏览器，移动终端也需要面对 Safari、Chrome 以及 iOS、Android 各种系统 WebView。

• 小程序主要面向IOS和Android两个操作系统的微信客户端，以及开发工具和PC端（window）、Mac。开发时需要注意的是微信客户端的版本号和appletAPI 支持基本库版本号。

在各种平台上运行微信小程序：iOS（iPhone/iPad）微信客户端，Android 微信客户端，PC 微信客户端，Mac 用于调试的微信客户端和微信开发者工具。

不同的平台脚本执行环境和用于渲染非原始组件的环境是不同的。具体区别如下：

通过以上内容，您应该对小程序的诞生和环境有一个大致的了解，下面我们就来谈谈小程序的整体设计框架。

整个小程序系统框架分为两部分：视图层(WebView) 和 逻辑层(App Service)，这两部分由两个独立的线程管理。

• 视图层：又称渲染层，渲染层主要用于渲染页面结构 WebView 渲染，一个小程序可以有多个界面，所以渲染层可能有多个界面 WebView 线程。

• 逻辑层：采用逻辑层 JSCore 线程运行 JS 脚本。逻辑层主要用于逻辑处理、数据请求、接口调用等。

视图层与逻辑层之间的沟通需要借助 系统层(WeixinJsBridage) 通信时，逻辑层将数据变化通知视图层，触发视图层页面更新，视图层将触发事件通知逻辑层进行业务逻辑处理。

页面渲染的一般过程是：我们将编译项目 WXML 转化为对应的 JS 对象（Virtual DOM），当逻辑层发生数据变化时，我们将通过 setData() 该方法将数据从逻辑层传输到视图层。接收到数据后，视图层将对差异进行内部比较，并将差异应用于原始 Dom 树上，再次正确渲染 UI 完成页面渲染过程的界面。

通过以上分析，你能理解开头放置的架构图吗？

上述分析还提到了一个 系统层(WeixinJsBridage)，一般简称为 JSBridge，它在中间桥梁中起着非常重要的作用。它不仅可以通信视图层和逻辑层两个单独的线程，还可以架起上层开发和系统底层功能（Native）通过调用桥梁，可以调用小程序 API 采用原生功能，部分组件采用原生组件实现，体验良好。

逻辑层还有一个重要的操作，通过发送网络请求，它也是通过 系统层 转发的。

说到这里，希望大家对小程序的整体结构有一定的了解，下面我们就来谈谈小程序内部的一些机制。

小程序启动运行有两种情况:

• 冷启动(重新开始)：当用户首次打开或小程序被微信主动销毁后再次打开时，此时小程序需要重新加载启动，即冷启动。

• 热启动：用户已经打开了小程序，然后在一段时间内再次打开小程序。此时，无需重新启动，只需将后台状态的小程序切换到前台，即热启动。

需要注意：

1.小程序没有重启的概念。

2.小程序进入后台时，客户端会保持一段时间的运行状态，超过一段时间后会被微信主动销毁。

3.在短时间内收到系统两次以上的内存警告，也会销毁小程序，这就是页面内存一旦溢出，页面就会崩溃的根本原因。

小程序 冷启动 如果发现新版本，将异步下载新版本的包，同时启动客户端本地旧包，直到下一次冷启动。如果您需要立即使用最新版本，您可以使用它 wx.getUpdateManager API 进行处理。

const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
  // 请求回调新版本的信息
  console.log(res.hasUpdate)
})
updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好重启应用程序了吗？',
    success(res) {
      if (res.confirm) {
        // 下载了新版本，调用 applyUpdate 并重启新版本的应用
        updateManager.applyUpdate()
      }
    }
  })
})
updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})

正如我们之前所说，小程序是基于双线程的，这意味着视图层和逻辑层之间的任何数据传输都是线程之间的通信，也就是说，会有一定的延迟。与传统的网络不同，当页面需要更新时，可以通过调用相关的API同步渲染。在小程序架构中，所有这些都变成了异步操作。

异步会使各部分的运行时间更加复杂。例如，在渲染第一个屏幕时，逻辑层和渲染层将同时开始初始化工作，但渲染层需要逻辑层的数据来渲染界面。如果渲染层的初始化工作很快完成，则需要等待逻辑层的指令才能进行下一步工作。因此，逻辑层和渲染层需要有一定的机制来确保正确的时间顺序。在每个小程序页面的生命周期中，都有几个页面数据通信。

在了解了视图层和逻辑层的具体通信过程后，我们也对视图层和逻辑层的数据传输有了一点了解。我们知道这两种通信是在系统层的帮助下进行的，实际上是通过双方提供的 evaluateJavascript 所实现的。也就是说，用户传输的数据需要以字符串的形式转换，并将转换后的数据内容拼接成一部分 JS 脚本，然后通过执行 JS 脚本的形式传递到两侧的独立环境。

关于evaluateJavascriptiptte：

Native 调用 JS， 一般是直接的 JS 代码字符串有点像我们调用的 JS 中的 eval 执行一系列代码。它通常有 loadUrl、evaluateJavascript 等几种方法。

这里不要做太多的介绍，你只需要记住，它是用来调用执行的 JS 字符串，是一种 Native 用来识别 JS 代码的方式就够了。

做过小程序的铁汁应该熟悉这张图:

图中的过程主要是为了获得唯一的微信用户 openid 与 session_key，之后，开发者服务器可以根据用户标识生成自定义登录态，在后续业务逻辑中识别前后端交互时识别用户身份。

• 调用 wx.login() 获取临时登录凭证 code，并返回开发人员服务器。

• 调用 auth.code2Session 接口换取用户唯一的标识 openid 、用户在微信开放平台账号下的唯一标识 UnionID(如果当前小程序已绑定到微信开放平台账号)和会话密钥 session_key。

UnionID 它是微信不久前新增的一种性质，其获取方式和 openid 几乎，功能也差不多，都是指用户唯一的标识，但它的范围稍微广一点。

官方解释:如果开发者有多个移动应用程序、网站应用程序和公共账户(包括小程序)，可以通过 UnionID 区分用户的独特性，因为它是移动应用程序、网站应用程序和公共账户（包括小程序）在同一个微信开放平台账户下，用户 UnionID 是唯一的。换句话说，UnionID在同一个微信开放平台下的不同应用是相同的。

不懂？说白了，就是绑定小程序。 微信开放平台账号 之后，您可以与其他绑定在该帐户下的移动应用程序、网站应用程序和官方帐户连接。例如，同一用户在PC端的扫描登录、微信公众号开发的页面授权登录、微信小程序授权登录等场景可以识别为同一用户并获得 UnionID 相同的。 传送门

通过对小程序架构原理的研究，我们将从底层架构的角度简要分析小程序的常见性能问题是如何产生的。

经常调用setdata()

频繁调用 setData()，我相信这个问题已经很常见了，比如在定时器中呼叫，在监控页面滚动的钩中呼叫，这些场景很容易导致小程序的性能问题，页面卡住，页面数据更新不及时。

前面在 数据通信机制 正如我们所说，小程序是基于双线程的，这意味着视图层和逻辑层之间的任何数据传输都是线程之间的通信，并且经常被调用 setData()，会使线程一直处于忙碌状态，逻辑层通知视图层需要时间才能上升。当视图层收到信息时，距离发出的时间可能超过一定时间，渲染页面不够及时。

调用setdata()的庞大数据量

还在前面 数据通信机制 正如我们所说，传输的数据需要以字符串的形式转换为传输，并通过 JS 以脚本的形式执行，当数据量较大时，执行脚本的编译执行时间也会增加，占用线程。

页面复杂多样的DOM结构

当一个页面 DOM 当结构复杂且非常多时，必然会导致页面显示不及时、页面卡住，甚至页面崩溃。可以想象，原因太多了 DOM 绘制和计算需要时间，这将导致线程过渡工作，增加客户端内存占用，从而触发系统回收小程序页面。

我上面提到的，是的 “逻辑层在运行 JSCore 中” 这句话有点问题，因为我看到表中列出的逻辑层运行环境应该根据系统环境来区分。这句话太笼统了吗？或者这句话是指 IOS 情况如何？因为是官方文档写的，所以我没有直接否决是写错了，或者只是指IOS 的情况。

经过核实，证明这句话没有问题。为了追求结果，我们需要写下浏览器的一般情况：

浏览器的核心部分是浏览器的核心，每个浏览器都有自己的核心，而对移动领域影响最大的是 WebKit。

WebKit 是页面渲染和逻辑处理引擎，HTML/CSS/JavaScript 处理后，成为可见可操作的Web页面。

WebKit 整体结构由多个重要模块组成，如下图所示：

WebKit 由四部分组成，分别是：

• WebKit Embedding API：负责浏览器 UI 与 WebKit 交互部分。

• Platform API（WebKit Ports）：让 Webkit 移植到各种操作系统和平台上更方便，并提供一些调用Native Library接口。

• WebCore：整个 WebKit 渲染引擎的核心。

• JavascriptCore：JSCore 是 WebKit 苹果默认使用嵌入式JS引擎 C 开发。

让我们关注一下 JSCore 部分，JSCore 是 WebKit JS引擎默认嵌入的原因是默认嵌入的，因为很多都是基于 WebKit 分支开发的浏览器引擎都开发了自己的JS引擎，其中最著名的是 V8Chrome 引擎。

V8 引擎，我相信前端的朋友不应该很奇怪，因为它是基于 WebKit 底部默认情况下也嵌入了 JSCore 的，而 Android 逻辑层是运行的 V8 上的。

而 IOS 浏览器引擎是 WebKit，内部则就是 JSCore。

最后 开发工具 逻辑层在运行 NW.js, 在它的官网上，你看到了什么段落:

我相信它也应该和?WebKit?扯上关系。

【相关学习推荐:小程序学习教程】

以上是微信小程序架构原理的详细内容，请关注其他相关文章！