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

方案一:Electron

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

基本步骤:

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

方案二:WebView2

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

基本步骤:

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

方案三:CEF (Chromium Embedded Framework)

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

基本步骤:

  1. 下载CEF :访问CEF的官方网站下载所需版本。
  2. 创建项目 :创建一个新的C++或C#项目,并将CEF集成进去。
  3. 加载网页 :使用CEF加载网页。
  4. 打包应用 :将应用及其依赖打包为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应用的解决方案。选择哪种方案取决于具体的项目需求、开发资源以及期望的应用功能。

        软件介绍: HtmlCompiler是一款趣的小工具,它可以将网页完全地转换EXE可执行文件,遗憾的是本软件的界面是英文的,不过它的使用并不复杂,只需要几个简单的步骤,就能将你的网页转换EXE。你还可以添加密码保护,转换后的EXE运行需要输入密码才可以。安装说明:解压后双击HtmlCompiler.exe安装程序,安装结束之后注意不要立刻运行它,将CK文件夹内的C:\Program Files\David Esperalta\HtmlCompiler文件复制到C:\Program Files\David Esperalta\HtmlCompiler目录下面,覆盖原来的文件即是正式版。使用说明:点击菜单File-->New project新建一个项目,然后选择你的网页文件,按F2键进入转换属性设置,包括转换后文件的图标及标题,设置密码保护以及尺寸大小等,从Compile中可以设置转换后的保存位置。设置后点击下面的Save按钮保存设置。最后点击菜单Build,选择Compile project将脚本转换EXE即可 执行上述命令后,nativfier将会自动创建一个桌面程序,并在当前目录下生成一个相应的文件夹,里面包含了打包后的程序文件。首先,确保你已经安装了Node.js和npm。如果没有安装,你需要先安装它们。通过以上步骤,你就可以使用nativfier将一个网址成功打包成桌面程序了。打开终端(Terminal)或命令提示符(Command Prompt)。进入生成的文件夹,你会找到可执行文件或安装文件,具体取决于你的操作系统。请将https://example.com替换为你想要打包的网址。 HTML2EXE是一款在Windows系统下将Web项目或网站打包成EXE执行程序的免费工具。这款工具能够将单页面应用、传统HTML+JavaScript+CSS生成的网站、Web客户端,以及通过现代前端框架(如Vue)生成的应用转换成独立的EXE程序运行。它支持将任何网站打包成EXE程序,并且可以生成32位或64位的Windows程序。 给兄弟们推荐一个我一直用的工具软件,可以将网页网站直接打包成APP应用安装到手机上,其实原理就是把网站封装成了一个APP安装包,安装APP后点击打开默认跳去了网站.软件可以直接在应用商店下载,叫一个木函,挺好用的,里面还有很多实用的小工具,找不到的我上传安装包到百度云了链接:https://pan.baidu.com/s/10bZCcgMLZ-pnfhQoamnVqA提取码:6688。 将自己的网页变成可运行的 程序,如下所示:Node.js ≥ 12.9 | npm ≥ 6.9确定符合以上环境,任意位置调出 终端,执行如下命令: 如失败,请更换为淘宝源(强烈建议),如不会更换详见 这篇文章。安装完成后,执行如下命令: 将网址替换为你自己的即可。打包完成后,会返回位置:... 你是否想过把网页变成一个电脑软件,但可是上某度一搜映入眼帘的全是网页转app,网页转apk的软件: What?全是封装手机的!于是,经过了我一番疯狂的DFS与BFS终于找到了Node.js这款软件. 是不是已经迫不及待啦!下面就是上Hyperlink的时间了! ⛓想下载快戳我⛓ 安装时有可能会弹出PowerShell,不要方,这很正常. 安装完成后按下"Windows徽标键+R"打开运行,然后输入 输入后的效果输入完成后点击确认,然后控制台就蹦出来了! 安装后输入命令: 老板们突发奇想,把现有的一个管理后台系统打包成桌面端可安装应用,当时我脑海就浮现出两套方案,Electron或Flutter的Webview来打包应用,相对来说Electron熟悉点,就优先考虑了使用Electron,当然后来也使用Flutter实现了一版,效果差别不大,我们先来看看Electron是怎么实现的。 一般来说,进行网页转成手机app需要专门的工具进行制作,需要将网页中的组件元素用安卓原生组件代替,让访问网页有了更好的途径,交互方式也有了很大的提升。网页转客户端应用是将经常浏览的网站像手机应用一样摆在手机桌面上,这样我们访问网站就不用通过浏览器,只需要打开客户端应用就可以进行操作了。2.点击应用,下面的浏览页添加你要转换的网站网址,建议用http协议,如果是https就将S去掉。点击左上角的菜单,选择清单,点击图标,即可导入app图标。接下来我们简单介绍一下使用方法。1.点击右下角的+号,创建应用。