一、基础知识
1.1初始化应用
mkdir my-electron-app && cd my-electron-app
npm init
1.2配置json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Jane Doe",
"license": "MIT"
}
1.3安装配置electron
npm install --save-dev electron
{
"scripts": {
"start": "electron ."
}
}
npm start
1.4创建主进程文件
在electron 项目中，应用程序的入口都是main这个文件
1.5创建渲染进程页面
渲染进程页面可以是本地html，也可以是远程url
1.6在窗口中打开页面
想要将html从窗口打开，需要用到electron 的两个模块：
app 模块，它控制应用程序的事件生命周期。
BrowserWindow 模块，它创建和管理应用程序 窗口。
const { app, BrowserWindow } = require('electron')
// createWindow()方法来将index.html加载进一个新的BrowserWindow实例
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 您可以通过使用 app.whenReady() API来监听此事件。 在whenReady()成功后调用createWindow()。
app.whenReady().then(() => {
createWindow()
})
1.7窗口生命周期
app 提供了一系列事件可供监听
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
