初识Electron，创建桌面应用

历史小剧场

呜呼！古有匈奴犯汉，晋室不纲，铁木夺宋，虏清入关，神舟陆沉二百年有余，中国之见灭于满清初非满人能灭之，能有之也因有汉奸以作虎怅，残同胞媚异种，始有吴三桂洪承畴，继有曾国藩袁世凯以为厉。今率堂堂之师，征讨汉贼袁氏筑共和之体，或免于我子子孙孙被异族奴役。---- 《讨汉贼袁世凯檄文》

基本使用

1、初始项目

注意：main: 改为 main.js

bash 复制代码

npm init

2、安装electron

bash 复制代码

npm install --save-dev electron

3、修改package.json

json 复制代码

{
  "name": "electron-app-cycle",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --watch main.js --exec npm run build",
    "build": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^30.0.1"
  }
}

4、编写main.js

js 复制代码

const { app, BrowserWindow, ipcMain } = require('electron')


// 创建窗口
let mainWin = null;
function createWindow() {
    mainWin = new BrowserWindow({
        x: 100,
        y: 100,
        show: false,
        width: 1000,
        height: 600,
        maxWidth: 1000,
        maxHeight: 800,
        minWidth: 400,
        minHeight: 200,
        resizable: false, // 可缩放
        movable: true, // 可移动
        frame: true, // 无边框
        title: "Electron 学习",
        icon: "logo.png",
        // transparent: true, // 透明
        autoHideMenuBar: true, // 隐藏菜单栏
        webPreferences: {
            nodeIntegration: true, // 集成 Nodejs
            contextIsolation: false, // 隔离上下文
        }
    })

    mainWin.loadFile('index.html')
    mainWin.on("ready-to-show", () => {
        mainWin.show()
    })


    mainWin.webContents.on('dom-ready', () => {
        console.log("22222 ---> dom-ready")
    })

    mainWin.webContents.on('did-finish-load', () => {
        console.log("33333 ---> did-finish-load")
    })


    // 当前窗口关闭时触发
    mainWin.on("closed", () => {
        console.log("88888 ---> this window is closed")
        mainWin = null;
    })
}

// 监听来自渲染进程的 openListWindow 事件
ipcMain.on("openListWindow", () => {
    const chidlWin = new BrowserWindow({
        x: 400,
        y: 300,
        width: 400,
        height: 200,
        parent: mainWin,
        webPreferences: {
            nodeIntegration: true,
        }
    })
    chidlWin.loadFile('list.html')

    chidlWin.on("closed", () => {
        chidlWin = null
    })
})

app.on('ready', () => {
    console.log("11111 ---> app is ready")
    createWindow()
})

app.on('window-all-closed', () => {
    console.log("44444 ---> all windows are closed")
    app.quit()
})

app.on('before-quit', () => {
    console.log("55555 ---> before-quit")
})

app.on('will-quit', () => {
    console.log("66666 ---> will-quit")
})

app.on('quit', () => {
    console.log("77777 ---> quit")
})

补充知识：Electron 生命周期

ready: app 初始化完成

dom-ready: 一个窗口中的文本加载完成

did-finish-load: 导航完成时触发

window-all-closed: 所有窗口都被关闭时触发

before-quit: 在关闭窗口之前触发

will-quit: 在窗口关闭并且应用退出时触发

quit: 当所有窗口被关闭时触发

closed: 当窗口关闭时触发，此时应删除窗口引用

5、编写主窗口页面 index.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <h2>Electron生命周期</h2>
    <button id="open-list-window">点击打开新窗口</button>
    <script src="index.js"></script>
</body>
</html>

index.js

js 复制代码

const { ipcRenderer } = require('electron')

window.addEventListener("DOMContentLoaded", () => {
    const btn = document.getElementById("open-list-window");
    btn.onclick = () => {
        // 当按钮被点击时，发送消息到主进程
        ipcRenderer.send('openListWindow')
    }
})

补充知识

DOMContentLoaded事件：此时浏览器已经完全加载了HTML文件，并且DOM树已经生成好了。但是其他外部资源，比如样式文件、图片、字体等并没有加载好；

Load事件：此时浏览器已经将所有的资源都加载完毕，可以正确读取页面中的资源。

6、编写子窗口 list.html

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新窗口</title>
</head>
<body>
    <div>新窗口</div>
</body>
</html>

运行

bash 复制代码

npm run start

Electron案例