Electron是什么？
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux
安装要求：
- 代码编辑器
- 命令行工具，如terminal
- git
- node.js与npm。请使用平台预构建的 Node.js 安装器来进行安装， 否则，可能会遇到与不同开发工具不兼容的问题。虽然需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 不使用系统的 Node.js 环境来运行它的代码。 相反地，它使用它内置的 Node.js 运行时。 这意味着您的终端用户不需要 Node.js 环境也可以运行应用。
创建项目：
-
初始化项目
mkdir my-electron-app && cd my-electron-app npm init npm install electron --save-dev这时候报错：RequestError: connect ETIMEDOUT 20.205.243.166:443
尝试：npm config set registry https://registry.npm.taobao.org/，无效
尝试：修改hosts文件，解决
-
编辑package.json
{ "name": "my-electron-app", "version": "1.0.0", "description": "Hello World!", "main": "main.js", "author": "Jane Doe", "license": "MIT", "scripts": { "start": "electron ." }, "devDependencies": { "electron": "^19.0.0" } } -
编写main.js文件
console.log(`欢迎来到 Electron 👋`)
-
运行
npm run start出现乱码
解决方式：chcp 65001
-
运行成功后，尝试写入BrowserWindow
新建index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" /> <title>Hello from Electron renderer!</title> </head> <body> <h1>Hello from Electron renderer!</h1> <p>👋</p> </body> </html> -
修改main.js
const { app, BrowserWindow } = require('electron') const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, }) win.loadFile('index.html') } //也可以采用app.whenReady()来实现 app.on('ready').then(() => { createWindow() // 即使没有打开任何窗口，macOS 应用通常也会继续运行。 在没有窗口可用时调用 app 会打开一个新窗口。为了实现这一特性，可以监听模组的 activate 事件，如果没有任何活动的 BrowserWindow，调用 createWindow() 方法新建一个。因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 要实现这个，仅监听 whenReady() 回调即可。 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }) //如果所有窗口都关闭，则退出应用 app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() }) -
使用vscode实现调试功能
新建.vscode\launch.json
{ "version": "0.2.0", "compounds": [ { "name": "Main + renderer", "configurations": ["Main", "Renderer"], "stopAll": true } ], "configurations": [ { "name": "Renderer", "port": 9222, "request": "attach", "type": "chrome", "webRoot": "${workspaceFolder}" }, { "name": "Main", "type": "node", "request": "launch", "cwd": "${workspaceFolder}", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" }, "args": [".", "--remote-debugging-port=9222"], "outputCapture": "std", "console": "integratedTerminal" } ] }使用vscode打开当前文件夹
在调试栏选择选项 Main+renderer
- Main 用来运行主程序，并且暴露出 9222 端口用于远程调试 (--remote-debugging-port=9222) 。 我们将把调试器绑定到那个端口来调试 renderer 。 因为主进程是 Node.js 进程，类型被设置为 node。
- Renderer 用来调试渲染器进程。 因为后者是由主进程创建的，我们要把它 “绑定” 到主进程上 ()"request": "attach"，而不是创建一个新的。 渲染器是 web 进程，因此要选择 chrome 调试器。
- Main + renderer 是一个 复合任务，可同时执行前两个任务。
这样按F5即可启动调试应用
网友评论