使用Electron将html网页转为exe可执行文件(全屏, 遮住任务栏, Esc退出, exe的图标/文件名修改)
生活随笔
收集整理的這篇文章主要介紹了
使用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文件
修改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安裝是否正確
創建一個文件夾并安裝Electron (用cmd黑窗口)
mkdir my-electron-app && cd my-electron-app npm init -y npm 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('https://www.baidu.com') // 網頁// 全屏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種情況
總結
以上是生活随笔為你收集整理的使用Electron将html网页转为exe可执行文件(全屏, 遮住任务栏, Esc退出, exe的图标/文件名修改)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网站服务器带宽2m怎么样,云服务器带宽2
- 下一篇： fortran教程9：和C语言混合编程