人妻夜夜爽天天爽三区丁香花-人妻夜夜爽天天爽三-人妻夜夜爽天天爽欧美色院-人妻夜夜爽天天爽免费视频-人妻夜夜爽天天爽-人妻夜夜爽天天

從 Electron 的困境說起

作為一名長期奮戰(zhàn)在前端開發(fā)一線的博主，我和大家一樣，對(duì)各種開發(fā)技術(shù)都有著強(qiáng)烈的探索欲望和實(shí)踐熱情。在獨(dú)立 EXE 程序開發(fā)的道路上，我也曾是 Electron 的忠實(shí)擁躉。Electron，這個(gè)將 Node.js 和 Chromium 巧妙結(jié)合的框架，確實(shí)為我們帶來了諸多便利。它讓前端開發(fā)者能夠憑借熟悉的 Web 技術(shù)棧，如 HTML、CSS 和 JavaScript，輕松構(gòu)建出跨平臺(tái)的桌面應(yīng)用程序 ，實(shí)現(xiàn) “一次編寫，隨處運(yùn)行” 的美好愿景，大大降低了桌面應(yīng)用開發(fā)的門檻。

但隨著項(xiàng)目的推進(jìn)和深入使用，我逐漸發(fā)現(xiàn)了 Electron 隱藏的一些 “痛點(diǎn)”。其中最讓人頭疼的就是它那龐大的體積。每一個(gè) Electron 應(yīng)用都像是一個(gè) “巨無霸”，捆綁著自己的 Chromium 實(shí)例，這使得哪怕是一個(gè)簡單的 “Hello, world” 程序，打包后的體積也可能輕松超過 100MB。在如今這個(gè)追求極致性能和用戶體驗(yàn)的時(shí)代，這樣的體積無疑是一個(gè)沉重的負(fù)擔(dān)，不僅會(huì)占用大量的磁盤空間，還會(huì)導(dǎo)致應(yīng)用啟動(dòng)速度變慢，給用戶帶來不佳的使用體驗(yàn)。

除了體積問題，升級(jí)與分發(fā)也成了困擾我的難題。由于每個(gè) Electron 應(yīng)用都自帶 Chromium，當(dāng)有新版本發(fā)布時(shí)，整個(gè)應(yīng)用都需要重新下載和安裝，這對(duì)于用戶來說是一個(gè)繁瑣的過程，也增加了應(yīng)用分發(fā)的成本和難度。而且在實(shí)際開發(fā)中，我還遇到了 Electron 嵌入其他窗口界面不方便的問題，與其他語言、技術(shù)融合時(shí)也存在諸多障礙，這在一定程度上限制了它的應(yīng)用場景。

另外，對(duì)于一些只在 Windows 平臺(tái)運(yùn)行，并且需要大量與專用系統(tǒng) API 交互的軟件來說，Electron 強(qiáng)大的跨平臺(tái)特性反而成了一種不必要的負(fù)擔(dān)，徒增了開發(fā)和維護(hù)的成本 。我曾經(jīng)在一個(gè)項(xiàng)目中，花費(fèi)了大量的時(shí)間和精力去優(yōu)化 Electron 應(yīng)用的體積和性能，但效果卻不盡如人意，這讓我開始重新審視這個(gè)曾經(jīng)信賴的框架。

WebView2 閃亮登場

在我為 Electron 的種種問題而苦惱時(shí)，WebView2 就像一道曙光，照亮了我在獨(dú)立 EXE 程序開發(fā)道路上前行的方向。WebView2 是微軟推出的一組強(qiáng)大的控件，它允許開發(fā)者在原生應(yīng)用程序中輕松嵌入 Web 技術(shù)，如 HTML、CSS 和 JavaScript ，這一點(diǎn)和 Electron 有著相似之處，但 WebView2 的優(yōu)勢卻十分顯著。

WebView2 基于性能強(qiáng)悍的 Edge（Chromium）內(nèi)核，這意味著它擁有和 Chrome 瀏覽器一樣強(qiáng)大的渲染能力和對(duì)現(xiàn)代 Web 標(biāo)準(zhǔn)的良好支持。相比之下，Electron 雖然也是基于 Chromium 內(nèi)核，但由于其版本更新相對(duì)滯后，在一些新特性和性能優(yōu)化上可能會(huì)稍遜一籌。而且，WebView2 調(diào)用生成的軟件體積非常小，因?yàn)樗谢?WebView2 的軟件可以共享同一個(gè) WebView2 組件。在 Windows 11 系統(tǒng)中，已經(jīng)內(nèi)置了 WebView2 組件，而在其他 Windows 操作系統(tǒng)上，也可以快速地自動(dòng)安裝 WebView2 ，這大大減少了應(yīng)用的安裝包大小和用戶的安裝時(shí)間，讓應(yīng)用的分發(fā)和更新變得更加輕松便捷。

WebView2 的接口設(shè)計(jì)也非常簡潔，這使得它在嵌入其他窗口界面時(shí)非常方便，與其他語言、技術(shù)的融合也更加順暢。例如，在一些需要與 C++、C# 等語言結(jié)合開發(fā)的項(xiàng)目中，WebView2 能夠很好地與這些語言進(jìn)行交互，實(shí)現(xiàn)功能的互補(bǔ)和擴(kuò)展，而 Electron 在這方面則常常會(huì)遇到一些兼容性問題。此外，WebView2 對(duì) Windows 系統(tǒng)的兼容性也非常出色，它支持從 Windows 7 到 Windows 11 的多個(gè)版本，能夠滿足不同用戶群體的需求。

兩者深度大比拼

為了更直觀地了解 Electron 和 WebView2 的差異，我們不妨從多個(gè)維度對(duì)它們進(jìn)行一番深入的對(duì)比分析。

架構(gòu)與運(yùn)行機(jī)制

從架構(gòu)層面來看，Electron 和 WebView2 都繼承自 Chromium 的多進(jìn)程架構(gòu)，采用一個(gè)主進(jìn)程與多個(gè)渲染進(jìn)程的模式，進(jìn)程間通過 IPC（進(jìn)程間通信）進(jìn)行通信 。不過，它們?cè)诰唧w的實(shí)現(xiàn)方式上還是存在一些區(qū)別。

Electron 應(yīng)用是一個(gè)獨(dú)立的進(jìn)程樹，每個(gè)應(yīng)用都包含一個(gè)根瀏覽器進(jìn)程、若干公共進(jìn)程以及多個(gè)渲染進(jìn)程，并且不與 Chrome 共用任何 DLL 文件，這就導(dǎo)致其打包后的體積較大。而 WebView2 的二進(jìn)制文件與 Edge 有較強(qiáng)的依賴關(guān)系，它們會(huì)共享磁盤和一些工作集。使用相同用戶目錄的 WebView2 應(yīng)用可以共享除渲染進(jìn)程以外的進(jìn)程，這在一定程度上減少了資源的占用 ，使得基于 WebView2 開發(fā)的應(yīng)用在資源利用上更加高效。

功能特性

在功能方面，Electron 提供了豐富的 API，讓開發(fā)者能夠輕松實(shí)現(xiàn)菜單創(chuàng)建、文件系統(tǒng)訪問、系統(tǒng)通知發(fā)送等本地相關(guān)功能，這得益于它集成了 Node.js，開發(fā)者可以在主進(jìn)程或者渲染進(jìn)程中使用 Node.js 提供的 API、模塊以及 node-native-addon ，這為前端開發(fā)者提供了極大的便利，能夠充分發(fā)揮前端技術(shù)棧的優(yōu)勢。

相比之下，WebView2 僅僅是一個(gè)被集成到 WinForms、WPF 等應(yīng)用框架中的組件，它本身不提供操作系統(tǒng)的本地 API，僅提供標(biāo)準(zhǔn)的 Javascript API。如果使用 WebView2 開發(fā)的應(yīng)用想要訪問本地能力，就需要通過 Javascript 和本地代碼進(jìn)行對(duì)接來實(shí)現(xiàn) 。這雖然在一定程度上增加了開發(fā)的復(fù)雜性，但也為開發(fā)者提供了更多與原生應(yīng)用融合的可能性，能夠充分利用原生系統(tǒng)的強(qiáng)大功能。

性能表現(xiàn)

在性能上，由于 Electron 和 WebView2 都基于 Chromium 內(nèi)核，所以在渲染頁面時(shí)，它們的性能差異其實(shí)非常小。曾經(jīng)有開發(fā)者專門制作了不同技術(shù)組合的 Demo 進(jìn)行測試，結(jié)果顯示，無論是在 Electron 還是 WebView2 中渲染頁面，性能差異幾乎可以忽略不計(jì) 。不過，在 IPC 通信方面，兩者還是存在一些不同。

在 Chromium 中，瀏覽器進(jìn)程充當(dāng)著渲染器和系統(tǒng)其它部分之間的 IPC 通信代理角色。Electron 支持不開啟沙箱模式，但出于安全考慮，很多應(yīng)用還是會(huì)選擇使用沙箱機(jī)制。WebView2 則無論在任何情況下都會(huì)開啟沙箱機(jī)制 。由于底層 IPC 的實(shí)現(xiàn)不同，在 JavaScript 和 C++ 或 C# 之間通信時(shí)，最常見的編碼方式是 JSON 字符串，而 JSON 的序列化和解析是一個(gè)比較耗時(shí)的操作，這可能會(huì)導(dǎo)致 IPC 通信產(chǎn)生瓶頸，從而降低應(yīng)用的整體性能。不過，從 Edge93 版本開始，WebView2 采用了 CBOR 技術(shù)來在進(jìn)程間傳輸數(shù)據(jù)，有效地提高了通信效率；而在 Electron 中，開發(fā)者也可以使用 MessagePorts 技術(shù)來避免 JSON 的序列化和解析操作，MessagePorts 底層采用的是結(jié)構(gòu)化克隆技術(shù)，同樣能夠提升 IPC 通信的性能 。

安全機(jī)制

安全是應(yīng)用開發(fā)中至關(guān)重要的一環(huán)。Electron 的安全級(jí)別可以在完全訪問權(quán)限到完全沙箱之間進(jìn)行配置，這使得開發(fā)者可以根據(jù)應(yīng)用的具體需求來靈活調(diào)整安全策略，實(shí)現(xiàn)一些在瀏覽器沙箱中無法實(shí)現(xiàn)的功能 。然而，這種靈活性也可能帶來一定的安全風(fēng)險(xiǎn)，如果配置不當(dāng)，可能會(huì)導(dǎo)致應(yīng)用存在安全漏洞。

WebView2 的上下文則只能運(yùn)行在沙箱環(huán)境中，這種嚴(yán)格的沙箱機(jī)制可以有效地限制應(yīng)用的訪問權(quán)限，降低安全風(fēng)險(xiǎn)，為應(yīng)用提供了一個(gè)相對(duì)安全的運(yùn)行環(huán)境 。但這也意味著開發(fā)者在進(jìn)行一些涉及系統(tǒng)底層操作時(shí)會(huì)受到更多的限制，需要通過其他方式來實(shí)現(xiàn)相關(guān)功能。

實(shí)戰(zhàn)：WebView2 開發(fā)獨(dú)立 EXE

說了這么多，相信大家已經(jīng)迫不及待地想要親自體驗(yàn)一下 WebView2 的魅力了。下面，我將以 aardio 為例，為大家詳細(xì)展示如何使用 WebView2 和 JavaScript 開發(fā)獨(dú)立 EXE 程序。aardio 是一款簡單易學(xué)的編程語言，它與 WebView2 的結(jié)合，能夠讓我們更加輕松地創(chuàng)建出功能強(qiáng)大的桌面應(yīng)用。

準(zhǔn)備工作

首先，我們需要確保開發(fā)環(huán)境已經(jīng)搭建好。在 aardio 中，WebView2 的使用非常方便，只需要簡單的幾步操作即可。我們可以在 aardio 的官方網(wǎng)站上下載并安裝最新版本的 aardio 開發(fā)環(huán)境，安裝完成后，打開 aardio，新建一個(gè)工程。

創(chuàng)建工程

在 aardio 中，創(chuàng)建一個(gè)新工程非常簡單。點(diǎn)擊菜單欄中的 “文件”->“新建工程”，在彈出的對(duì)話框中選擇 “Windows 窗口程序”，然后為工程命名，比如 “WebView2Demo”，點(diǎn)擊 “確定” 即可創(chuàng)建一個(gè)新的工程。

添加 WebView2 控件

工程創(chuàng)建完成后，我們需要在窗口中添加 WebView2 控件。在 aardio 的設(shè)計(jì)界面中，找到 “工具箱”，在 “工具箱” 中找到 “WebView2” 控件，將其拖放到窗口中。此時(shí)，我們可以看到窗口中出現(xiàn)了一個(gè) WebView2 控件，我們可以根據(jù)自己的需求調(diào)整其大小和位置。

編寫代碼

接下來，就是編寫代碼的環(huán)節(jié)了。在 aardio 中，我們可以使用 JavaScript 來編寫 WebView2 的相關(guān)邏輯。首先，我們需要在窗口的初始化事件中，加載一個(gè)本地的 HTML 頁面。在 aardio 的代碼編輯區(qū)中，找到窗口的初始化事件函數(shù)，比如 “_啟動(dòng)窗口_創(chuàng)建完畢”，在該函數(shù)中添加以下代碼：

// 獲取WebView2控件
var webView = _啟動(dòng)窗口.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文件的路徑與當(dāng)前應(yīng)用的路徑拼接起來，以確保能夠正確加載頁面。

接下來，我們可以在index.html頁面中編寫 HTML、CSS 和 JavaScript 代碼，來實(shí)現(xiàn)我們想要的功能。例如，我們可以在index.html中添加一個(gè)簡單的按鈕，當(dāng)點(diǎn)擊按鈕時(shí)，在 WebView2 中顯示一個(gè)提示信息：

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

在上述代碼中，我們創(chuàng)建了一個(gè)簡單的 HTML 頁面，包含一個(gè)按鈕和一段 JavaScript 代碼。當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)調(diào)用alert函數(shù)顯示一個(gè)提示信息。

與本地代碼交互

WebView2 的強(qiáng)大之處不僅在于能夠顯示 Web 頁面，還在于它能夠與本地代碼進(jìn)行交互。在 aardio 中，我們可以通過一些方法來實(shí)現(xiàn) JavaScript 與 aardio 代碼的雙向通信。

例如，我們可以在 JavaScript 中調(diào)用 aardio 的函數(shù)。首先，在 aardio 中定義一個(gè)函數(shù)，比如在窗口的代碼中添加以下函數(shù)：

function showMessage(msg) {
_啟動(dòng)窗口.MsgBox(msg);
}

上述函數(shù)接受一個(gè)參數(shù)msg，并使用_啟動(dòng)窗口.MsgBox方法在窗口中顯示一個(gè)消息框。

然后，在 JavaScript 中調(diào)用這個(gè)函數(shù)。在index.html的 JavaScript 代碼中添加以下內(nèi)容：

document.getElementById('btn').addEventListener('click', function() {
// 調(diào)用aardio的showMessage函數(shù)
window.chrome.webview.hostObjects.aardio.showMessage('你點(diǎn)擊了按鈕，這是從JavaScript傳遞給aardio的消息！');
});

在上述代碼中，我們通過window.chrome.webview.hostObjects.aardio.showMessage來調(diào)用 aardio 中定義的showMessage函數(shù)，并傳遞了一個(gè)消息。

反過來，我們也可以在 aardio 中調(diào)用 JavaScript 的函數(shù)。例如，在 aardio 中添加以下代碼：

// 調(diào)用JavaScript中的函數(shù)
webView.ExecuteScriptAsync("document.getElementById('btn').click();");

上述代碼會(huì)在 WebView2 中執(zhí)行一段 JavaScript 代碼，模擬點(diǎn)擊按鈕的操作。

生成 EXE

當(dāng)我們完成代碼編寫和測試后，就可以將應(yīng)用打包成獨(dú)立的 EXE 文件了。在 aardio 中，打包非常簡單，只需要點(diǎn)擊菜單欄中的 “工程”->“生成 EXE 文件”，然后在彈出的對(duì)話框中選擇生成的路徑和文件名，點(diǎn)擊 “保存” 即可。aardio 會(huì)自動(dòng)將我們的應(yīng)用打包成一個(gè)獨(dú)立的 EXE 文件，我們可以將這個(gè)文件分享給其他人使用。

通過以上步驟，我們就成功地使用 WebView2 和 JavaScript 在 aardio 中開發(fā)了一個(gè)獨(dú)立的 EXE 程序。這個(gè)程序不僅體積小巧，而且能夠充分發(fā)揮 Web 技術(shù)的優(yōu)勢，實(shí)現(xiàn)豐富的功能。希望通過這個(gè)實(shí)戰(zhàn)案例，大家能夠?qū)?WebView2 的開發(fā)有更深入的了解和掌握。

總結(jié)與展望

通過以上的對(duì)比和實(shí)戰(zhàn)，我們可以清晰地看到 WebView2 在開發(fā)獨(dú)立 EXE 程序方面展現(xiàn)出的獨(dú)特優(yōu)勢。它體積小巧、接口簡潔、與原生系統(tǒng)融合度高，為我們?cè)?Windows 平臺(tái)上開發(fā)桌面應(yīng)用提供了一種高效、便捷的解決方案 。尤其是在一些對(duì)跨平臺(tái)需求不高，主要面向 Windows 用戶的項(xiàng)目中，WebView2 無疑是一個(gè)非常不錯(cuò)的選擇。

當(dāng)然，Electron 也并非一無是處，它的跨平臺(tái)特性和豐富的生態(tài)系統(tǒng)仍然在很多場景下有著不可替代的作用。在實(shí)際的開發(fā)過程中，我們應(yīng)該根據(jù)項(xiàng)目的具體需求、目標(biāo)平臺(tái)、性能要求等因素，綜合考慮選擇最適合的技術(shù)框架。

展望未來，隨著技術(shù)的不斷發(fā)展和進(jìn)步，桌面應(yīng)用開發(fā)領(lǐng)域也必將迎來更多的創(chuàng)新和變革。WebView2 等基于 Web 技術(shù)的開發(fā)方案或許會(huì)在 Windows 平臺(tái)上占據(jù)越來越重要的地位，為開發(fā)者和用戶帶來更多優(yōu)質(zhì)、高效的桌面應(yīng)用。同時(shí)，我們也期待看到更多新技術(shù)、新框架的出現(xiàn)，為桌面應(yīng)用開發(fā)注入新的活力，讓我們能夠創(chuàng)造出更加出色的軟件產(chǎn)品，滿足用戶日益增長的需求 。

閱讀原文：原文鏈接