如何将网页转换为Windows桌面应用程序

最新推荐文章于 2024-07-09 20:03:16 发布

DevDiary

最新推荐文章于 2024-07-09 20:03:16 发布

阅读量2.1k

点赞数 18

分类专栏：网站文章标签： windows

本文链接：https://blog.csdn.net/www_tlj/article/details/137654114

版权

网站专栏收录该内容

1 篇文章 0 订阅

订阅专栏

将网页或网站转换为桌面应用程序不仅可以增强用户体验，还能提高品牌的可见度和用户的便捷性。对于Windows平台，有几种方法可以将网页网站转换为可执行的EXE文件，本文将介绍三种可选方案：Electron、WebView2和CEF（Chromium Embedded Framework）。

方案一：Electron

Electron是一个流行的框架，允许开发者使用JavaScript、HTML和CSS构建跨平台的桌面应用程序。它通过整合Chromium和Node.js，使得原本仅限于网页的技术能够用于桌面应用的开发。

基本步骤：

安装Node.js：访问Node.js官网下载并安装。
初始化Electron项目：在终端或命令提示符中创建项目文件夹，使用npm init -y初始化Node.js项目。
安装Electron：通过npm install --save-dev electron命令安装Electron。
创建主进程文件：在项目根目录下创建main.js，配置窗口和加载网页。
修改package.json：添加启动脚本"start": "electron ."，确保"main"指向main.js`。
运行应用：使用npm start启动Electron应用。
打包应用：利用Electron Forge或Electron Builder等工具打包应用为EXE文件。

方案二：WebView2

WebView2是Microsoft Edge浏览器提供的控件，允许开发者在Windows应用中嵌入网页内容。这适用于需要在传统Windows应用中集成现代网页界面的场景。

基本步骤：

安装Visual Studio：下载并安装Visual Studio。
创建Windows应用项目：新建WinForms或WPF项目。
添加WebView2控件：将WebView2控件添加到项目中。
加载网页：配置WebView2以加载指定的网页URL。
构建并打包：构建应用并打包为EXE文件。

方案三：CEF (Chromium Embedded Framework)

CEF是一个开源的框架，允许将Chromium浏览器功能嵌入到应用中。它提供了丰富的定制选项，但相较于WebView2，使用起来更为复杂。

基本步骤：

下载CEF：访问CEF的官方网站下载所需版本。
创建项目：创建一个新的C++或C#项目，并将CEF集成进去。
加载网页：使用CEF加载网页。
打包应用：将应用及其依赖打包为EXE文件。

Electron方案实践例子

1. 环境准备

安装 Node.js：Electron 基于 Node.js，访问 Node.js 官网下载并安装。

2. 初始化 Electron 项目

创建项目文件夹并初始化：
```
mkdir my-electron-app
cd my-electron-app
npm init -y
```
这会生成一个新的 package.json 文件。

3. 安装 Electron

在项目目录下通过 npm 安装 Electron：
```
npm install --save-dev electron
```

4. 创建主进程文件

在项目根目录下创建 main.js，此文件是应用的入口。示例代码如下：

const { app, BrowserWindow } = require('electron');

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 1280,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 加载网页
  win.loadURL('https://www.pptgenius.com/');
  
  win.setMenuBarVisibility(false);

  // 打开开发者工具
 // win.webContents.openDevTools();
}

// Electron 完成初始化并准备创建浏览器窗口时调用这个函数
app.whenReady().then(createWindow);

// 当所有窗口都关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在 macOS 上，当点击 dock 图标并且没有其他窗口打开时，通常会重新创建一个窗口
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

5. 修改 `package.json` 添加启动脚本

在 package.json 中添加启动脚本以方便启动应用：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@electron-forge/cli": "^7.3.1",
    "@electron-forge/maker-deb": "^7.3.1",
    "@electron-forge/maker-rpm": "^7.3.1",
    "@electron-forge/maker-squirrel": "^7.3.1",
    "@electron-forge/maker-zip": "^7.3.1",
    "@electron-forge/plugin-auto-unpack-natives": "^7.3.1",
    "@electron-forge/plugin-fuses": "^7.3.1",
    "electron": "29.3.0"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  }
}

6. 运行应用

使用以下命令启动 Electron 应用：
```
npm start
```

7. 打包应用

使用 Electron Forge 打包应用为 EXE 文件：
- 安装 Electron Forge：
```
npm install --save-dev @electron-forge/cli
npx electron-forge import
```
- 打包应用：
```
npm install @electron-forge/plugin-fuses --save-dev
npm run make
```
  打包后的应用程序包将在项目的 out 目录下：
- 执行my-electron-app-win32-x64目录下的my-electron-app.exe文件，可以直接访问内置的浏览器帮访问网页，效果如下：

注：分发时，可以把my-electron-app-win32-x64压缩打包成zip包到目标环境，解压即可执行，无需安装

通过以上步骤，你可以将任何网页封装成一个独立的 Electron 应用，并将其打包成 EXE 文件以便分发。这一过程提供了灵活性，允许你根据具体需求调整窗口大小、图标、权限等设置。

总结

将网页转换为桌面应用程序为用户提供了更丰富的交互体验和更高的访问便利性。Electron提供了一种灵活的方式来构建跨平台的桌面应用，而WebView2和CEF则是嵌入网页内容到传统Windows应用的解决方案。选择哪种方案取决于具体的项目需求、开发资源以及期望的应用功能。

DevDiary

关注

18
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
如何将网页转换为Windows桌面应用程序

将网页转换为桌面应用程序为用户提供了更丰富的交互体验和更高的访问便利性。Electron提供了一种灵活的方式来构建跨平台的桌面应用，而WebView2和CEF则是嵌入网页内容到传统Windows应用的解决方案。选择哪种方案取决于具体的项目需求、开发资源以及期望的应用功能。
复制链接

扫一扫