网站导航
> 文章列表 > electron编译环境搭建和第一个桌面应用例子

electron编译环境搭建和第一个桌面应用例子

网友: 文章列表 2024-03-22 05:21:20

electron编译环境搭建和第一个桌面应用例子

前言

Electron是基于Chromium和Node.js实现的，所以开发人员所需要使用到的前端技术主要包括以下方面：

1、Html、CSS、JavaScript、ES6

2、前端开发工具Vue、Angular、React等的一种

3、其他网络、缓存、通讯、系统、跟踪等前端技术

4、对Vscode编辑器的熟悉

Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

下面介绍环境搭建。

1 安装node js

在使用Electron进行开发之前，需要安装 Node.js。 建议使用最新的LTS版本。下载后直接安装，如果要更换路径，在安装时改下即可。

要检查 Node.js 是否正确安装，请在您的终端输入以下2个命令：

node -v
v18.16.0npm -v
9.5.1

这两个命令应输出了 Node.js 和 npm 的版本信息。

注意 因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。

2 npm换源

node js通过npm下载不同的模块，但是可能会因为网络原因下载缓慢或失败，建议换成国内源：

npm config set registry https://registry.npm.taobao.org# 检查是否成功切换
npm config get registry
https://registry.npm.taobao.org/

3 安装electron

建议先装cnpm，再通过它安装electron，不然直接装electron常常遇到各种失败，cnpm 是 npm 的定制版本，淘宝团队创建，其使用的是淘宝镜像，适用于中国大陆的开发者。

请使用管理员权限打开终端，再输入安装命令，否则可能出现各类权限问题。

可以全局安装，也可以实际进行项目时再在对应的工程下装，这边只用一个版本，采用的是全局安装，后续开发会方便点。

npm i cnpm -g
# -g全局安装
cnpm install electron -g

查看版本信息，完成安装

electron -vv24.1.2

4 第一个桌面应用

4.1 基础知识

一个基本的 Electron 程序主要由以下几部分组成:

  1. 主进程（Main Process）： Electron 应用程序的主进程，负责控制整个应用程序的生命周期、处理系统级别的操作以及其他一些基础功能，主进程通常通过 Node.js API 实现，例如创建和启动渲染进程，处理菜单和快捷键事件等。

  2. 渲染进程（Renderer Process）： Electron 应用程序的渲染进程，负责显示应用程序的用户界面和处理用户交互，渲染进程通常通过 Web 技术实现，例如 HTML，CSS 和 JavaScript，渲染进程可以通过与主进程通信来执行任务。

  3. 页面（Page）： 渲染进程所显示的页面，通常由 HTML、CSS 和 JavaScript 构成，可以通过 HTML 中的 DOM（Document Object Model） 来访问和操作。

  4. 资源文件（Assets）： 包括应用程序所需的各种文件（例如图像、样式表、JavaScript 库等）以及 Electron 应用程序的配置文件（例如 package.json，main.js 等）。

基本规则

GUI模块或者系统底层的模块只可以在主进程中使用。要使用这些模块，你应当很熟悉主进程vs渲染进程脚本的概念。

  • 主进程脚本看起来像个普通的nodejs脚本。
  • 渲染进程和传统的web界面一样，除了它具有使用node模块的能力。

主进程

在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。

渲染进程

由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。

在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。

主进程与渲染进程的区别

  • 主进程使用 BrowserWindow 实例创建网页。
  • 每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。
  • 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。

由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。

Electron 应用的目录结构

your-app/
|-- package.json
|-- main.js
|-- index.js
  • package.json的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。
  • main.js 应该用于创建窗口和处理系统时间。
  • 如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js。

来源：Electron基础学习之Hello world！ - 知乎 (zhihu.com)

4.2 具体例子

参考了官方教程： https://www.electronjs.org/zh/docs/latest/tutorial/quick-start 和 https://zhuanlan.zhihu.com/p/145219052?from_voters_page=true

（1）初始化

在终端命令行输入：

// 手动输入信息，如果嫌弃麻烦直接npm init -y 可以采用默认模板
npm init

init初始化命令会提示您在项目初始化配置中设置一些值 为本教程的目的，有几条规则需要遵循：

  • entry point 应为 main.js.
  • author 与 description 可为任意值，但对于应用打包是必填项。

初始化后，会生成package.json文件，具体长这样：

{"name": "hello-electron","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \\"Error: no test specified\\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}

之后要通过npm启动，需要在"scripts"中添加一行启动命令，记得里面的逗号不能少：

,"start": "electron ./index.html"

具体如下：

{"name": "hello-electron","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \\"Error: no test specified\\" && exit 1","start": "electron ./index.html"},"keywords": [],"author": "","license": "ISC"
}

如果不通过npm启动，直接用electron程序执行index.js脚本效果也是一样：electron index.html

（2）安装electron依赖

然后，将 electron 包安装到应用的开发依赖中，注意，如果之前‘‘第三步 安装electron‘’已经全局安装了electron，这一步可以省略。

npm install --save-dev electron
（3）新建main.js主进程文件

1）先新建一个main.js文件，输入代码如下：

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var win = null;app.on('ready',function(){ win = new BrowserWindow({ webPreferences:{nodeIntegration: true} }); win.loadFile('index.html'); // 这边loadFile如果换成win.loadURL('http://www.baidu.com');，就变成一个精简版的浏览器了win.on('closed',function(){win=null}); 
});
app.on('window-all-closed', function(){app.quit();
});

这个代码也够简单的。不过对于不习惯JavaScript语法的同学，其实也没那么简单，没关系，先把代码运行起来，一定要注意这里的括号问题，可不要少了括号。

（4）新建index.html文件

代码如下：

<html><head><title> 窗口标题</title></head><body><div>hello world!</div></body>
</html>
（5）运行

在终端命令行输入：

npm start

electron编译环境搭建和第一个桌面应用例子

运行成功。

4.3 打包程序

有很多种打包方式，这边用electron-builder。

（1）安装electron-builder
cnpm install electron-builder -g# 查看版本，看是否安装成功
electron-builder --version
23.6.0
（2）修改配置文件package.json

修改配置文件package.json，增加构建选项和依赖版本，具体如下，实际使用时请务必删除里面注释的内容，json中不支持注释方法，有特定的方法如增加 “comment” 属性，但是不建议。

// scripts增加这个构建工具字段，这边没有把全部内容打出来
"scripts": {"dist": "electron-builder"
},
// 增加以下构建字段
"build": {"productName": "electron-hello",   // 安装包文件名"directories": {"output": "dist"  // 安装包生成目录},"nsis": {"oneClick": false,  // 是否一键安装"allowToChangeInstallationDirectory": true    // 允许用户选择安装目录}
},
"devDependencies": {// 可以用^符号表示您安装的是 electron 包的 24.x.x 版本中的最新版本，如^24.1.2// 但是这边我试了会报错"  ⨯ Cannot compute electron version from installed node modules - none of the possible electron modules are installed.""electron": "24.1.2","electron-builder": "23.6.0"
}

devDependencies需要增加版本号，避免出现下面的问题：

  ⨯ Cannot compute electron version from installed node modules - none of the possible electron modules are installed.
（3）构建应用程序

在命令行中运行

npm run dist

命令，electron-builder 会自动构建和打包您的应用程序。

构建结果：

> hello-electron@1.0.0 dist
> electron-builder• electron-builder  version=23.6.0 os=10.0.19045• loaded configuration  file=package.json ("build" field)• writing effective config  file=dist\\builder-effective-config.yaml• packaging       platform=win32 arch=x64 electron=24.1.2 appOutDir=dist\\win-unpacked• default Electron icon is used  reason=application icon is not set• downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1• downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=5m44.666s• building        target=nsis file=dist\\electron-hello Setup 1.0.0.exe archs=x64 oneClick=false perMachine=false• downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z size=1.3 MB parts=1• downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z duration=2m1.633s• downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z size=731 kB parts=1• downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z duration=42.355s• building block map  blockMapFile=dist\\electron-hello Setup 1.0.0.exe.blockmap

为了避免构建过程中下载依赖包缓慢，建议从 https://github.com/electron/electron/releases 下载最新发布所需的稳定版electron-vxxx-win32-x64.zip（根据平台选择），放入以下目录，不用解压

C:\\Users\\用户\\AppData\\Local\\electron\\Cache

从 https://github.com/electron-userland/electron-builder-binaries/releases/ 下载所需要的包。

根据需要把对应的压缩包复制到以下目录，比如这次需要的是winCodeSign，整个复制到Cache目录下，并解压到当前目录

C:\\Users\\用户名\\AppData\\Local\\electron-builder\\Cache
（4）安装并运行

dist目录下就是打包好的安装包，直接双击安装到所有用户，然后运行即可。

网络标签：

相关问题