Electron是什么？
Electron是一個(gè)使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架。 嵌入 Chromium 和 Node.js 到 二進(jìn)制的 Electron 允許您保持一個(gè) JavaScript 代碼代碼庫(kù)并創(chuàng)建 在Windows上運(yùn)行的跨平臺(tái)應(yīng)用 macOS和Linux
安裝要求：
- 代碼編輯器
- 命令行工具，如terminal
- git
- node.js與npm。請(qǐng)使用平臺(tái)預(yù)構(gòu)建的 Node.js 安裝器來進(jìn)行安裝， 否則，可能會(huì)遇到與不同開發(fā)工具不兼容的問題。雖然需要在開發(fā)環(huán)境安裝 Node.js 才能編寫 Electron 項(xiàng)目，但是 Electron 不使用系統(tǒng)的 Node.js 環(huán)境來運(yùn)行它的代碼。 相反地，它使用它內(nèi)置的 Node.js 運(yùn)行時(shí)。 這意味著您的終端用戶不需要 Node.js 環(huán)境也可以運(yùn)行應(yīng)用。
創(chuàng)建項(xiàng)目：
-
初始化項(xiàng)目
mkdir my-electron-app && cd my-electron-app npm init npm install electron --save-dev這時(shí)候報(bào)錯(cuò)：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 ??`)
-
運(yùn)行
npm run start出現(xiàn)亂碼
解決方式：chcp 65001
-
運(yùn)行成功后，嘗試寫入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()來實(shí)現(xiàn) app.on('ready').then(() => { createWindow() // 即使沒有打開任何窗口，macOS 應(yīng)用通常也會(huì)繼續(xù)運(yùn)行。 在沒有窗口可用時(shí)調(diào)用 app 會(huì)打開一個(gè)新窗口。為了實(shí)現(xiàn)這一特性，可以監(jiān)聽模組的 activate 事件，如果沒有任何活動(dòng)的 BrowserWindow，調(diào)用 createWindow() 方法新建一個(gè)。因?yàn)榇翱跓o法在 ready 事件前創(chuàng)建，你應(yīng)當(dāng)在你的應(yīng)用初始化后僅監(jiān)聽 activate 事件。 要實(shí)現(xiàn)這個(gè)，僅監(jiān)聽 whenReady() 回調(diào)即可。 app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); }) //如果所有窗口都關(guān)閉，則退出應(yīng)用 app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() }) -
使用vscode實(shí)現(xiàn)調(diào)試功能
新建.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打開當(dāng)前文件夾
在調(diào)試欄選擇選項(xiàng) Main+renderer
- Main 用來運(yùn)行主程序，并且暴露出 9222 端口用于遠(yuǎn)程調(diào)試 (--remote-debugging-port=9222) 。 我們將把調(diào)試器綁定到那個(gè)端口來調(diào)試 renderer 。 因?yàn)橹鬟M(jìn)程是 Node.js 進(jìn)程，類型被設(shè)置為 node。
- Renderer 用來調(diào)試渲染器進(jìn)程。 因?yàn)楹笳呤怯芍鬟M(jìn)程創(chuàng)建的，我們要把它 “綁定” 到主進(jìn)程上 ()"request": "attach"，而不是創(chuàng)建一個(gè)新的。 渲染器是 web 進(jìn)程，因此要選擇 chrome 調(diào)試器。
- Main + renderer 是一個(gè) 復(fù)合任務(wù)，可同時(shí)執(zhí)行前兩個(gè)任務(wù)。
這樣按F5即可啟動(dòng)調(diào)試應(yīng)用
