如何快速将网页打包成为 Windows 桌面应用 @杨宁山

0 阅读1分钟

在很多实际业务中,我们都会遇到这样一个问题:

系统已经是 Web 的,但客户却希望有一个“桌面应用”。

比如:

  • 工厂标签打印系统

  • 仓库管理系统

  • 内部 ERP / OA

  • 收银、前台系统

用户不想:

  • 打开浏览器

  • 输入网址

  • 处理各种兼容问题

他们只想:

👉 双击一个图标,直接打开系统

这时候,一个非常实用的方案就是:

👉 把网页打包成 Windows 桌面应用

一、常见方案的问题

很多人第一反应是用 Electron,但在实际项目中会遇到几个问题:

1️⃣ 体积过大

一个简单网页,打包出来:

👉 200MB 起步

2️⃣ 启动慢

Electron 本质是:

👉 启动一个 Chromium 浏览器

3️⃣ 对 Windows 原生支持弱

对于:

  • 安装体验

  • 快捷方式

  • 系统集成

👉 不够“像一个 Windows 软件”

二、更适合的方案:WPF + WebView2

这也是我这个项目 “知窗(zing-desktop)” 采用的方案。

一句话总结:

👉 用原生 Windows 窗口,承载 Web 页面

技术组合:

  • WPF(桌面 UI)

  • WebView2(Edge 内核)

三、知窗(zing-desktop)是做什么的?

它本质是一个:

👉 网页 → Windows 应用 的打包工具

核心能力:

✅ 1. 一键打包

.\package.ps1 -Runtime win-x64 -Url "https://your-site.com"

直接生成:

  • 安装包(zip)

  • 可执行应用

✅ 2. 启动即打开网页

应用启动后:

👉 自动加载你指定的 URL

无需浏览器参与

✅ 3. 单例运行

  • 重复打开不会多开窗口

  • 会自动唤起已有实例

👉 这点对业务系统非常重要

✅ 4. 标准 Windows 安装体验

支持:

  • 安装到用户目录

  • 创建桌面图标

  • 开始菜单入口

👉 用户体验接近“真正软件”

四、核心实现原理(简单但关键)

整个流程其实很清晰:

Step 1:WPF 创建窗口

var window = new MainWindow();
window.Show();

Step 2:WebView2 加载页面

webView.Source = new Uri(url);

Step 3:读取配置

{
"url": "https://example.com"
}

支持打包时注入:

-Url "https://xxx"

Step 4:打包发布

通过 PowerShell:

package.ps1

完成:

  • 编译

  • 打包

  • 生成安装脚本

五、使用方式(最关键部分)

1️⃣ 打包一个系统

powershell -NoProfile -ExecutionPolicy Bypass `
-File .\package.ps1 `
-Runtime win-x64 `
-Url "https://example.com/leke/lekeProductList"

2️⃣ 分发给用户

发送:

Desktop_Setup.zip

3️⃣ 用户安装

双击:

install.cmd

完成:

  • 安装应用

  • 创建桌面图标

4️⃣ 用户使用

👉 双击桌面图标
👉 直接进入系统

​编辑