first commit

2025-01-09 18:30:49 +08:00
commit ead83056ff
99 changed files with 27286 additions and 0 deletions
--- a/day02-correspond-between-render-thread/index.html
+++ b/day02-correspond-between-render-thread/index.html
@@ -0,0 +1,18 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>渲染进程间通信</title>
+    <style>
+        * {
+            margin: 0.75rem 0.25rem;
+        }
+    </style>
+</head>
+<body>
+    <h2>渲染进程间通信</h2>
+
+    <button id="btn">打开窗口2</button>
+    <script src="index.js"></script>
+</body>
+</html>
--- a/day02-correspond-between-render-thread/index.js
+++ b/day02-correspond-between-render-thread/index.js
@@ -0,0 +1,18 @@
+const { ipcRenderer } = require('electron')
+
+window.onload = () => {
+    // 先获取元素
+    let oBtn = document.getElementById('btn')
+
+    oBtn.addEventListener('click', () => {
+        ipcRenderer.send('openWin2', '来自于 index 进程')
+
+        // 打开窗口2之后，保存数据至。。。
+        // localStorage.setItem('name', '啦啦啦啦')
+    })
+
+    // 接受消息
+    ipcRenderer.on('mti', (_, data) => {
+        alert(data)
+    })
+}
--- a/day02-correspond-between-render-thread/main.js
+++ b/day02-correspond-between-render-thread/main.js
@@ -0,0 +1,58 @@
+const { app, BrowserWindow, ipcMain } = require('electron')
+
+// 定义全局变量存放主窗口 Id
+let mainWinId = null
+
+const createWindow = () => {
+    let mainWin = new BrowserWindow({
+        show: false,
+        width: 800,
+        height: 400,
+        webPreferences: {
+            nodeIntegration: true,
+            enableRemoteModule: true
+        }
+    })
+    
+    mainWin.loadFile('index.html')
+    mainWinId = mainWin.id
+    mainWin.on('ready-to-show', () => {
+        mainWin.show()
+    })
+    mainWin.on('close', () => {
+        mainWin = null
+    })
+}
+
+// 接受其他进程发送的数据，完成后续的逻辑
+ipcMain.on('openWin2', (_, data) => {
+    // 接收到渲染进程中按钮点击信息之后完成窗口2的打开
+    let subWin1 = new BrowserWindow({
+        width: 400,
+        height: 300,
+        parent: BrowserWindow.fromId(mainWinId), // 或定义全局变量
+        webPreferences: {
+            nodeIntegration: true,
+            enableRemoteModule: true
+        }
+    })
+    subWin1.loadFile('subWin1.html')
+    subWin1.on('close', () => {
+        subWin1 = null
+    })
+    // 转交给进程
+    subWin1.webContents.on('did-finish-load', () => {
+        subWin1.webContents.send('its', data)
+    })
+})
+
+ipcMain.on('stm', (ev, data) => {
+    // 转交给进程
+    let mainWin = BrowserWindow.fromId(mainWinId)
+    mainWin.webContents.send('mti', data)
+})
+
+app.on('ready', createWindow)
+app.on('window-all-closed', () => {
+    app.quit()
+})
--- a/day02-correspond-between-render-thread/package-lock.json
+++ b/day02-correspond-between-render-thread/package-lock.json
--- a/day02-correspond-between-render-thread/package.json
+++ b/day02-correspond-between-render-thread/package.json
@@ -0,0 +1,17 @@
+{
+	"name": "electron-life-cycle",
+	"version": "1.0.0",
+	"description": "",
+	"main": "main.js",
+	"scripts": {
+		"start": "nodemon --watch main.js --exec npm run build",
+		"build": "electron ."
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"devDependencies": {
+		"electron": "^11.2.1",
+		"nodemon": "^3.1.9"
+	}
+}
--- a/day02-correspond-between-render-thread/subWin1.html
+++ b/day02-correspond-between-render-thread/subWin1.html
@@ -0,0 +1,14 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>subWin1</title>
+</head>
+<body>
+    <h2>当前窗口2</h2>
+    获取到index.html的数据：<input type="text" name="" id="txt">
+    <br><br>
+    <button id="btn">发送数据</button>
+    <script src="subWin1.js"></script>
+</body>
+</html>
--- a/day02-correspond-between-render-thread/subWin1.js
+++ b/day02-correspond-between-render-thread/subWin1.js
@@ -0,0 +1,20 @@
+const { ipcRenderer } = require('electron')
+
+window.onload = () => {
+    let oInput = document.getElementById('txt')
+    let val = localStorage.getItem('name')
+
+    oInput.value = val
+
+    // 在 sub 中发送数据给 index.js
+    let oBtn = document.getElementById('btn')
+
+    oBtn.addEventListener('click', () => {
+        ipcRenderer.send('stm', '来自于sub进程')
+    })
+
+    // 接收数据
+    ipcRenderer.on('its', (_, data) => {
+        alert(data)
+    })
+}