成品源码:
/download/weixin_42960873/13130175
方法一:
基础源码下载 /electron/electron-quick-startcd electron-quick-startnpm install -g cnpm --registry=pm install -g electronnpm start
修改main.js文件
const {app, globalShortcut, BrowserWindow} = require('electron')let mainWindow;app.on('ready', () => {// 界面控制mainWindow = new BrowserWindow({width: 800, height: 600, autoHideMenuBar: true // 隐藏菜单栏})// mainWindow.loadFile('index.html') // 网页mainWindow.loadURL('') // 网页// 全屏mainWindow.setFullScreen(true); // Esc退出全屏globalShortcut.register('ESC', () => {mainWindow.setFullScreen(false);})})
修改package.json文件
{"//": "设置exe文件的文件名","name": "robot","version": "1.0.0","description": "A minimal Electron application","main": "main.js","scripts": {"start": "electron-forge start","dist": "electron-builder --win --x64","electron_build": "electron-packager ./ --platform=win32 --arch=x64 --overwrite","package": "electron-forge package","make": "electron-forge make"},"repository": "/electron/electron-quick-start","keywords": ["Electron","quick","start","tutorial","demo"],"author": "GitHub","license": "CC0-1.0","devDependencies": {"@electron-forge/cli": "^6.0.0-beta.54","@electron-forge/maker-deb": "^6.0.0-beta.54","@electron-forge/maker-rpm": "^6.0.0-beta.54","@electron-forge/maker-squirrel": "^6.0.0-beta.54","@electron-forge/maker-zip": "^6.0.0-beta.54","electron": "^11.0.0"},"dependencies": {"electron-squirrel-startup": "^1.0.0"},"config": {"forge": {"packagerConfig": {"//": "设置exe文件的图标","icon": "robot"},"makers": [{"name": "@electron-forge/maker-squirrel","config": {"name": "electron_quick_start"}},{"name": "@electron-forge/maker-zip","platforms": ["darwin"]},{"name": "@electron-forge/maker-deb","config": {}},{"name": "@electron-forge/maker-rpm","config": {}}]}}}
全局安装我们的打包神器
npm install electron-packager -g
导入 Electron Forge 到您的应用文件夹
npx @electron-forge/cli import
开始打包 (exe文件在out文件夹)
npm run make
方法二:
检查Node.js安装是否正确
node -vnpm -v
创建一个文件夹并安装Electron (用cmd黑窗口)
mkdir my-electron-app && cd my-electron-appnpm init -ynpm i --save-dev electron
创建主脚本文件main.js
const {app, globalShortcut, BrowserWindow} = require('electron')let mainWindow;app.on('ready', () => {// 界面控制mainWindow = new BrowserWindow({width: 800, height: 600, autoHideMenuBar: true // 隐藏菜单栏})// mainWindow.loadFile('index.html') // 网页mainWindow.loadURL('') // 网页// 全屏mainWindow.setFullScreen(true); // Esc退出全屏globalShortcut.register('ESC', () => {mainWindow.setFullScreen(false);})})
修改package.js
{"name": "my-electron-app","version": "0.1.1","description": "xx","main": "main.js","scripts": {"start": "electron ."},"keywords": [],"author": "xx","license": "ISC","devDependencies": {"electron": "^11.0.1"}}
index.html (如果是网址的话, 这个可以不用)
<OCTYPE html><html><head><meta charset="UTF-8"><title>Hello World!</title><meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /></head><body><h1>Hello World！</h1>我们正在使用节点 <script>文档。 Rite(process.versions.node)</script>,Chrome <script>document.write(process.versions. hrome)</script>,and Electron <script>document.write(cess.versions.electron)</script>.</body></html>
运行您的应用程序
npm start
全局安装我们的打包神器
npm install electron-packager -g
导入 Electron Forge 到您的应用文件夹
npx @electron-forge/cli import
开始打包 (exe文件在out文件夹)
npm run make
说明:
main.js是配置桌面端应用的入口, 支持3种情况
mainWindow.loadFile('index.html') // 方法一
mainWindow.loadURL(url.format({// 方法二pathname: path.join(__dirname, 'index.html'),protocol: 'file:',slashes: true}))
mainWindow.loadURL('') // 方法三
如果觉得《使用Electron将html网页转为exe可执行文件(全屏 遮住任务栏 Esc退出 exe的图标/文件名修改)》对你有帮助，请点赞、收藏，并留下你的观点哦！
