当前位置： 首页 > article >正文

Electron PC桌面应用exe开发

article 2024/12/2 17:24:34

1. Electron 桌面应用开发

  Electron 是一个基于 Node.js 和 Chromium 的桌面应用程序开发框架，它使开发人员能够使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。它已经被众多知名公司使用，例如 GitHub、Slack、Microsoft 等等。本文将介绍如何使用 Electron 开发桌面应用程序。
  Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。
  在桌面程序中，使用C#语言可以创建winform和WPF程序，他们2个在Windows中都非常的优秀，还有就是使用QT开发桌面，可以跨平台开发，这三种都是比较“正规”的，而Electron是使用框架开发桌面程序的，还有其他的框架也可以开发桌面程序等等。下面介绍一下Electron开发桌面程序，只要会使用vue，使用Electron也非常的简单。
  官网如下：
  文档简介 | Electron：https://www.electronjs.org/zh/docs/latest/
在这里插入图片描述

1.1. 安装步骤

1.1.1. 安装node.js

  使用nvm管理nodejs.
  node.js下载地址：https://nodejs.org/en/download/
在这里插入图片描述
  npm版本如下

npm -v

在这里插入图片描述
  npm版本如下

npm -v

  node版本如下

node -v

在这里插入图片描述

1.1.2. 安装electron（主程序）

npm install electron -g

  [或者使用淘宝镜像

cnpm install electron -g

1.1.3. 安装electron（打包）

npm install electron-packager -g

 &emsp或者使用淘宝镜像

cnpm install electron-packager -g

1.1.4. 判断electron

  检查electron是否安装成功，

electron -v

显示版本号则安装成功。
在这里插入图片描述

1.2. 新建工程

  在官网下载程序demo，https://github.com/electron/electron-quick-start。
  本案例环境win10，VisualStudioCode，node，npm
（1）首先创建一个文件夹electronDemo。
（2） 然后进入根目录中， 输入

npm init

在这里插入图片描述
• entry point 应为 main.js.
• author 与 description 可为任意值，但对于应用打包是必填项。
在这里插入图片描述

（3） 将electron包安装到应用的开发依赖中
  这个安装需要等一会儿

cnpm install --save-dev electron

在这里插入图片描述
（4） 使用VisualStudioCode打开程序
  其实上面的命令也可以在VisualStudioCode的终端中执行
  第一个文件就是使用node包，第二和第三都是配置文件，这个和创建vue程序是一样的。
在这里插入图片描述

（5）然后创建main.js文件

// main.js

// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require('electron')
const path = require('path')
 
const createWindow = () => {
  // 创建浏览窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
 
  // 加载 index.html
  mainWindow.loadFile('index.html')
 
  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}
 
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()
 
  app.on('activate', () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
 
// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。

（6） 再创建index.html

<!--index.html-->
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!故里2130</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
 
    <！-- 您也可以此进程中运行其他文件 -->
    <script src="./renderer.js"></script>
  </body>
</html>

（7） 创建preload.js

// preload.js
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

（8） 最后的项目结构如下
  并且在红色的部分增加命令，表示启动的时候访问electron。

"start": "electron .",

在这里插入图片描述
（9） 然后在终端输入

 npm run start

在这里插入图片描述
（10） 效果
  和正常的winform和wpf布局是一样的。
（11） 对开发的程序，进行打包成exe

cnpm install --save-dev @electron-forge/cli

在这里插入图片描述

  再输入

npx electron-forge import

在这里插入图片描述

  再输入

npm run make

在这里插入图片描述
.（12）运行结果
在这里插入图片描述

1.3. 运行示例Demo

1.3.1. 运行一个程序

  在官网下载程序demo，https://github.com/electron/electron-quick-start
  在cmd下进入该项目路径，输入

npm install // 或者 yarn install

npm start

  即可运行该项目
在这里插入图片描述

1.3.2. 打包项目

electron-packager . bobo --out ../app

electron-packager .(exe名字) --out ../app（文件夹）

在这里插入图片描述

1.4. uniapp打包PC桌面应用exe

   随着跨平台开发的需求日益增长，UniApp 成为了开发者们的首选之一。通过 UniApp，你可以使用 Vue.js 的语法结构和组件系统来构建原生应用、Web 应用甚至是桌面应用。本文将详细介绍如何使用 UniApp 将你的项目打包成 Windows 桌面端的 exe 文件。
   全局安装electron插件在全面章节已经介绍，下面介绍uniapp配置。

1.4.1.前提条件

（1）已安装 Node.js (建议使用 LTS 版本)
（2）已安装 Git (可选)
（3）已安装 HBuilderX 或其他支持 UniApp 的 IDE
（4）已安装 uni-app CLI (npm install -g @dcloudio/uni-app)

1.4.1. 创建或准备 UniApp 项目

   如果你还没有 UniApp 项目，可以使用 HBuilderX 或者命令行创建一个新的项目：
在这里插入图片描述

1.4.2. 安装 Electron 相关插件

   在项目根目录下打开终端，安装 uni-app 的 Electron 插件：

cnpm install --save-dev @dcloudio/uni-electron

cnpm install electron -g // 安装electron（主程序）
cnpm install electron-packager -g // 安装electron-packager（打包用）

在这里插入图片描述

1.4.3. uniapp的manifest.json修改

（1）运行的基础路径修改为：./ 不然打包出来会出现白屏，读取不到，因为打包出来的h5默认加载地址为/static/
（2）去掉启用https协议: 不然会出现网络无法加载，去掉https不影响你请求后端的https协议。
在这里插入图片描述

1.4.3. H5文件夹下创建package.json

在这里插入图片描述

1.4.4. H5打包

   发行-网站-PC Web或手机H5(仅适用于uni-app)(H)
在这里插入图片描述

1.4.5. H5文件夹下新建package.json

npm init

在这里插入图片描述
在这里插入图片描述

1.4.6. H5文件夹下新建main.js

   如果你的网页首页的文件名不是 “index.html”，那么请在 main.js 中将其中的 ‘index.html’ 修改为你的网页首页名。
在这里插入图片描述

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
 
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
 
function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 400, height: 700})
 
  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
 
  // Open the DevTools.
  // win.webContents.openDevTools()
 
  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}
 
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})
 
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

1.4.7. 打包

  cmd命令行进入H5目录，输入打包命令
  操作如下图（示例）：
在这里插入图片描述

electron-packager . MyApp --win --out MyApp --arch=x64 --electron-version 33.2.1 --overwrite --ignore=node_modules

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.4.8. 打包命令

  cmd命令行进入H5目录，输入打包命令

electron-packager . 测试系统 --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules --electron-version 33.2.1

参数说明：
测试系统 ：你将要生成的exe文件的名称
–platform=win32：确定了你要构建哪个平台的应用,可取的值有 darwin, linux, mas, win32
–arch=x64：决定了使用 x86 还是 x64 还是两个架构都用
–icon=自定义.ico：自定义设置应用图标
–out=./out：指定打包文件输出的文件夹位置,当前指定的为项目目录下的out文件夹
–asar：该参数可以不加，如果加上，打包之后应用的源码会以.asar格式存在
–app-version=1.0.0：生成应用的版本号
–overwrite：覆盖原有的build,让新生成的包覆盖原来的包
–ignore=node_modules：如果加上该参数，项目里node_modules模块不会被打包进去
–electron-version 8.2.1：指定当前要构建的electron的电子版本（不带"v"）,需要和当前电脑安装的版本一致。
查看electron版本
在这里插入图片描述

1.4.9. 执行以上打包命令时出现以下报错

  问题：执行以上打包命令时出现以下报错：
connect ETIMEDOUT 20.205.243.166:443
在这里插入图片描述
解决办法：

ping GitHub.com

如果能ping通，继续以下操作

1.4.10. 打包慢，无反应

（1）更换为阿里镜像源 命令行下输入

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

（2）修改环境变量

我的电脑->右键->属性->高级系统设置->高级->环境变量->新建
在这里插入图片描述

2. 桌面软件开发框架 Electron、Qt、WPF 和 WinForms比较

2.1. Electron

   Electron 是一个基于 Web 技术的跨平台桌面应用程序开发Q框架。它使用 HTML、CSS 和 javaScript四 来构建应用程序界面，并借助Chromium 渲染引擎只提供强大的页面渲染能力。Electron 的主要特点包括:
（1）跨平台:Electron 可以在 Windows、macOS 和 Linux 等多个主流操作系统上运行，为开发者提供了广泛的目标平台选择。
（2）Web 技术栈:Electron 使用 Web 技术栈进行开发，开发者可以利用熟悉的前端工具和框架来构建应用程序界面。
（3）大量的开发者社区和资源:由于 Electron 的流行和活跃的社区，开发者可以轻松获得丰富的插件、工具和文档资源。
（4）适用场景:Electron 适用于构建跨平台、具有丰富界面和多媒体功能的桌面应用程序，如通讯工具、编辑器和音乐播放器等。

2.2. Qt

   Qt 是一个跨平台的 C++ 应用程序开发框架，被广泛应用于桌面软件开发Q。Qt 的特点包括:
（1）跨平台:Qt 可以在多个主流操作系统上运行，并且提供了一致的 AP| 接口，使得开发者可以轻松实现跨平台的应用程序。（2）强大的 GU| 组件和工具:Qt 提供了丰富的 GU|组件和工具，开发者可以快速构建具有吸引力和交互性的用户界面。
（3）高性能和可扩展性:Qt 通过 C++ 的底层支持，提供了高性能和可扩展性，适用于开发复杂的桌面应用程序。
（4）适用场景:Qt适用于构建要求高性能、可扩展性和定制性的桌面应用程序，如图形设计工具、CAD 软件和游戏编辑器等。

2.3. WPF(Windows@ Presentation Foundation)

   WPF 是微软提供的用于开发 Windows 平台的桌面应用程序的框架。WPF 的特点包括:
（1）强大的数据绑定和样式系统:WPF 提供了强大的数据绑定和样式系统，使开发者能够轻松实现复杂的数据展示和界面定制。（2）XAML定义界面:WPF 使用 XAML(可扩展应用程序标记语言)来定义用户界面，使界面设计与代码逻辑分离，提高开发效率。
（3）内置的动画和多媒体支持:WPF 内置了丰富的动画和多媒体支持，使得开发者可以轻松实现交互式和视觉吸引力的应用程序。
（4）适用场景:WPF 适用于开发要求丰富、具有复杂数据展示和交互的 Windows 平台应用程序，如企业级数据管理系统、可视化工具和教育软件等。

2.4. WinForms

   WinForms 是微软提供的用于开发 Windows 平台的桌面应用程序的框架，使用 C#或 Visualp. Basic.NET 进行开发。WinForms 的特点包括:
（1）快速开发:WinForms 提供了丰富的预定义控件和事件模型，使开发者能够快速构建 Windows 应用程序，并通过可视化设计工具进行界面布局。
（2）简单易学:使用 C#或 VB.NET进行开发，结合直观的设计工具，使得初学者能够轻松上手并快速开发应用程序。
（3）良好的兼容性:WinForms 应用程序可以充分利用已有的 Windows 平台资源和功能，并与其他 .NET 技术集成。
（4）适用场景:WinForms 适用于需要快速开发简单界面和利用现有 Windows 平台资源的应用程序，如内部工具、小型业务应用和.个人应用。

2.5. 总结

   基于 Electron、Qt、WPF 和 WinForms 开发的桌面软件Q的特点和适用场景。
   Electron 适合跨平台的 Web 技术栈应用程序，Qt适用于高性能和可扩展性要求的应用程序，WPE 适用于复杂的 Windows 平台应用程序，而 Winfomms 适合快速开发简单界面的应用程序。开发者可以根据自己的需求和技术栈选择合适的框架，以提高开发效率和应用程序质量。


http://www.kler.cn/a/418740.html

相关文章：

  • 无人机数据处理系统:原理与核心系统
  • 【Oracle11g SQL详解】ORDER BY 子句的排序规则与应用
  • 算法刷题Day1
  • pycharm链接neo4j（导入文件）
  • 【数据结构与算法】排序算法(上)——插入排序与选择排序
  • C-操作符
  • C#中switch语句使用
  • 大模型日报 2024-12-01
  • 大模型开发和微调工具Llama-Factory--＞数据处理
  • Linux设置开启启动脚本
  • Vue 3 服务端渲染(SSR)教程
  • SpringMVC |（一）SpringMVC概述
  • DevOps工程技术价值流：Jenkins驱动的持续集成与交付实践
  • 【青牛科技】电动工具调速控制电路芯片GS016，电源电压范围宽、功耗小、抗干扰能力强
  • Transformers在计算机视觉领域中的应用【第1篇：ViT——Transformer杀入CV界之开山之作】
  • 2.vue3+openlayers加载OpenStreetMap地图
  • 【开源项目】经典开源项目数字孪生智慧商场—开源工程及源码
  • LeetCode 动态规划 爬楼梯
  • Python uvloop性能测试：异步事件循环的性能对比与实践
  • UNDO LOG日志
  • 使用Compose Multiplatform开发跨平台的Android调试工具
  • 树莓集团：以人工智能为核心，打造数字化生态运营新典范
  • python数据分析之爬虫基础：爬虫介绍以及urllib详解
  • redis揭秘-redis01-redis单例与集群安装总结
  • 网络安全方面的专业词汇大全[荐]
  • Vue Router开发常见技术点总结