介绍
使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序
- 基于 Chromium 和 Node.js
- 让你可以使用 HTML, CSS 和 JavaScript 构建应用
- 开源
- 跨平台(Windows、Mac、Linux)
Atom、Postman、Notion、Vscode等都是用Electron开发的
快速上手
手动
1.创建文件并初始化
1 | mkdir Hello-world && cd Hello-world |
记得修改入口文件,并在根目录创建入口文件 main.js
1 | // package.json |
2.安装electron依赖
1 | npm install --save-dev electron |
3.在package.json配置文件中的scripts字段下增加一条start命令
1 | // package.json |
4.运行
1 | npm start |
5.空白是因为并没有任何内容,写个 HTML
1 | <!-- index.html --> |
6.修改主入口main.js代码
1 | // 在文件头部引入 Node.js 中的 path 模块const path = require('path') |
脚手架
1 | # 克隆示例项目的仓库 |
如果安装过慢可以设置淘宝源
最新淘宝源地址:
1 | # Npm 设置淘宝源 |
使用淘宝源运行时如果提示这个错误
地址问题
1 | throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again') |
则设置electron 镜像源地址
1 | npm config set electron_mirror https://cdn.npm.taobao.org/dist/electron/ |
打包
注意:图标格式 Windows 下使用的 icon.ico Mac 使用的是 icon.icns
使用electron-forge
安装
1 | npm install --save-dev @electron-forge/cli |
使用
1 | npm run make |
打包参数配置 package.json文件里的config => forge => packagerConfig
使用electron-packager
安装
1 | npm install --save-dev electron-packager |
使用
1 | npx electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...] |
具体参数:https://github.com/electron/electron-packager
将网站直接生成桌面应用
用上面手动或者脚手架的方式创建初始化文件
修改 main.js
1 | const { app, BrowserWindow, Menu } = require("electron"); |
Electron的优缺点
优点
- 原生的接口(菜单、消息提醒、系统托盘等)。
- 上手难度低,能够使用react、vue等前端框架,能方便地迁移前端组件,构建出漂亮的桌面应用。
- 方便热更新
- 调试和测试方便
- Electron使用node.js。因此,您可以导入Chrome应用程序中不容易使用的许多模块
- Electron文档要好得多
缺点
- 不适合开发轻量级的应用。即使一个electron的项目框架,也包含chromium内核。
- 相比c++开发的桌面应用,性能远远不如后者。
- 启动速度慢。
- 每个窗口都是一个新的进程,占据大量内存。
Electron和 PWA
可用性
- Electron 不能安装在任何设备
- PWA 只要有网有浏览器记性,甚至不需要网络
性能
- PWA具有更好性能,使用 Service Worker,减少加载时间
占用空间
- Electron包过大,毕竟每个包都包含了包含chromium内核
安全性
- Electron包不加任何混淆加密的话是完全可读的,因为存放在本地
- PWA存放在服务端且只能通过HTTPS传输
更新和集成
- 两者都可以做到服务端异步更新
交互
- Electron可以调用原生的接口
Electron和Flutter
上手难度
- Electron:会基础的HTML、CSS、JS即可
- Flutter:需学习Dart语言
侧重点
- Electron更偏向PC端应用
- Flutter更偏向移动端应用