{"id":4591,"date":"2019-08-04T12:08:26","date_gmt":"2019-08-04T04:08:26","guid":{"rendered":"https:\/\/ixyzero.com\/blog\/?p=4591"},"modified":"2019-08-04T12:08:26","modified_gmt":"2019-08-04T04:08:26","slug":"electron-%e5%bf%ab%e9%80%9f%e5%85%a5%e9%97%a8","status":"publish","type":"post","link":"https:\/\/ixyzero.com\/blog\/archives\/4591.html","title":{"rendered":"Electron \u5feb\u901f\u5165\u95e8"},"content":{"rendered":"\n

=Start=<\/p>\n\n\n\n

\u7f18\u7531\uff1a<\/h4>\n\n\n\n

\u5b66\u4e60\u4e86\u89e3\u4e00\u4e0bElectron\u662f\u4ec0\u4e48\uff0c\u80fd\u505a\u4ec0\u4e48\uff0c\u4ee3\u7801\u8be5\u600e\u4e48\u5199\uff0c\u65b9\u4fbf\u4ee5\u540e\u53c2\u8003\u3002<\/p>\n\n\n\n

\u6b63\u6587\uff1a<\/h4>\n\n\n\n

\u53c2\u8003\u89e3\u7b54\uff1a<\/h5>\n\n\n\n
1\u3001Electron\u662f\u4ec0\u4e48\uff1f<\/h6>\n\n\n\n

Electron<\/a>\u662f\u7531Github\u5f00\u53d1\uff0c\u7528HTML\uff0cCSS\u548cJavaScript\u6765\u6784\u5efa\u8de8\u5e73\u53f0\u684c\u9762\u5e94\u7528\u7a0b\u5e8f\u7684\u4e00\u4e2a\u5f00\u6e90\u5e93\u3002<\/strong>Electron\u901a\u8fc7\u5c06Chromium<\/a>\u548cNode.js<\/a>\u5408\u5e76\u5230\u540c\u4e00\u4e2a\u8fd0\u884c\u65f6\u73af\u5883\u4e2d\uff0c\u5e76\u5c06\u5176\u6253\u5305\u4e3aMac\uff0cWindows\u548cLinux\u7cfb\u7edf\u4e0b\u7684\u5e94\u7528\u6765\u5b9e\u73b0\u8fd9\u4e00\u76ee\u7684\u3002<\/p>\n\n\n\n

2\u3001Electron\u80fd\u505a\u4ec0\u4e48\uff1f<\/h6>\n\n\n\n

Electron \u53ef\u4ee5\u8ba9\u4f60\u4f7f\u7528\u7eaf JavaScript \u8c03\u7528\u4e30\u5bcc\u7684\u539f\u751f(\u64cd\u4f5c\u7cfb\u7edf) APIs \u6765\u521b\u9020\u684c\u9762\u5e94\u7528\u3002<\/strong>\u4f60\u53ef\u4ee5\u628a\u5b83\u770b\u4f5c\u4e00\u4e2a Node. js \u7684\u53d8\u4f53\uff0c\u5b83\u4e13\u6ce8\u4e8e\u684c\u9762\u5e94\u7528\u800c\u4e0d\u662f Web \u670d\u52a1\u5668\u7aef\u3002<\/p>\n\n\n\n

\u8fd9\u4e0d\u610f\u5473\u7740 Electron \u662f\u67d0\u4e2a\u56fe\u5f62\u7528\u6237\u754c\u9762\uff08GUI\uff09\u5e93\u7684 JavaScript \u7248\u672c\u3002 \u76f8\u53cd\uff0cElectron \u4f7f\u7528 web \u9875\u9762\u4f5c\u4e3a\u5b83\u7684 GUI\uff0c\u6240\u4ee5\u4f60\u80fd\u628a\u5b83\u770b\u4f5c\u6210\u4e00\u4e2a\u88ab JavaScript \u63a7\u5236\u7684\uff0c\u7cbe\u7b80\u7248\u7684 Chromium \u6d4f\u89c8\u5668\u3002<\/strong><\/p>\n\n\n\n

3\u3001Electron\u5e94\u7528\u7684\u5f00\u53d1<\/strong><\/h6>\n\n\n\n

\u2460\u5f00\u53d1\u73af\u5883\u51c6\u5907<\/strong><\/p>\n\n\n\n

# \u4e0b\u9762\u8fd9\u884c\u7684\u547d\u4ee4\u4f1a\u6253\u5370\u51faNode.js\u7684\u7248\u672c\u4fe1\u606f
node -v

# \u4e0b\u9762\u8fd9\u884c\u7684\u547d\u4ee4\u4f1a\u6253\u5370\u51fanpm\u7684\u7248\u672c\u4fe1\u606f
npm -v

# \u5168\u5c40\u5b89\u88c5 electron \u7136\u540e\u67e5\u770b\u5176\u7248\u672c
npm install electron@latest -g
electron --version<\/pre>\n\n\n\n
\u2461\u4ee3\u7801\u76ee\u5f55\u7ed3\u6784<\/strong><\/p>\n\n\n\n
\u4ece\u5f00\u53d1\u7684\u89d2\u5ea6\u6765\u770b\uff0c Electron application \u672c\u8d28\u4e0a\u662f\u4e00\u4e2a Node. js \u5e94\u7528\u7a0b\u5e8f\u3002 \u4e0e Node.js \u6a21\u5757\u76f8\u540c\uff0c\u5e94\u7528\u7684\u5165\u53e3\u662f package.json<\/code> \u6587\u4ef6\u3002<\/strong>\u4e00\u4e2a\u6700\u57fa\u672c\u7684 Electron \u5e94\u7528\u4e00\u822c\u6765\u8bf4\u4f1a\u6709\u5982\u4e0b\u7684\u76ee\u5f55\u7ed3\u6784\uff1a<\/p>\n\n\n\n
your-app\/
\u251c\u2500\u2500 package.json
\u251c\u2500\u2500 main.js
\u2514\u2500\u2500 index.html<\/pre>\n\n\n\n
\u2462Demo\u5e94\u7528\u5f00\u53d1<\/strong><\/p>\n\n\n\n
\u4e3a\u4f60\u7684\u65b0Electron\u5e94\u7528\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u7a7a\u6587\u4ef6\u5939\u3002 \u6253\u5f00\u4f60\u7684\u547d\u4ee4\u884c\u5de5\u5177\uff0c\u7136\u540e\u5728\u8be5\u6587\u4ef6\u5939\u4e0b\u8fd0\u884cnpm init<\/code>\u547d\u4ee4\uff1a<\/p>\n\n\n\n
npm init<\/pre>\n\n\n\n
\u8be5 npm init \u547d\u4ee4\u4f1a\u5e2e\u52a9\u4f60\u521b\u5efa\u4e00\u4e2a\u57fa\u672c\u7684 package.json<\/code> \u6587\u4ef6\u3002<\/strong>\u5176\u4e2d\u7684 main<\/code> \u5b57\u6bb5\u6240\u8868\u793a\u7684\u811a\u672c\u4e3a\u5e94\u7528\u7684\u542f\u52a8\u811a\u672c\uff0c\u5b83\u5c06\u4f1a\u5728\u4e3b\u8fdb\u7a0b\u4e2d\u6267\u884c\u3002 \u5982\u4e0b\u7247\u6bb5\u662f\u4e00\u4e2a package.json<\/code> \u7684\u793a\u4f8b\uff1a<\/p>\n\n\n\n
{
\"name\": \"your-app\",
\"version\": \"0.1.0\",
\"main\": \"main.js\"
}<\/pre>\n\n\n\n
\u4e0b\u9762\u662f\u4e00\u4e2a\u7b80\u5355\u7684main.js<\/code>\u6587\u4ef6\uff0c\u5b83\u5c06\u5728\u5e94\u7528\u7a0b\u5e8f\u51c6\u5907\u5c31\u7eea\u540e\u6253\u5f00\u4e00\u4e2a\u7a97\u53e3\uff0c\u540c\u65f6\u6253\u5f00\u5f00\u53d1\u8005\u5de5\u5177\uff0c\u5e76\u6dfb\u52a0\u4e0a\u5904\u7406\u7a97\u53e3\u5173\u95ed\u4e8b\u4ef6\u3001\u5728macOS\u7528\u6237\u70b9\u51fbdock\u4e0a\u56fe\u6807\u65f6\u91cd\u5efa\u7a97\u53e3\u7684\u903b\u8f91\uff1a<\/p>\n\n\n\n
const { app, BrowserWindow } = require('electron')

\/\/ \u4fdd\u6301\u5bf9window\u5bf9\u8c61\u7684\u5168\u5c40\u5f15\u7528\uff0c\u5982\u679c\u4e0d\u8fd9\u4e48\u505a\u7684\u8bdd\uff0c\u5f53JavaScript\u5bf9\u8c61\u88ab
\/\/ \u5783\u573e\u56de\u6536\u7684\u65f6\u5019\uff0cwindow\u5bf9\u8c61\u5c06\u4f1a\u81ea\u52a8\u7684\u5173\u95ed
let win

function createWindow () {
\/\/ \u521b\u5efa\u6d4f\u89c8\u5668\u7a97\u53e3\u3002
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})

\/\/ \u52a0\u8f7dindex.html\u6587\u4ef6
win.loadFile('index.html')

\/\/ \u6253\u5f00\u5f00\u53d1\u8005\u5de5\u5177
win.webContents.openDevTools()

\/\/ \u5f53 window \u88ab\u5173\u95ed\uff0c\u8fd9\u4e2a\u4e8b\u4ef6\u4f1a\u88ab\u89e6\u53d1\u3002
win.on('closed', () => {
\/\/ \u53d6\u6d88\u5f15\u7528 window \u5bf9\u8c61\uff0c\u5982\u679c\u4f60\u7684\u5e94\u7528\u652f\u6301\u591a\u7a97\u53e3\u7684\u8bdd\uff0c
\/\/ \u901a\u5e38\u4f1a\u628a\u591a\u4e2a window \u5bf9\u8c61\u5b58\u653e\u5728\u4e00\u4e2a\u6570\u7ec4\u91cc\u9762\uff0c
\/\/ \u4e0e\u6b64\u540c\u65f6\uff0c\u4f60\u5e94\u8be5\u5220\u9664\u76f8\u5e94\u7684\u5143\u7d20\u3002
win = null
})
}

\/\/ Electron \u4f1a\u5728\u521d\u59cb\u5316\u540e\u5e76\u51c6\u5907
\/\/ \u521b\u5efa\u6d4f\u89c8\u5668\u7a97\u53e3\u65f6\uff0c\u8c03\u7528\u8fd9\u4e2a\u51fd\u6570\u3002
\/\/ \u90e8\u5206 API \u5728 ready \u4e8b\u4ef6\u89e6\u53d1\u540e\u624d\u80fd\u4f7f\u7528\u3002
app.on('ready', createWindow)

\/\/ \u5f53\u5168\u90e8\u7a97\u53e3\u5173\u95ed\u65f6\u9000\u51fa\u3002
app.on('window-all-closed', () => {
\/\/ \u5728 macOS \u4e0a\uff0c\u9664\u975e\u7528\u6237\u7528 Cmd + Q \u786e\u5b9a\u5730\u9000\u51fa\uff0c
\/\/ \u5426\u5219\u7edd\u5927\u90e8\u5206\u5e94\u7528\u53ca\u5176\u83dc\u5355\u680f\u4f1a\u4fdd\u6301\u6fc0\u6d3b\u3002
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
\/\/ \u5728macOS\u4e0a\uff0c\u5f53\u5355\u51fbdock\u56fe\u6807\u5e76\u4e14\u6ca1\u6709\u5176\u4ed6\u7a97\u53e3\u6253\u5f00\u65f6\uff0c
\/\/ \u901a\u5e38\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u91cd\u65b0\u521b\u5efa\u4e00\u4e2a\u7a97\u53e3\u3002
if (win === null) {
createWindow()
}
})

\/\/ \u5728\u8fd9\u4e2a\u6587\u4ef6\u4e2d\uff0c\u4f60\u53ef\u4ee5\u7eed\u5199\u5e94\u7528\u5269\u4e0b\u4e3b\u8fdb\u7a0b\u4ee3\u7801\u3002
\/\/ \u4e5f\u53ef\u4ee5\u62c6\u5206\u6210\u51e0\u4e2a\u6587\u4ef6\uff0c\u7136\u540e\u7528 require \u5bfc\u5165\u3002<\/pre>\n\n\n\n
\u7136\u540e\uff0c\u521b\u5efa\u4f60\u60f3\u5c55\u793a\u7684 index.html<\/code>\uff1a<\/p>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<meta charset=\"UTF-8\">
<title>Hello World!<\/title>
<\/head>
<body>
<h1>Hello World!<\/h1>
We are using node <script>document.write(process.versions.node)<\/script>,
Chrome <script>document.write(process.versions.chrome)<\/script>,
and Electron <script>document.write(process.versions.electron)<\/script>.
<\/body>
<\/html><\/pre>\n\n\n\n
\u5728\u521b\u5efa\u5e76\u521d\u59cb\u5316\u5b8c\u6210 main.js<\/code>\u3001 index.html<\/code>\u548cpackage.json<\/code>\u4e4b\u540e\uff0c\u60a8\u5c31\u53ef\u4ee5\u5728\u5f53\u524d\u5de5\u7a0b\u7684\u6839\u76ee\u5f55\u6267\u884c npm start<\/code> \u547d\u4ee4\u6765\u542f\u52a8\u521a\u521a\u7f16\u5199\u597d\u7684Electron\u7a0b\u5e8f\u4e86\u3002<\/p>\n\n\n\n
\n\n\n\n
\u4e00\u4e9b\u7b80\u5355\u7684\u77e5\u8bc6\u70b9\u548c\u6ce8\u610f\u4e8b\u9879\uff1a<\/p>\n\n\n\n
\u4e3b\u8fdb\u7a0b&\u6e32\u67d3\u8fdb\u7a0b<\/h6>\n\n\n\n