1、介绍
官网:www.electronjs.org/zh/docs/lat…
Electron是什么？
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
基本要求
熟悉该文档之前，需要你有Node.js和web开发经验。 如果您需要了解这两个方面的开发知识，我们推荐您使用以下学习资源：
此外，如果您熟悉Chromium进程模型，您将更好了解 Electron 的工作原理。 您可以通过阅读Chrome comic来获得Chrome架构的简要概述，Chrome架构于2008年同Chrome浏览器的发布而发行。 尽管Chrome发布十多年了，【Chrome comic】漫画中介绍的核心原理仍然有助于理解Electron。
Electron Fiddle运行实例
Electron Fiddle是由Electron开发并由其维护者支持的沙盒程序。 我们强烈建议将其作为一个学习工具来安装，以便在开发过程中对Electron的api进行实验或对特性进行原型化。
Fiddle 已经完美的集成到我们的帮助文档之中。 当你浏览我们tutorial中的例子的时候，你会发现有个"Open In Electron Fiddler" 按钮在代码示例中。 如果你已经安装了Fiddle, “Open In Electron Fiddle" 按钮回打开一个fiddle.electronjs.org链接并加载示例。
2、安装
- 初始化package.json： yarn init
- 安装electron: yarn add --dev electron
- 配置入口文件: "main": "main.js"是主进程 main.js文件：
{
"name": "electronProject",
"version": "1.0.0",
"main": "main.js",
"license": "ISC",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "electron ."
},
"devDependencies": {
"electron": "^19.0.7"
}
}
- 新建main.js主进程文件
const { app, BrowserWindow } = require('electron')
5、新建index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
6、启动项目：yarn start
7、API意义：
新建窗口：new BrowerWindow
返回一个实例,渲染页面：mainWindow.loadFile（“index.html文件”）
3、自动刷新：下载热更新
yarn add --save-dev electron-reloader
const reloader = requrie('electron_reloader')// 热加载
reloader(module)
常见错误：yarn init失败
4、主进程和渲染进程
Elecron运行 package.json 的main 脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个Electron应用总是有且只有一个主进程。
由于Electron使用了Chiromium 来展示web页面，所以Chromitum 的多进程架构也被使用到。每个Electron 中的 web页面运行在它叫渲染进程的进程中。
在普通的浏览器中，web页面无法访问操作系统的顶生资源。然而Eloctron的用户在Node.js的API支持下可以在页面中和燥作系统战行一些雇层交互。
ctrl + shif + i 打开渲染进程调试
mainWindow.webContents.openDevTools()
mainWindow
5、自定义原生菜单
1、定义菜单模板
const { Menu, MenuItem } = require('electron')
const template = [
{ label: '公众号:' },
{
label: '霸道的程序猿',
click: () => {
console.log('点击事件OK')
}
},
{ role: 'undo' },
{ role: 'redo' },
{ label: '旅游', type: 'checkbox', checked: true },
{ label: '吃', type: 'checkbox', checked: true },
{ label: '逛街', type: 'checkbox', checked: false },
new MenuItem({
label: '这是menuItem生成的菜单',
click: () => {
console.log('您点击了menuItem的菜单')
}
}),
{
label: '子菜单测试',
submenu: [
{ label: '子菜单-1' },
{ label: '子菜单-2' },
{ label: '子菜单-3' }
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
