楔子
WEB 跨平臺 桌面應(yīng)用程序 顧名思義就是用 JavaScript、HTML、CSS 等前端技術(shù)構(gòu)建跨平臺的桌面應(yīng)用，WEB 負責 GUI 渲染并與后端（如 Node.js、Python、Rust 等）交互，從而突破自身無法操作 OS 層級資源的限制。其實現(xiàn)在如火如荼的小程序原理也類似，只是把后端換成宿主 APP （如微信、支付寶、飛書、釘釘?shù)龋?/p>
我大約在 2013 年開始基于 WEB 做一些簡單的桌面應(yīng)用，因為對 WEB 熟又有現(xiàn)成的資源，通過包裝即可快速生成桌面應(yīng)用（exe 可執(zhí)行文件）分享出去。
最開始用的是 C# + webview 控件做了一款信息管理系統(tǒng)（WinForm 做登錄界面，用戶授權(quán)成功后創(chuàng)建 WebView 對象加載遠程網(wǎng)址），兼容性跟效果在當時都非常理想。后來也用過 Android 下的 WebView，大同小異。
WebView 下 JS 與后端原生代碼的交互基于 JSBridge，對于該項技術(shù)的詳解，推薦看下：
- 一文讓你徹底理解JSBridge
- 微信小程序渲染層與邏輯層獨立 及JsBridge原理分析
工具總覽
此類構(gòu)建工具有很多，這里比較的是 Electron、Tauri、Wails 2 三款
| 工具 | 原生語言 | 最新版本 | 簡介 |
|---|---|---|---|
| Electron | Node.js | 21.0.1 | 使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架(嵌入 Chromium 和 Node.js 到 二進制文件) |
| Tauri | Rust | 1.2 | Tauri 是一款應(yīng)用構(gòu)建工具包，讓您能夠為使用 Web 技術(shù)構(gòu)建跨平臺的快速、安全、前端隔離應(yīng)用 |
| wails | Go | 2.1.0 | 使用 Go + HTML + CSS + JS 構(gòu)建漂亮的跨平臺桌面應(yīng)用 |
Electron算是業(yè)內(nèi)老大哥，最開始的名字叫做 atom-shell（是 GitHub 隨 Atom 一起開源的跨操作系統(tǒng)開發(fā)桌面應(yīng)用的框架），最早的版本 0.3.1 發(fā)布于 2013 年 8 月, 在 2015 年 4 月分布的 0.24.0 版本更名為 electron（我也是這時開始接觸），到最新發(fā)布的 21.2.2 版本 ，版本迭代真的是飛一般??。
Tauri是賽道的后起之秀，基于專注安全跟性能的 Rust + 操作系統(tǒng)原生 web 渲染引擎（windows 下為 WebView2），這一點跟 electron 不同，所以前者打包后體積非常小。Tauri 在 2019 年發(fā)布，勢頭迅猛（目前在 github 上已經(jīng)有 53.8k 的 star）。
wails在 2022 年 9 月發(fā)布 2.0.0 正式版，渲染模式跟 tauri 一樣。
集成方式
構(gòu)建工具請參照官網(wǎng)進行預先安裝（如果資源下載緩慢可以考慮更換國內(nèi)源），本文在
windows平臺下進行
此處用 vue3-naive-starter（VUE3 + Naive UI + Tailwind CSS + WebPack5 的快速開發(fā)框架） 作為 UI 進行集成演示。
設(shè)備配置如下
| Name | Value |
|---|---|
| 處理器 | Intel? Core? i5-11300H @ 3.10GHz |
| RAM | 16.0 GB |
| 操作系統(tǒng) | Windows 11 家庭中文版（64位） |
| Node.js | v16.13.0 |
Electron
使用 vue-cli-plugin-electron-builder 插件，由于官方文檔還是 2.1.1 版本的（不支持 14.x 版本以上的 electron），所以這里手動集成
- 安裝依賴：npm i -D electron vue-cli-plugin-electron-builder@3.0.0-alpha.4
- 新建
src-electron目錄并新建index.js文件
import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
async function createWindow() {
let devTool = !process.env.IS_TEST
const win = new BrowserWindow({
width: 1280,
height: 780 + (devTool ? 100 : 0),
webPreferences: {
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
}
})
if (process.env.WEBPACK_DEV_SERVER_URL) {
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
if (devTool) win.webContents.openDevTools()
} else {
createProtocol('app')
win.loadURL('app://./index.html')
}
}
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()})
app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow()})
app.on('ready', async ()=> createWindow())
- 配置
vue.config.js下 electron 相關(guān)的參數(shù)
pluginOptions: {
electronBuilder: {
outputDir: "dist",
nodeIntegration: true,
mainProcessFile: "./src-electron/index.js",
builderOptions: {
appId: "vue3-naive-starter",
/**
* 打包后文件名
* 默認為：${productName}-${version}.${ext}
* 詳見 https://www.electron.build/file-patterns#file-macros
*/
artifactName: "${productName}.${ext}",
//win相關(guān)配置
win: {
target: [
{
//不進行安裝文件制作，僅壓縮. 7z 比 zip 具有更高的壓縮比
target: "7z",
/*
架構(gòu)可選值："arm64" | "armv7l" | "ia32" | "universal" | "x64"
構(gòu)建時，會下載對應(yīng)的 electron 發(fā)行版，保存地址在 C:\Users\{用戶名}\AppData\Local\electron\Cache
如果下載慢，可以手動從 https://registry.npmmirror.com/binary.html?path=electron/ 下載放置在指定位置
*/
arch: ["ia32"]
}
]
}
}
}
}
- 新增腳本入口
// package.json 下 scripts 節(jié)點
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
- 啟動
npm run electron:serve，效果如下圖
Tauri
使用插件 vue-cli-plugin-tauri
- 安裝
cargo（建議配置環(huán)境變量 CARGO_HOME）、Rust環(huán)境 - 安裝插件：
vue add tauri（按照提示選擇即可）
完成后，可以看到新建了src-tauri目錄
這里需要注意下，src-tauri\tauri.conf.json 文件下有兩個配置beforeBuildCommand、beforeDevCommand，建議都設(shè)置為空
- 啟動
npm run tauri:serve
注意：
- 第一次會下載各種依賴，時間較久，請耐心等待
- 僅支持
windows 7以上的操作系統(tǒng)。 - 如果本機沒有
webview2環(huán)境（通常新版本的 windows 10/11 會自帶，或者自行安裝過新版本的 Edge 瀏覽器也會有），請參考下文 附錄/安裝 WebView2 章節(jié)
wails
- 安裝
go環(huán)境（配置國內(nèi)源go env -w GOPROXY=https://goproxy.cn,direct） - 安裝 wails
go install github.com/wailsapp/wails/v2/cmd/wails@latest - 檢驗安裝結(jié)果
wails doctor（顯示 Wails CLI v2.1.0 字樣） - 創(chuàng)建項目
wails init -n vue3-naive-starter-wails -t vue
- 將代碼復制到
frontend目錄下 - 執(zhí)行
wails dev即可啟動
打包
前端資源打包后原始大小 4.3M（ZIP 壓縮后 1.3M）
electron
- 執(zhí)行命令
npm run electron:build - 等待完成（第一次打包會下載響應(yīng)的依賴包，請耐心等待， 當看到
DONE Build complete! Done in 124.57s.字樣表示完成） - 查看
dist目錄下的結(jié)果，壓縮包大小為57M
這里有個題外話，打包后查看bundled目錄下有package.json文件，就是說在運行時可以讀取到該文件。
tauri
-
【可選】 修改
src-tauri\tauri.conf.json的tauri->bundle->active值為 false （即不生成安裝包，沒必要） - 執(zhí)行命令
npm run tauri:build - 結(jié)果文件保存在
src-tauri/target下，exe 文件大小為4.8M
# 請事先修改 identifier 的值，否則會看到如下的報錯信息
Error You must change the bundle identifier in `tauri.conf.json > tauri > bundle > identifier`.
The default value `com.tauri.dev` is not allowed as it must be unique across applications.
wails
- 執(zhí)行
wails build - 查看
build/bin下的 exe 文件（大小為 12.5M）
運行時
讓我們分別運行三個exe，可以看到打開速度都非常迅速，肉眼看不出差別。
此時資源占用情況如下
切換到圖標匯總頁面，該頁面下循環(huán)渲染 1600+ 個圖標，再看看資源占用情況（可以看到內(nèi)存占用均翻倍了）
目前來看，electron 占用的資源相對少些（子任務(wù)數(shù)也少），而tauri、wails由于機制幾乎一樣資源占用也相差無幾。
結(jié)語
本次淺顯對比了簡單 web 應(yīng)用的打包，沒有涉及到后端的原生計算、交互等，僅供參考。
如何選擇
三款工具表現(xiàn)都不錯，大家根據(jù)自身情況（如技術(shù)棧、團隊人員、終端平臺等）進行選擇即可。
我個人（對 Rust、Go 都不熟悉 ??）的話會以項目特點為主進行選擇：
| 項目特點 | 首選 | 備選 | 說明 |
|---|---|---|---|
| 純粹給原有 WEB 項目加一個原生應(yīng)用的外殼 | tauri | wails | 操作簡單、沒有額外的學習成本、社區(qū)資源也算完備 |
| 功能復雜，需要與 OS 交互 | electron | tauri | electron 社區(qū)龐大、文檔/接口完備，第三方庫也全 |
Q&A
以下內(nèi)容僅針對
tauri、wails打包后運行不成功，因為electron內(nèi)嵌了Chromium在各個平臺下保持了很好的統(tǒng)一性
?? 程序閃退
打包后的 exe ，雙擊后屏幕一閃，程序自動退出
碰到這種情況，請檢查操作系統(tǒng)是否安裝有WebView2 控件。
① windows 10/11 如何查看？
右鍵 ?? 選擇應(yīng)用與功能，在應(yīng)用列表中檢索關(guān)鍵字
② windows 7 如何查看？
打開控制面板，單擊程序選項，然后再單擊程序和功能選項，就可以打開 win7 的應(yīng)用程序管理器窗口。通過該窗口可以查看和管理系統(tǒng)中已經(jīng)安裝的程序。
?? 安裝 WebView2
-
前往下載 WebView2 運行時安裝程序
-
根據(jù)操作系統(tǒng)選擇合適的版本
-
安裝下載的文件（按照默認選項即可）
-
完成后再次運行本程序，Enjoy ??
?? DLL 缺失
若出現(xiàn)下圖所示的錯誤信息
請將目錄下的vcruntime140_1.dll復制到C:\Windows\System32下即可。文章來源：http://www.zghlxwxcb.cn/news/detail-449403.html
該 DLL 文件可在以下網(wǎng)站下載：文章來源地址http://www.zghlxwxcb.cn/news/detail-449403.html
- DLL?files.com
- Visual C++ Redistributable for Visual Studio 2015
- Microsoft Visual C++ Redistributable
到了這里，關(guān)于WEB跨平臺桌面程序構(gòu)建工具對比（Electron、Tauri、Wails）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
