Electron 12 学习（二）Electron 12 安装与配置

2abd804d · 徐晓伟 · 48ee0554 · 2abd804d · 2abd804d · 2abd804d
隐藏空白更改
内联并排

Showing with 61 addition and 1 deletion

index.html index.html +16 -0

index.js index.js +30 -0

package.json package.json +5 -1

preload.js preload.js +10 -0

未找到文件。
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>Hello World!</title>
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
+</head>
+<body style="background: white;">
+<h1>Hello World!</h1>
+<p>
+    We are using Node.js <span id="node-version"></span>,
+    Chromium <span id="chrome-version"></span>,
+    and Electron <span id="electron-version"></span>.
+</p>
+</body>
+</html>
--- a/index.js
+++ b/index.js
+const { app, BrowserWindow } = require('electron')
+const path = require('path')
+
+function createWindow () {
+    const win = new BrowserWindow({
+        width: 800,
+        height: 600,
+        webPreferences: {
+            preload: path.join(__dirname, 'preload.js')
+        }
+    })
+
+    win.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+    createWindow()
+
+    app.on('activate', () => {
+        if (BrowserWindow.getAllWindows().length === 0) {
+            createWindow()
+        }
+    })
+})
+
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit()
+    }
+})
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
  "description": "Electron 12 学习",
  "main": "index.js",
  "scripts": {
+    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
@@ -18,5 +19,8 @@
  "bugs": {
    "url": "https://github.com/xuxiaowei-com-cn/Electron-12-Study/issues"
  },
-  "homepage": "https://github.com/xuxiaowei-com-cn/Electron-12-Study#readme"
+  "homepage": "https://github.com/xuxiaowei-com-cn/Electron-12-Study#readme",
+  "devDependencies": {
+    "electron": "^12.0.9"
+  }
 }
--- a/preload.js
+++ b/preload.js
+window.addEventListener('DOMContentLoaded', () => {
+    const replaceText = (selector, text) => {
+        const element = document.getElementById(selector)
+        if (element) element.innerText = text
+    }
+
+    for (const type of ['chrome', 'node', 'electron']) {
+        replaceText(`${type}-version`, process.versions[type])
+    }
+})