从 Electron 的困境说起

作为一名长期奋战在前端开发一线的博主，我和大家一样，对各种开发技术都有着强烈的探索欲望和实践热情。在独立 EXE 程序开发的道路上，我也曾是 Electron 的忠实拥趸。Electron，这个将 Node.js 和 Chromium 巧妙结合的框架，确实为我们带来了诸多便利。它让前端开发者能够凭借熟悉的 Web 技术栈，如 HTML、CSS 和 JavaScript，轻松构建出跨平台的桌面应用程序 ，实现 “一次编写，随处运行” 的美好愿景，大大降低了桌面应用开发的门槛。

但随着项目的推进和深入使用，我逐渐发现了 Electron 隐藏的一些 “痛点”。其中最让人头疼的就是它那庞大的体积。每一个 Electron 应用都像是一个 “巨无霸”，捆绑着自己的 Chromium 实例，这使得哪怕是一个简单的 “Hello, world” 程序，打包后的体积也可能轻松超过 100MB。在如今这个追求极致性能和用户体验的时代，这样的体积无疑是一个沉重的负担，不仅会占用大量的磁盘空间，还会导致应用启动速度变慢，给用户带来不佳的使用体验。

除了体积问题，升级与分发也成了困扰我的难题。由于每个 Electron 应用都自带 Chromium，当有新版本发布时，整个应用都需要重新下载和安装，这对于用户来说是一个繁琐的过程，也增加了应用分发的成本和难度。而且在实际开发中，我还遇到了 Electron 嵌入其他窗口界面不方便的问题，与其他语言、技术融合时也存在诸多障碍，这在一定程度上限制了它的应用场景。

另外，对于一些只在 Windows 平台运行，并且需要大量与专用系统 API 交互的软件来说，Electron 强大的跨平台特性反而成了一种不必要的负担，徒增了开发和维护的成本 。我曾经在一个项目中，花费了大量的时间和精力去优化 Electron 应用的体积和性能，但效果却不尽如人意，这让我开始重新审视这个曾经信赖的框架。

WebView2 闪亮登场

在我为 Electron 的种种问题而苦恼时，WebView2 就像一道曙光，照亮了我在独立 EXE 程序开发道路上前行的方向。WebView2 是微软推出的一组强大的控件，它允许开发者在原生应用程序中轻松嵌入 Web 技术，如 HTML、CSS 和 JavaScript ，这一点和 Electron 有着相似之处，但 WebView2 的优势却十分显著。

WebView2 基于性能强悍的 Edge（Chromium）内核，这意味着它拥有和 Chrome 浏览器一样强大的渲染能力和对现代 Web 标准的良好支持。相比之下，Electron 虽然也是基于 Chromium 内核，但由于其版本更新相对滞后，在一些新特性和性能优化上可能会稍逊一筹。而且，WebView2 调用生成的软件体积非常小，因为所有基于 WebView2 的软件可以共享同一个 WebView2 组件。在 Windows 11 系统中，已经内置了 WebView2 组件，而在其他 Windows 操作系统上，也可以快速地自动安装 WebView2 ，这大大减少了应用的安装包大小和用户的安装时间，让应用的分发和更新变得更加轻松便捷。

WebView2 的接口设计也非常简洁，这使得它在嵌入其他窗口界面时非常方便，与其他语言、技术的融合也更加顺畅。例如，在一些需要与 C++、C# 等语言结合开发的项目中，WebView2 能够很好地与这些语言进行交互，实现功能的互补和扩展，而 Electron 在这方面则常常会遇到一些兼容性问题。此外，WebView2 对 Windows 系统的兼容性也非常出色，它支持从 Windows 7 到 Windows 11 的多个版本，能够满足不同用户群体的需求。

两者深度大比拼

为了更直观地了解 Electron 和 WebView2 的差异，我们不妨从多个维度对它们进行一番深入的对比分析。

架构与运行机制

从架构层面来看，Electron 和 WebView2 都继承自 Chromium 的多进程架构，采用一个主进程与多个渲染进程的模式，进程间通过 IPC（进程间通信）进行通信 。不过，它们在具体的实现方式上还是存在一些区别。

Electron 应用是一个独立的进程树，每个应用都包含一个根浏览器进程、若干公共进程以及多个渲染进程，并且不与 Chrome 共用任何 DLL 文件，这就导致其打包后的体积较大。而 WebView2 的二进制文件与 Edge 有较强的依赖关系，它们会共享磁盘和一些工作集。使用相同用户目录的 WebView2 应用可以共享除渲染进程以外的进程，这在一定程度上减少了资源的占用 ，使得基于 WebView2 开发的应用在资源利用上更加高效。

功能特性

在功能方面，Electron 提供了丰富的 API，让开发者能够轻松实现菜单创建、文件系统访问、系统通知发送等本地相关功能，这得益于它集成了 Node.js，开发者可以在主进程或者渲染进程中使用 Node.js 提供的 API、模块以及 node-native-addon ，这为前端开发者提供了极大的便利，能够充分发挥前端技术栈的优势。

相比之下，WebView2 仅仅是一个被集成到 WinForms、WPF 等应用框架中的组件，它本身不提供操作系统的本地 API，仅提供标准的 Javascript API。如果使用 WebView2 开发的应用想要访问本地能力，就需要通过 Javascript 和本地代码进行对接来实现 。这虽然在一定程度上增加了开发的复杂性，但也为开发者提供了更多与原生应用融合的可能性，能够充分利用原生系统的强大功能。

性能表现

在性能上，由于 Electron 和 WebView2 都基于 Chromium 内核，所以在渲染页面时，它们的性能差异其实非常小。曾经有开发者专门制作了不同技术组合的 Demo 进行测试，结果显示，无论是在 Electron 还是 WebView2 中渲染页面，性能差异几乎可以忽略不计 。不过，在 IPC 通信方面，两者还是存在一些不同。

在 Chromium 中，浏览器进程充当着渲染器和系统其它部分之间的 IPC 通信代理角色。Electron 支持不开启沙箱模式，但出于安全考虑，很多应用还是会选择使用沙箱机制。WebView2 则无论在任何情况下都会开启沙箱机制 。由于底层 IPC 的实现不同，在 JavaScript 和 C++ 或 C# 之间通信时，最常见的编码方式是 JSON 字符串，而 JSON 的序列化和解析是一个比较耗时的操作，这可能会导致 IPC 通信产生瓶颈，从而降低应用的整体性能。不过，从 Edge93 版本开始，WebView2 采用了 CBOR 技术来在进程间传输数据，有效地提高了通信效率；而在 Electron 中，开发者也可以使用 MessagePorts 技术来避免 JSON 的序列化和解析操作，MessagePorts 底层采用的是结构化克隆技术，同样能够提升 IPC 通信的性能 。

安全机制

安全是应用开发中至关重要的一环。Electron 的安全级别可以在完全访问权限到完全沙箱之间进行配置，这使得开发者可以根据应用的具体需求来灵活调整安全策略，实现一些在浏览器沙箱中无法实现的功能 。然而，这种灵活性也可能带来一定的安全风险，如果配置不当，可能会导致应用存在安全漏洞。

WebView2 的上下文则只能运行在沙箱环境中，这种严格的沙箱机制可以有效地限制应用的访问权限，降低安全风险，为应用提供了一个相对安全的运行环境 。但这也意味着开发者在进行一些涉及系统底层操作时会受到更多的限制，需要通过其他方式来实现相关功能。

实战：WebView2 开发独立 EXE

说了这么多，相信大家已经迫不及待地想要亲自体验一下 WebView2 的魅力了。下面，我将以 aardio 为例，为大家详细展示如何使用 WebView2 和 JavaScript 开发独立 EXE 程序。aardio 是一款简单易学的编程语言，它与 WebView2 的结合，能够让我们更加轻松地创建出功能强大的桌面应用。

准备工作

首先，我们需要确保开发环境已经搭建好。在 aardio 中，WebView2 的使用非常方便，只需要简单的几步操作即可。我们可以在 aardio 的官方网站上下载并安装最新版本的 aardio 开发环境，安装完成后，打开 aardio，新建一个工程。

创建工程

在 aardio 中，创建一个新工程非常简单。点击菜单栏中的 “文件”->“新建工程”，在弹出的对话框中选择 “Windows 窗口程序”，然后为工程命名，比如 “WebView2Demo”，点击 “确定” 即可创建一个新的工程。

添加 WebView2 控件

工程创建完成后，我们需要在窗口中添加 WebView2 控件。在 aardio 的设计界面中，找到 “工具箱”，在 “工具箱” 中找到 “WebView2” 控件，将其拖放到窗口中。此时，我们可以看到窗口中出现了一个 WebView2 控件，我们可以根据自己的需求调整其大小和位置。

编写代码

接下来，就是编写代码的环节了。在 aardio 中，我们可以使用 JavaScript 来编写 WebView2 的相关逻辑。首先，我们需要在窗口的初始化事件中，加载一个本地的 HTML 页面。在 aardio 的代码编辑区中，找到窗口的初始化事件函数，比如 “_启动窗口_创建完毕”，在该函数中添加以下代码：

// 获取WebView2控件
var webView = _启动窗口.WebView21;
// 加载本地HTML页面
webView.Source = "file:///" + aardio.path.join(aardio.appPath,"index.html");

上述代码中，我们首先获取了窗口中的 WebView2 控件，然后使用webView.Source属性来加载本地的index.html页面。这里的aardio.path.join(aardio.appPath,"index.html")表示将index.html文件的路径与当前应用的路径拼接起来，以确保能够正确加载页面。

接下来，我们可以在index.html页面中编写 HTML、CSS 和 JavaScript 代码，来实现我们想要的功能。例如，我们可以在index.html中添加一个简单的按钮，当点击按钮时，在 WebView2 中显示一个提示信息：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>WebView2 Demo</title>
</head>
<body>
<button id="btn">点击我</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
alert('你点击了按钮！');
});
</script>
</body>
</html>

在上述代码中，我们创建了一个简单的 HTML 页面，包含一个按钮和一段 JavaScript 代码。当按钮被点击时，会调用alert函数显示一个提示信息。

与本地代码交互

WebView2 的强大之处不仅在于能够显示 Web 页面，还在于它能够与本地代码进行交互。在 aardio 中，我们可以通过一些方法来实现 JavaScript 与 aardio 代码的双向通信。

例如，我们可以在 JavaScript 中调用 aardio 的函数。首先，在 aardio 中定义一个函数，比如在窗口的代码中添加以下函数：

function showMessage(msg) {
_启动窗口.MsgBox(msg);
}

上述函数接受一个参数msg，并使用_启动窗口.MsgBox方法在窗口中显示一个消息框。

然后，在 JavaScript 中调用这个函数。在index.html的 JavaScript 代码中添加以下内容：

document.getElementById('btn').addEventListener('click', function() {
// 调用aardio的showMessage函数
window.chrome.webview.hostObjects.aardio.showMessage('你点击了按钮，这是从JavaScript传递给aardio的消息！');
});

在上述代码中，我们通过window.chrome.webview.hostObjects.aardio.showMessage来调用 aardio 中定义的showMessage函数，并传递了一个消息。

反过来，我们也可以在 aardio 中调用 JavaScript 的函数。例如，在 aardio 中添加以下代码：

// 调用JavaScript中的函数
webView.ExecuteScriptAsync("document.getElementById('btn').click();");

上述代码会在 WebView2 中执行一段 JavaScript 代码，模拟点击按钮的操作。

生成 EXE

当我们完成代码编写和测试后，就可以将应用打包成独立的 EXE 文件了。在 aardio 中，打包非常简单，只需要点击菜单栏中的 “工程”->“生成 EXE 文件”，然后在弹出的对话框中选择生成的路径和文件名，点击 “保存” 即可。aardio 会自动将我们的应用打包成一个独立的 EXE 文件，我们可以将这个文件分享给其他人使用。

通过以上步骤，我们就成功地使用 WebView2 和 JavaScript 在 aardio 中开发了一个独立的 EXE 程序。这个程序不仅体积小巧，而且能够充分发挥 Web 技术的优势，实现丰富的功能。希望通过这个实战案例，大家能够对 WebView2 的开发有更深入的了解和掌握。

总结与展望

通过以上的对比和实战，我们可以清晰地看到 WebView2 在开发独立 EXE 程序方面展现出的独特优势。它体积小巧、接口简洁、与原生系统融合度高，为我们在 Windows 平台上开发桌面应用提供了一种高效、便捷的解决方案 。尤其是在一些对跨平台需求不高，主要面向 Windows 用户的项目中，WebView2 无疑是一个非常不错的选择。

当然，Electron 也并非一无是处，它的跨平台特性和丰富的生态系统仍然在很多场景下有着不可替代的作用。在实际的开发过程中，我们应该根据项目的具体需求、目标平台、性能要求等因素，综合考虑选择最适合的技术框架。

展望未来，随着技术的不断发展和进步，桌面应用开发领域也必将迎来更多的创新和变革。WebView2 等基于 Web 技术的开发方案或许会在 Windows 平台上占据越来越重要的地位，为开发者和用户带来更多优质、高效的桌面应用。同时，我们也期待看到更多新技术、新框架的出现，为桌面应用开发注入新的活力，让我们能够创造出更加出色的软件产品，满足用户日益增长的需求 。

阅读原文：原文链接