前言
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium,被 Atom 编辑器和许多其他应用程序使用。
Electron 兼容 Mac、Windows 和 Linux,可以构建出三个平台的应用程序。
一、安装node
下载并安装node Node.js — Run JavaScript Everywhere
安装完成执行node -v查看已版本号:
Microsoft Windows [版本 10.0.17763.5936]
(c) 2018 Microsoft Corporation. 著作權所有,並保留一切權利。
C:\Users\H210>node -v
v20.15.0
C:\Users\H210>
安装node时会默认安装npm,执行npm -v查看已安装的npm版本号:
Microsoft Windows [版本 10.0.17763.5936]
(c) 2018 Microsoft Corporation. 著作權所有,並保留一切權利。
C:\Users\H210>npm -v
10.8.1
C:\Users\H210>
二、使用步骤
1.配置npm环境
配置npm镜像地址、electron镜像地址及代理设置:
npm config set proxy=http://10.XXX.XXX.XXX:88
执行npm config edit,在打开的文本文件中直接输入:
registry=https://registry.npmmirror.com/
electron_mirror=https://npmmirror.com/mirrors/electron/
electron-builder-binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
ELECTRON_GET_USE_PROXY=1
GLOBAL_AGENT_HTTP_PROXY=http://10.xxx.xxx.xxx:88
GLOBAL_AGENT_HTTPS_PROXY=http://10.xxx.xxx.xxx:88
proxy=http://10.XXX.XXX.XXX:88
华为镜像
registry=https://mirrors.huaweicloud.com/repository/npm/
electron_mirror=https://mirrors.huaweicloud.com/electron/
electron-builder-binaries_mirror=https://mirrors.huaweicloud.com/electron-builder-binaries/
2.安装electron
npm install --save-dev electron
总结
--save:将保存配置信息到pacjage.json。默认为dependencies节点中。
--save-dev:将保存配置信息到pacjage.json的devDependencies节点中。
dependencies:运行时的依赖,发布后(生产环境)还需要用的模块。
devDependencies:开发时的依赖。里面的模块是开发时用的,发布时用不到它。
在 Electron 9,如果不在 WebPreferences 中显式开启 enableRemoteModule 参数,
就使用 remote 模块,将会开始发出警告。 在 Electron 10 中,remote 模块默认处于禁用状态。
如果要使用 remote 模块,必须在 WebPreferences 中指定 enableRemoteModule: true :
const w = new BrowserWindow({
webPreferences: {
enableRemoteModule: true
}
})
默认情况下,渲染器不为 nodeIntegration: true 将进行沙盒处理
之前, 指定预加载脚本的渲染器默认不启用沙盒。 这意味着默认情况下,预加载脚本可以访问Node.js。
在 Electron 20中,此默认值将被更改。 从Electron 20开始,渲染器 默认情况下会被沙盒化,
除非指定了 nodeIntegration: true 或 sandbox: false 。
如果预加载脚本不依赖于 Node,则无需执行任何操作。 如果 preload 脚本_依赖_于 Node,
请重构代码,或从渲染器中删除 Node 用法 ,或者显式指定相关渲染器 sandbox: false :
webPreferences: {
sandbox: flase,
},
其它安装问题可参考官方文档:https://www.electronjs.org/zh/docs/latest/tutorial/%E5%AE%89%E8%A3%85
electron版本更新重大改动: