Electron.js 是一个跨平台的 JavaScript 桌面应用开发框架。可用 HTML + CSS + JavaScript 的方式来开发系统桌面应用。不仅易用,而且对多平台的支持也非常不错。如果你厌倦了用 C# 和 C++ 或者苹果的(swift)来构建桌面应用,不妨可以试试下这个 JavaScript 框架。
对这框架使用前需要安装 Node.js 和 Git ,可以到官网 https://nodejs.org/zh-cn 、https://git-scm.com 来获取。
在学这个框架之前只需要会 前端三件套(HTML,CSS,JavaScript)即可。同时为了方便编程 和 Debug。可以去下载 VSCode 来作为开发主要工具。
安装完 Node.js 和 Git 并配置环境变量后(为了更方便的从任意目录调用)使用命令
1 | git clone https://github.com/electron/electron-quick-start |
可以从 GitHub 上克隆一个 Electron.js 的 Hello World 项目。随后,再使用命令
1 | npm install |
下载安装 Electron.js 的相关依赖。这个时间不会很长,(如果是的话)你可以设置 npm 的镜像源。以提高你下载安装的速度。
有关镜像源:
淘宝 https://npm.taobao.org/mirrors/npm/
设置源的 npm 命令:
1 | npm install 包名 --registry=镜像库地址 |
运行 Electron 项目
当项目克隆和安装相关依赖后,可以使用 npm start 命令来运行 Electron 项目。
开发工具及Debug
接下来我们可以准备一个方便开发的工具 Vscdoe 并且为其配置 Electron.js 的开发环境。有关 Vscode,可以前往官网 https://code.visualstudio.com 获取。
如果已经安装 Vscode,我们可以接下来在 Electron 项目目录下新建一个名为 .vscode 的文件夹。并在里面自行新建一个配置文件 launch.json
1 | { |
回到 Vscode ,我们就可以直接通过这里来运行 Electron 项目,从而不需要命令行的繁琐步骤。
在运行的程序中的此菜单栏里找到 开发者工具 以用于 Debug 。
创建基本Electron应用的另一种方法
从开发的角度来看,Electron应用基本上是一种Node.js应用。可以使用 npm 直接进行 构建。
1.创建 json
1 | npm init -y |
2.创建脚本 index.js
1 | const { app, BrowserWindow } = require('electron') |
3.创建 index.html
1 |
|
4.根据个人更改 package.json 文件信息
1 | { |
打包 Electron 应用
当项目完成时,可以使用 Electron Forge 来打包。键入以下命令来导入 Electron Forge。
1 | npx import -forge/cli |
导入 Electron Forge 后键入命令
1 | npm run make |
进行应用打包工作。最后,输出 out 文件夹,里面即是打包出来的软件。
Electron.js 工程主要文件结构
结构 | 说明 |
---|---|
node_modules | 依赖文件 |
index.html | 页面 |
index.js | 脚本 |
package.json | 工程信息 |