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

编程问答

创建electron应用

發布時間：2025/3/21 编程问答 13 豆豆

生活随笔收集整理的這篇文章主要介紹了创建electron应用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Electron就是可以讓你用Javascript、HTML、CSS來編寫運行于Windows、macOS、Linux系統之上的桌面應用的庫

設置目錄

your-app/ ├── package.json ├── main.js └── index.html

創建package.json

npm init

安裝Electron

cnpm install electron --save-dev

修改package.json，增加start命令指向electron，設定入口為main.js，參照下面代碼:

"main": "main.js", "scripts": {"start": "electron ." }

創建最簡Electron項目

創建main.js文件，添加下面的代碼。
創建index.html文件，添加下面的代碼。
終端運行命令npm start,這時會彈出一個應用窗口（本質是一個瀏覽器），顯示了hello electron文字（來自index.html頁面）。

main.js

const {app, BrowserWindow} = require('electron');let win;function createWindow() {//創建瀏覽器窗口win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}})//加載index.htmlwin.loadFile('index.html')//打開開發者工具win.webContents.openDevTools()//當window被關閉，這個事件會被觸發win.on('closed', () => {//取消引用window對象win = null}) }//electron 會在初始化后準備創建瀏覽器窗口時，調用這個函數 // 部分 API 在 ready 事件觸發后才能使用。 app.on('ready', createWindow)//當全部窗口關閉時退出 app.on('window-all-closed', () => {// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，// 否則絕大部分應用及其菜單欄會保持激活。if (process.platform !== 'darwin') app.quit() })app.on('activate', () => {// 在macOS上，當單擊dock圖標并且沒有其他窗口打開時，// 通常在應用程序中重新創建一個窗口。if (win === null) createWindow() })

index.html

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div>hello</div> </body></html>

打包發布MacOS應用

復制node_modules文件夾下electron/dist/Electron.app到項目下out文件夾里面。（之所以用out是上面再.gitignore里面我們讓git忽略了這個文件夾）
右鍵Electron.app顯示包內容，進入到contents/Resources文件夾，新建一個app文件夾，這里就是放置所有頁面的地方。
把項目里面的package.json,main.js,index.html文件拷貝到app文件夾。
然后你可以把Electron.app重命名任意名字，拷貝到任意地方，運行起來都是我們上面編寫的效果。
你可以從網上下載icns蘋果系統專用的圖標文件，覆蓋Electron.app報內容里面contents/Resources內的electron.icns，然后Electron.app被復制到其他地方時候圖標就會改變。

https://www.easyicon.net/covert/在線把png圖片轉為icns圖標

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀