初识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案例

相关推荐
Mr_Mao1 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜053 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~4 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.4 小时前
serviceWorker缓存资源
前端
RadiumAg5 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo5 小时前
ES6笔记2
开发语言·前端·javascript
yanlele6 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子7 小时前
React状态管理最佳实践
前端
烛阴7 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子7 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端