HTML\uff08\u8d85\u6587\u672c\u6807\u8bb0\u8bed\u8a00\uff09\u662f\u4e00\u79cd\u7528\u4e8e\u521b\u5efa\u7f51\u9875\u7684\u6807\u8bb0\u8bed\u8a00\uff0c\u5e38\u7528\u4e8e\u7f51\u7ad9\u7684\u524d\u7aef\u8bbe\u8ba1\u3002\u7136\u800c\uff0cHTML\u4e5f\u53ef\u4ee5\u7528\u4e8e\u521b\u5efa\u684c\u9762\u5e94\u7528\u7a0b\u5e8f\uff0c\u8fd9\u79cd\u5e94\u7528\u7a0b\u5e8f\u53ef\u4ee5\u5728\u64cd\u4f5c\u7cfb\u7edf\u4e0a\u8fd0\u884c\uff0c\u5c31\u50cf\u5176\u4ed6\u672c\u5730\u5e94\u7528\u7a0b\u5e8f\u4e00\u6837\u3002<\/p>\n
HTML\u684c\u9762\u5e94\u7528\u7a0b\u5e8f\u7684\u5b9e\u73b0\u539f\u7406\u662f\u57fa\u4e8eElectron\u6280\u672f\uff0c\u5b83\u662f\u4e00\u4e2a\u8de8\u5e73\u53f0\u6846\u67b6\uff0c\u7528\u4e8e\u5f00\u53d1\u684c\u9762\u5e94\u7528\u7a0b\u5e8f\u3002Electron\u4f7f\u7528HTML\uff0cCSS\u548cJavaScript\u6765\u6784\u5efa\u5e94\u7528\u7a0b\u5e8f\uff0c\u53ef\u4ee5\u5728Windows\u3001macOS\u548cLinux\u7b49\u64cd\u4f5c\u7cfb\u7edf\u4e0a\u8fd0\u884c\u3002<\/p>\n
\u4e0b\u9762\uff0c\u6211\u4eec\u5c06\u8be6\u7ec6\u4ecb\u7ecdHTML\u684c\u9762\u5e94\u7528\u7a0b\u5e8f\u7684\u5b9e\u73b0\u539f\u7406\uff1a<\/p>\n
1. \u5b89\u88c5Electron<\/p>\n
\u5728\u5f00\u59cb\u521b\u5efaHTML\u684c\u9762\u5e94\u7528\u7a0b\u5e8f\u4e4b\u524d\uff0c\u9700\u8981\u5148\u5b89\u88c5Electron\u3002\u53ef\u4ee5\u901a\u8fc7npm\uff08Node.js\u5305\u7ba1\u7406\u5668\uff09\u6765\u5b89\u88c5Electron\uff0c\u5177\u4f53\u6b65\u9aa4\u5982\u4e0b\uff1a<\/p>\n
“`<\/p>\n
npm install electron –save-dev<\/p>\n
“`<\/p>\n
\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u4f1a\u5728\u9879\u76ee\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2anode_modules\u6587\u4ef6\u5939\uff0c\u5176\u4e2d\u5305\u542bElectron\u7684\u6240\u6709\u6587\u4ef6\u548c\u4f9d\u8d56\u9879\u3002<\/p>\n
2. \u521b\u5efa\u5e94\u7528\u7a0b\u5e8f<\/p>\n
\u521b\u5efa\u5e94\u7528\u7a0b\u5e8f\u7684\u7b2c\u4e00\u6b65\u662f\u521b\u5efa\u4e00\u4e2a\u4e3b\u8fdb\u7a0b\uff08Main Process\uff09\uff0c\u8fd9\u4e2a\u8fdb\u7a0b\u5c06\u8d1f\u8d23\u7ba1\u7406\u5e94\u7528\u7a0b\u5e8f\u7684\u6240\u6709\u529f\u80fd\u3002\u53ef\u4ee5\u4f7f\u7528JavaScript\u6765\u7f16\u5199\u4e3b\u8fdb\u7a0b\u4ee3\u7801\uff0c\u5e76\u5c06\u5176\u4fdd\u5b58\u4e3amain.js\u6587\u4ef6\u3002\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u4e3b\u8fdb\u7a0b\u4ee3\u7801\u793a\u4f8b\uff1a<\/p>\n
“`<\/p>\n
const { app, BrowserWindow } = require(‘electron’)<\/p>\n
function createWindow () {<\/p>\n
const mainWindow = new BrowserWindow({<\/p>\n
width: 800,<\/p>\n
height: 600,<\/p>\n
webPreferences: {<\/p>\n
nodeIntegration: true<\/p>\n
}<\/p>\n
})<\/p>\n
mainWindow.loadFile(‘index.html’)<\/p>\n
}<\/p>\n
app.whenReady().then(() => {<\/p>\n
createWindow()<\/p>\n
app.on(‘activate’, function () {<\/p>\n
if (BrowserWindow.getAllWindows().length === 0) createWindow()<\/p>\n
})<\/p>\n
})<\/p>\n
app.on(‘window-all-closed’, function () {<\/p>\n
if (process.platform !== ‘darwin’) app.quit()<\/p>\n
})<\/p>\n
“`<\/p>\n
\u8fd9\u6bb5\u4ee3\u7801\u521b\u5efa\u4e86\u4e00\u4e2a\u7a97\u53e3\uff08BrowserWindow\uff09\uff0c\u5e76\u5c06\u5176\u5927\u5c0f\u8bbe\u7f6e\u4e3a800×600\u50cf\u7d20\u3002\u7a97\u53e3\u5c06\u52a0\u8f7dindex.html\u6587\u4ef6\uff0c\u8be5\u6587\u4ef6\u5c06\u6210\u4e3a\u5e94\u7528\u7a0b\u5e8f\u7684\u4e3b\u754c\u9762\u3002\u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u8fd8\u542f\u7528\u4e86nodeIntegration\uff0c\u8fd9\u5c06\u5141\u8bb8\u6211\u4eec\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528Node.js\u6a21\u5757\u3002<\/p>\n
3. \u521b\u5efa\u754c\u9762<\/p>\n
\u521b\u5efa\u5e94\u7528\u7a0b\u5e8f\u7684\u4e0b\u4e00\u6b65\u662f\u521b\u5efa\u7528\u6237\u754c\u9762\u3002\u53ef\u4ee5\u4f7f\u7528HTML\uff0cCSS\u548cJavaScript\u6765\u6784\u5efa\u7528\u6237\u754c\u9762\u3002\u53ef\u4ee5\u5c06HTML\u6587\u4ef6\u4fdd\u5b58\u5728\u5e94\u7528\u7a0b\u5e8f\u7684\u76ee\u5f55\u4e2d\uff0c\u5e76\u5728\u4e3b\u8fdb\u7a0b\u4ee3\u7801\u4e2d\u6307\u5b9a\u8be5\u6587\u4ef6\u4f5c\u4e3a\u5e94\u7528\u7a0b\u5e8f\u7684\u4e3b\u754c\u9762\u3002<\/p>\n
\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684HTML\u754c\u9762\u793a\u4f8b\uff1a<\/p>\n
“`<\/p>\n<\/p>\n
\n
\n