`<\/p>\n
\u5176\u4e2d\uff0c`index.html` \u662f HTML \u9875\u9762\uff0c`styles.css` \u662f CSS \u6837\u5f0f\u6587\u4ef6\uff0c`main.js` \u662f\u63a7\u5236 Electron \u7684 JavaScript \u6587\u4ef6\u3002`package.json` \u6587\u4ef6\u5305\u542b\u5e94\u7528\u7a0b\u5e8f\u76f8\u5173\u4fe1\u606f\u3002<\/p>\n
4. \u7f16\u5199 package.json\uff1a<\/p>\n
“`<\/p>\n
{<\/p>\n
“name”: “your-app”,<\/p>\n
“version”: “1.0.0”,<\/p>\n
“main”: “app\/main.js”,<\/p>\n
“scripts”: {<\/p>\n
“start”: “electron app”<\/p>\n
},<\/p>\n
“dependencies”: {<\/p>\n
“electron”: “^9.0.0”<\/p>\n
}<\/p>\n
}<\/p>\n
“`<\/p>\n
5. \u7f16\u5199 main.js\uff1a<\/p>\n
“`<\/p>\n
const { app, BrowserWindow } = require(‘electron’);<\/p>\n
function createWindow() {<\/p>\n
const win = new BrowserWindow({<\/p>\n
width: 800,<\/p>\n
height: 600,<\/p>\n
webPreferences: {<\/p>\n
nodeIntegration: true<\/p>\n
}<\/p>\n
});<\/p>\n
win.loadFile(‘app\/index.html’);<\/p>\n
}<\/p>\n
app.whenReady().then(createWindow);<\/p>\n
app.on(‘window-all-closed’, () => {<\/p>\n
if (process.platform !== ‘darwin’) {<\/p>\n
app.quit();<\/p>\n
}<\/p>\n
});<\/p>\n
app.on(‘activate’, () => {<\/p>\n
if (BrowserWindow.getAllWindows().length === 0) {<\/p>\n
createWindow();<\/p>\n
}<\/p>\n
});<\/p>\n
“`<\/p>\n
6. \u7f16\u5199 index.html \u548c styles.css\uff1a\u521b\u5efaHTML\u9875\u9762\u53ca\u5176\u6837\u5f0f\u8868\u3002<\/p>\n
7. \u6253\u5305\u5e94\u7528\uff1a\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n
“`<\/p>\n
npm install<\/p>\n
npm run start<\/p>\n
“`<\/p>\n
Electron \u5e94\u7528\u7a0b\u5e8f\u5c06\u5f00\u59cb\u8fd0\u884c\u3002<\/p>\n
8. \u4f7f\u7528 [electron-builder](https:\/\/www.electron.build\/) \u8fdb\u884c\u6253\u5305\u3002\u9996\u5148\uff0c\u5b89\u88c5 electron-builder\uff1a<\/p>\n
“`<\/p>\n
npm install electron-builder –save-dev<\/p>\n
“`<\/p>\n
\u63a5\u7740\uff0c\u4fee\u6539 `package.json`\uff0c\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\uff1a<\/p>\n
“`<\/p>\n
“build”: {<\/p>\n
“appId”: “your.id”,<\/p>\n
“mac”: {<\/p>\n
“category”: “your.app.category.type”<\/p>\n
}<\/p>\n
},<\/p>\n
“scripts”: {<\/p>\n
“pack”: “electron-builder –dir”,<\/p>\n
“dist”: “electron-builder”<\/p>\n
},<\/p>\n
“`<\/p>\n
\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u521b\u5efa EXE \u6587\u4ef6\uff1a<\/p>\n
“`<\/p>\n
npm run dist<\/p>\n
“`<\/p>\n<\/p>\n
\u7a0b\u5e8f\u5c06\u751f\u6210 EXE \u6587\u4ef6\uff0c\u4f4d\u7f6e\u5728 `dist` \u6587\u4ef6\u5939\u4e2d\u3002<\/p>\n
2. \u4f7f\u7528 nw.js<\/p>\n
[nw.js](https:\/\/nwjs.io\/) \u662f\u53e6\u4e00\u4e2a\u5c06 HTML \u6253\u5305\u6210 EXE \u6587\u4ef6\u7684\u89e3\u51b3\u65b9\u6848\u3002\u5b83\u4f7f\u7528 Chromium \u548c Node.js \u5c06\u4f60\u7684 Web \u5e94\u7528\u7a0b\u5e8f\u5c01\u88c5\u6210\u4e00\u4e2a\u53ef\u6267\u884c\u6587\u4ef6\u3002\u9075\u5faa nw.js \u7684 [\u5b98\u65b9\u6587\u6863](https:\/\/nwjs.readthedocs.io\/en\/latest\/) \u8fdb\u884c\u64cd\u4f5c\u3002<\/p>\n
#### \u7ed3\u8bba<\/p>\n
\u65e0\u8bba\u4f60\u9009\u62e9 Electron \u8fd8\u662f nw.js\uff0c\u65b9\u6cd5\u90fd\u7c7b\u4f3c\u3002\u6838\u5fc3\u601d\u8def\u662f\u5c06 HTML \u9875\u9762\u3001CSS \u6837\u5f0f\u6587\u4ef6\u4e0e JavaScript \u811a\u672c\u6253\u5305\u5230\u4e00\u4e2a\u72ec\u7acb\u7684\u6d4f\u89c8\u5668\u5f15\u64ce\u4e2d\uff0c\u4ece\u800c\u751f\u6210\u8de8\u5e73\u53f0\u7684\u53ef\u6267\u884c\u6587\u4ef6\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
### HTML \u6253\u5305\u6210 EXE \u6587\u4ef6\uff08\u539f\u7406\u4e0e\u8be6\u7ec6\u4ecb\u7ecd\uff09\u5c06 HTML \u9875\u9762\u6253\u5305\u6210 EXE \u53ef\u6267\u884c\u6587\u4ef6\u53ef\u4ee5\u8ba9\u7528\u6237\u5728\u6ca1\u6709\u5b89\u88c5\u6d4f\u89c8\u5668\u7684\u60c5\u51b5\u4e0b\u4e5f\u53ef\u8fd0\u884c\u5e76\u67e5\u770b\u7f51\u9875\u5185\u5bb9\u3002\u8fd9\u5728\u67d0\u4e9b\u7279\u5b9a\u573a\u666f\u4e0b\u975e\u5e38\u6709\u7528\uff0c\u4f8b\u5982\u521b\u5efa\u72ec\u7acb<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[3620,3619,11,81,290],"topic":[],"class_list":["post-1708","post","type-post","status-publish","format-standard","hentry","category-ruanjiankf","tag-keil5exe","tag-windows","tag-11","tag-81","tag-290"],"_links":{"self":[{"href":"https:\/\/h5app.yimenapp.cn\/h5app\/wp-json\/wp\/v2\/posts\/1708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/h5app.yimenapp.cn\/h5app\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/h5app.yimenapp.cn\/h5app\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/h5app.yimenapp.cn\/h5app\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/h5app.yimenapp.cn\/h5app\/wp-json\/wp\/v2\/comments?post=1708"}],"version-history":[{"count":0,"href":"https:\/\/h5app.yimenapp.cn\/h5app\/wp-json\/wp\/v2\/posts\/1708\/revisions"}],"wp:attachment":[{"href":"https:\/\/h5app.yimenapp.cn\/h5app\/wp-json\/wp\/v2\/media?parent=1708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/h5app.yimenapp.cn\/h5app\/wp-json\/wp\/v2\/categories?post=1708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/h5app.yimenapp.cn\/h5app\/wp-json\/wp\/v2\/tags?post=1708"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/h5app.yimenapp.cn\/h5app\/wp-json\/wp\/v2\/topic?post=1708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![](\"https:\/\/i.cdn.yimenapp.com\/2023-03\/28\/13\/01907526144.jpg\")
<\/figure>\n<\/p>\n