當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用Electron将html网页转为exe可执行文件(全屏, 遮住任务栏, Esc退出, exe的图标/文件名修改)

發布時間：2024/1/8 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了使用Electron将html网页转为exe可执行文件(全屏, 遮住任务栏, Esc退出, exe的图标/文件名修改) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

成品源碼:

https://download.csdn.net/download/weixin_42960873/13130175

方法一:

基礎源碼下載 https://github.com/electron/electron-quick-start cd electron-quick-start npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install -g electron npm 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('https://www.baidu.com') // 網頁// 全屏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": "https://github.com/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 -v npm -v

創建一個文件夾并安裝Electron (用cmd黑窗口)

mkdir my-electron-app && cd my-electron-app npm init -y npm i --save-dev electron

創建主腳本文件main.js

修改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('https://www.baidu.com') // 方法三

總結

以上是生活随笔為你收集整理的使用Electron将html网页转为exe可执行文件(全屏, 遮住任务栏, Esc退出, exe的图标/文件名修改)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：网站服务器带宽2m怎么样,云服务器带宽2
下一篇： fortran教程9：和C语言混合编程