“轻松入门Electron：一步步构建梦想中的桌面软件

news2024/11/15 10:28:01

在数字化的浪潮中，桌面应用依旧占据着其独特而重要的位置，不论是在企业解决方案、专业工具软件还是个性化应用领域中都是如此。随着技术的演进，创建这些应用的过程已经变得更为简单和可行，尤其是随着Electron等框架的出现。Electron通过让开发者使用熟悉的Web技术—HTML, CSS和JavaScript—来开发跨平台的桌面应用，极大地降低了开发难度，为快速的原型设计和产品迭代提供了强有力的支持。

这篇文章的目标是向对桌面应用开发感兴趣的新手，以及那些想要将自己的Web开发技术应用到桌面开发领域的经验丰富开发者，介绍如何使用Electron框架来快速构建桌面应用。从Electron的基础概念讲起，本文将带你一步一步了解其主要组件，并指导你如何实际搭建起一个应用，从界面设计到功能实现，再到最终的打包和发布。

Electron环境配置

在安装Electron之前，请确保你的开发环境满足以下条件：

  • Node.js：Electron是基于Node.js运行的，因此你需要在你的计算机上安装Node.js。你可以访问Node.js官网下载并安装适合你操作系统的最新稳定版本。

  • npm（Node包管理器）：npm通常会与Node.js一起安装。它是管理Node.js包的工具，也将用于安装Electron。

安装步骤

创建你的项目目录：首先，选择一个合适的位置在你的计算机上创建一个新目录，作为你的项目工作空间。通过命令行或文件浏览器都可以完成这个步骤。

初始化Node.js项目：打开命令行或终端，切换到你的项目目录。运行以下命令来初始化一个新的Node.js项目：

  1. npm init -y

这个命令将创建一个package.json文件，这是你项目的配置文件，其中包含了项目的依赖信息和其他配置。

安装Electron：在项目目录中，运行以下命令来安装Electron：

npm install electron --save-dev

这会将Electron添加到你项目的开发依赖中，并允许你通过Node.js的require命令来使用它。

验证安装

安装完成后，你可以通过运行以下命令来验证Electron是否正确安装：

npx electron -v

如果一切顺利，这个命令将输出Electron的版本号，表明Electron已经成功安装到你的项目中。

Electron项目搭建

接下来，展示一下怎么快速搭建一个桌面应用程序。

创建你的主进程文件

Electron应用的入口通常是一个名为main.js的文件，它在Electron的主进程中运行。这个文件负责创建应用窗口，并处理与操作系统的交互。

在你的项目根目录下，创建一个名为main.js的文件，并添加以下代码：

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

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

// 并加载应用的index.html
mainWindow.loadFile('index.html');

// 打开开发者工具（可选）
mainWindow.webContents.openDevTools();
}

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

// 所有窗口关闭时退出应用
app.on('window-all-closed', () => {
// 在macOS上，除非用户用Cmd + Q确实地退出，否则绝大部分应用及其菜单栏会保持激活
if (process.platform !== 'darwin') {
app.quit();
}
});

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

2. 创建你的Web页面

Electron窗口将展示一个HTML页面。在你的项目根目录下，创建一个名为index.html的文件，并添加一些基本的HTML代码，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Electron!</title>
</head>
<body>
<h1>Hello, Electron!</h1>
<p>这是我的第一个Electron应用。</p>
</body>
</html>

3. 修改

你的package.json文件，以设置应用的入口点。打开package.json，找到"main":字段，将其值改为"main.js"，确保Electron知道从哪个文件启动你的应用。你的package.json中相应的部分应该看起来像这样：

"main": "main.js",

同时，为了能够方便地启动你的Electron应用，你可以在package.json文件的scripts部分添加一个启动脚本：

"scripts": {
"start": "electron ."
},

这样，你就可以通过在命令行中运行npm start来启动你的应用了。

4. 启动你的应用

在你的项目目录中打开命令行或终端，执行以下命令来启动你的Electron应用：

npm start

如果一切顺利，你的电脑屏幕上将出现一个新的窗口，展示了index.html中的内容——这就是你的第一个Electron应用！

下一步

到这里，你已经成功地使用Electron创建了一个简单的桌面应用。接下来，你可以探索Electron提供的更多功能，比如与本地文件系统交云，访问操作系统的底层API，或者使用Electron的IPC（进程间通信）机制来在渲染进程和主进程之间发送消息。

Electron项目发布

上面我们启动electron的应用都是使用的node_modules中的electron包，我们想要得到一个真正可以安装的安装包，还需要使用第三方打包工具进行打包，上面有提到过，我们将使用electron-builder打包成可安装的安装包。上面我们已经安装了electron-builder，下面我们需要在package.json中配置build属性来自定义安装配置。（限于自身设备问题，这里只介绍在Windows系统的打包配置，electron可以打包成各种安装包，使其可以在mac，Linux系统上运行，其他系统的配置可自行查阅资料。）下面我们介绍一下配置内容和各个配置含义。

{
  "name": "desktop",
  "productName": "Harbour",
  "version": "1.0.0",
  "description": "",
  "main": "main/index.js",
  "scripts": {
    "dev-electron": "cross-env NODE_ENV=development electron main/index.js",
    "prod-electron": "cross-env NODE_ENV=production electron main/index.js",
    "build-electron-win64": "electron-builder -w --x64"
  },
  "build": {
    "productName": "Harbour",
    "appId": "harbour.electron.app",
    "files": [
      "build/**/*",
      "main/**/*"
    ],
    "directories": {
      "output": "dist"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./main/assets/logo.ico",
      "uninstallerIcon": "./main/assets/logo.ico",
      "installerHeaderIcon": "./main/assets/logo.png",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "Harbour"
    },
    "win": {
      "icon": "./main/assets/logo.ico",
      "artifactName": "${productName}-${version}-${os}-${arch}.${ext}",
      "target": "nsis"
    },
    "electronDist": "./electron"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cross-env": "^7.0.3",
    "electron": "^26.1.0",
    "electron-builder": "^24.6.3"
  }
}
 

配置解释
 

  1.  
    productName：指定了您的应用程序的产品名称，通常用于构建过程中生成的安装程序文件名等地方。
     
  2.  
    appId：指定了您的应用程序的唯一标识符，这个值在打包和部署时会用到。
     
  3.  
    files：指定打包时所需打包的文件
     
  4.  
    directories.output：指定了输出目录的路径，即构建后的文件将会保存在 dist 目录中。
     
  5.  
    nsis：指定了 NSIS（Nullsoft Scriptable Install System）打包的相关配置。
     
  
    1.  
      oneClick：指定是否启用一键安装模式。
       
    2.  
      allowElevation：是否允许提升权限进行安装。
       
    3.  
      allowToChangeInstallationDirectory：是否允许用户更改安装目录。
       
    4.  
      installerIcon：安装程序的图标文件路径。
       
    5.  
      uninstallerIcon：卸载程序的图标文件路径。
       
    6.  
      installerHeaderIcon：安装程序的头部图标文件路径。
       
    7.  
      createDesktopShortcut：是否在桌面上创建快捷方式。
       
    8.  
      createStartMenuShortcut：是否在开始菜单中创建快捷方式。
       
    9.  
      shortcutName：创建的快捷方式的名称。
       
  6.  
    win：指定了 Windows 平台的配置。
     
  
    1.  
      icon：指定应用程序的图标文件路径。
       
    2.  
      artifactName：定义生成的构建文件的命名规则模板。
       
    3.  
      target：指定构建的目标平台，这里是 NSIS。
       
  7.  
    electronDist：指定了预先下载的 Electron 包的路径。
     
 

特别注意
 这里有几个需要特别注意的点：
 

  1.  
    首先我们用的logo.ico文件尺寸大小至少是256*256的
     
  2.  
    由于打包时需要使用electron的相关包文件，为了提高打包速度，我们一般会提前下载与我们node_modules相同版本的.zip包，然后打包时使用electronDist指定打包用的文件目录，可以缩减打包时间
     
  3.  
    自定义artifactName，该名称就是打包后我们可安装的.exe可执行文件的名称
     
  4.  
    electron-builder打包原理实际上是将package.json同目录的所有文件进行整体打包输出，如下图所示，在package.json同级目录下有一些文件夹我们是不需要进行打包的，其中dist下是我们上次打包输出的内容，electron是我们预下载的打包所需的.zip包，node_modules下面是我们开发时所用的依赖包，这些都不需要打包进去。因此我们需要指定我们打包时所需要打包的文件夹，此时就需要用到package.json里面build配置中的files属性，如上配置，我们只需要将build目录下的文件和main下面的文件打包即可。
     
  5.  
    这里的build目录下是渲染层的代码，main下面都是我们主进程的代码
     
 

 

 

 

 

Electron常用API
 

Electron提供了一系列强大的API，使得开发跨平台桌面应用成为可能。这些API允许开发者访问底层系统的功能，如文件系统操作、窗口管理、系统通知等。以下是一些Electron中常用的API：
 

主进程中的常用API
 

  •  
    app：控制应用生命周期的事件和操作，如应用启动、关闭。
     
  •  
    BrowserWindow：创建和管理应用窗口，可以创建多个窗口，每个窗口在其自己的渲染进程中加载web页面。
     
  •  
    Menu 和 MenuItem：自定义应用菜单和上下文菜单。
     
  •  
    dialog：显示文件打开、保存对话框和警告框等。
     
  •  
    ipcMain：处理主进程和渲染进程之间的异步或同步消息通信。
     
  •  
    globalShortcut：注册和监听全局键盘快捷键。
     
  •  
    shell：管理文件和URLs，如打开外部浏览器访问网页、在文件管理器中显示文件等。
     
 

渲染进程中的常用API
 

  •  
    ipcRenderer：从渲染进程到主进程的异步或同步消息通信。
     
  •  
    webFrame：自定义当前web页面的渲染。
     
  •  
    remote：从渲染进程访问主进程中的对象，(注意：从Electron 14开始，remote模块被标记为废弃，并推荐使用@electron/remote模块代替。)
     
  •  
    desktopCapturer：捕获屏幕音视频数据，用于实现屏幕分享等功能。
     
 

通用API
 

  •  
    clipboard：访问系统剪贴板内容。
     
  •  
    screen：获取屏幕尺寸、显示器信息等。
     
  •  
    notification：发送系统通知。
     
  •  
    nativeImage：创建和管理应用中使用的图像，支持多种格式。
     
 

这些API为Electron应用提供了强大的功能，使得开发者可以更容易地实现桌面应用的各种需求。借助这些API，你可以创建丰富多样的桌面应用，从简单的工具到复杂的企业级应用。
 

如果对Electron感兴趣的，想学习这个框架的话，可以关注下方公众号！在公众号中扣“E框架”！
 


                

        

        

            

            

            

              

                本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1503033.html
              

              如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！
            

            
            

              
            

          


            
相关文章

          
            
                  

                    

                      

                        

                          
                            Android14之禁止vbmeta.img签名校验(一百九十)
                        

                      

                      

                        

                          Android14之禁止vbmeta.img签名校验(一百九十)
                        

                        

                          简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680;  优质专栏&#xff1a;多媒…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            动态规划（带你了解 原理 实践）
                        

                      

                      

                        

                          动态规划（带你了解 原理 实践）
                        

                        

                          目录 
引言 
一、动态规划的基本概念 
二、动态规划的应用 
1. 背包问题 
2. 最短路径问题 
3. 0-1背包问题的变种 
4. 字符串匹配与编辑距离 
5. 金融投资组合优化 
6. 生产调度问题 
7. 项目管理中的资源分配 
三、动态规划算法的优缺点 
优点 
1 效率高 
2 通用性强 
缺点&a…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            Java实现归并排序算法
                        

                      

                      

                        

                          Java实现归并排序算法
                        

                        

                          Java实现归并排序算法 
以下是Java中的归并排序算法实现示例&#xff1a; public class MergeSort {// 归并排序入口函数public static void sort(int[] array) {if (array  null || array.length < 1)return;mergeSort(array, 0, array.length - 1);}// 归并排序递归函数pr…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            配置oh-my-posh
                        

                      

                      

                        

                          配置oh-my-posh
                        

                        

                          在windows上的powershell上配置oh-my-posh&#xff0c;使其更像在linux用oh-my-zsh。 
首先打开powershell&#xff0c;输入&#xff1a; 
winget install JanDeDobbeleer.OhMyPosh -s winget安装on-my-posh.exe和oh-my-posh上最新的主题。 
之后重启powershell。 
打开配置文件…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            华为ce12800交换机m-lag（V-STP模式）配置举例
                        

                      

                      

                        

                          华为ce12800交换机m-lag（V-STP模式）配置举例
                        

                        

                          配置## 标题思路 
采用如下的思路配置M-LAG双归接入IP网络&#xff1a; 1.在Switch上配置上行接口绑定在一个Eth-Trunk中。 2.分别在SwitchA和SwitchB上配置V-STP、DFS Group、peer-link和M-LAG接口。 3.分别在SwitchA和SwitchB上配置LACP M-LAG的系统优先级、系统ID。 4.分别在…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            【粉丝福利第四期】：《低代码平台开发实践：基于React》（文末送书）
                        

                      

                      

                        

                          【粉丝福利第四期】：《低代码平台开发实践：基于React》（文末送书）
                        

                        

                          文章目录 前言一、React与低代码平台的结合优势二、基于React的低代码平台开发挑战三、基于React的低代码平台开发实践四、未来展望《低代码平台开发实践&#xff1a;基于React》五、粉丝福利 前言 
随着数字化转型的深入&#xff0c;企业对应用开发的效率和灵活性要求越来越高…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            scrapy的基本使用介绍
                        

                      

                      

                        

                          scrapy的基本使用介绍
                        

                        

                          创建项目 
### 1. 创建虚拟环境
conda create -n spiderScrapy python3.9 
### 2. 安装scrapy
pip install scrapy2.8.0 -i https://pypi.tuna.tsinghua.edu.cn/simple### 3. 生成一个框架
scrapy startproject my_spider### 4. 生成项目
scrapy genspider baidu https://www.b…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            高电平复位电路工作原理详解
                        

                      

                      

                        

                          高电平复位电路工作原理详解
                        

                        

                          单片机复位电路的作用是&#xff1a;使单片机恢复到起始状态&#xff0c;让单片机的程序从头开始执行&#xff0c;运行时钟处于稳定状态、各种寄存器、端口处于初始化状态等等。目的是让单片机能够稳定、正确的从头开始执行程序。一共分为&#xff1a;高电平复位&#xff0c;低…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            考研复习c语言初阶（1）
                        

                      

                      

                        

                          考研复习c语言初阶（1）
                        

                        

                          本人准备考研&#xff0c;现在开始每天更新408的内容&#xff0c;目标这个月结束C语言和数据结构&#xff0c;每天更新~ 一.再次认识c语言 
C语言是一门通用计算机编程语言&#xff0c;广泛应用于底层开发。C语言的设计目标是提供一种能以简易 的方式编译、处理低级存储器、产生…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            2024AI在医疗领域中的辅助趋势与现有进展
                        

                      

                      

                        

                          2024AI在医疗领域中的辅助趋势与现有进展
                        

                        

                          2024 年 AI 辅助研发趋势随着人工智能技术的持续发展与突破&#xff0c;2024年AI辅助研发正成为科技界和工业界瞩目的焦点。从医药研发到汽车设计&#xff0c;从软件开发到材料科学&#xff0c;AI正逐渐渗透到研发的各个环节&#xff0c;变革着传统的研发模式。在这一背景下&am…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            Halcon深度学习，异常值缺陷检测
                        

                      

                      

                        

                          Halcon深度学习，异常值缺陷检测
                        

                        

                          前言 
halcon深度学习分为常见的4大类。分类&#xff0c;语义分割&#xff0c;异常值检测&#xff0c;深度OCR。本篇主要针对halcon的异常值检测&#xff0c;如何训练和部署&#xff0c;并通过图像预处理的方式实现对异常值缺陷检测的精准实现。 异常值检测不同于语义分割的项目…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            股票价格预测项目
                        

                      

                      

                        

                          股票价格预测项目
                        

                        

                          项目介绍 
背景 
股票价格预测一直是金融领域的热点问题。准确的预测可以帮助投资者作出更明智的决策。本项目旨在使用机器学习技术&#xff0c;特别是长短期记忆网络&#xff08;LSTM&#xff09;&#xff0c;来预测股票价格。 
目标 
开发一个基于LSTM的股票价格预测模型。使…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            FreeRtos Queue（五）
                        

                      

                      

                        

                          FreeRtos Queue（五）
                        

                        

                          本篇主要分析在中断中向队列里发消息xQueueGenericSendFromISR和在中断里从队列中读取消息xQueueReceiveFromISR。 
前言: 
xQueueGenericSendFromISR 和 xQueueReceiveFromISR都是在中断里调用的而不是任务里调用的&#xff0c;所以队列满了或者是队列为空的时候自然就没有把当…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            51 软中断的实现
                        

                      

                      

                        

                          51 软中断的实现
                        

                        

                          前言 
呵呵 中断机制 也是内核中很常见的机制了  
中断机制是现代计算机系统中的基本机制之一&#xff0c;它在系统中起着通信网络的作用&#xff0c;以协调系统对各种外部事件的响应和处理&#xff0c;中断是实现多道程序设计的必要条件&#xff0c;中断是CPU 对系统发生的某个…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            考研数学——高数：重积分
                        

                      

                      

                        

                          考研数学——高数：重积分
                        

                        

                          直角坐标系下二重积分 助记1&#xff1a; 
因为一重积分求出的是二维平面的面积&#xff0c;类比得到二重积分得到的是三维的体积 
而用之前求旋转体体积的思路&#xff1a;已知截面面积可求得体积。来表示二重积分 
在控制一个变量不变&#xff08;x / y&#xff09;时&#x…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            天猫淘宝详情接口API揭秘：实现个性化商品推荐！
                        

                      

                      

                        

                          天猫淘宝详情接口API揭秘：实现个性化商品推荐！
                        

                        

                          天猫淘宝作为中国最大的电商平台&#xff0c;拥有庞大的商品库存和众多用户&#xff0c;为了提高用户购物体验并满足其个性化需求&#xff0c;天猫淘宝推出了详情接口API&#xff0c;通过智能算法实现个性化商品推荐。联讯数据将为您揭秘详情接口API的实现原理和功能。 个性化商…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            Phoenix：去中心化的AI垂直基础设施｜JDI Ventures研报
                        

                      

                      

                        

                          Phoenix：去中心化的AI垂直基础设施｜JDI Ventures研报
                        

                        

                          随着文生视频模型 Sora 的问世&#xff0c;AI 领域迎来了又一个里程碑。毫无疑问&#xff0c;由 ChatGPT 所开启的 AI 浪潮已经势不可挡&#xff0c;这是技术的浪潮&#xff0c;也是商业的浪潮&#xff0c;将对人们的生活带来比互联网更为深刻的改变——改变我们的消费、工作和…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            RNN（Recurrent Neural Networks）循环神经网络
                        

                      

                      

                        

                          RNN（Recurrent Neural Networks）循环神经网络
                        

                        

                          循环神经网络&#xff08;Recurrent Neural Network&#xff0c;简称RNN&#xff09;是一种处理序列数据的神经网络结构&#xff0c;它具有记忆能力&#xff0c;能够捕捉序列中的时序信息。RNN在自然语言处理、时间序列预测等方面有着很多的应用。 
一、RNN 的基本结构 
RNN的包…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            寒假作业Day 08
                        

                      

                      

                        

                          寒假作业Day 08
                        

                        

                          寒假作业Day 08 
一、选择题 
1、下列关于 const 和 #define 定义常量的区别&#xff0c;说法不正确的有&#xff08; &#xff09; A: define宏是在预处理阶段展开。const常量是编译运行阶段使用 B: 宏没有类型&#xff0c;不做任何类型检查&#xff0c;仅仅是展开。const常量…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            Docker MySQL 报 2059 错误：认证插件 ‘caching_sha2_password‘ 无法加载
                        

                      

                      

                        

                          Docker MySQL 报 2059 错误：认证插件 ‘caching_sha2_password‘ 无法加载
                        

                        

                          使用docker部署的mysql8.0.29再使用Navicat连接myslq报错Authentication plugin ‘xxxxxxx’ cannot be loaded&#xff1a;XXXXXX &#xff08;无法加载身份验证插件&#xff09; 
原因&#xff1a;mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
       
      
        

        

          

            



                
                
                

            

          

          

            



              
推荐文章

              
            

          


          

            


                
                
                
            

          

          

            

              
最新文章

              
            

          

          

            

            
            
            
            

          

        

      

    

    

      

        

                    Copyright @ 2022~2023