创建electron应用
Electron就是可以讓你用Javascript、HTML、CSS來編寫運(yùn)行于Windows、macOS、Linux系統(tǒng)之上的桌面應(yīng)用的庫
設(shè)置目錄
your-app/ ├── package.json ├── main.js └── index.html創(chuàng)建package.json
npm init安裝Electron
cnpm install electron --save-dev修改package.json，增加start命令指向electron，設(shè)定入口為main.js，參照下面代碼:
"main": "main.js", "scripts": {"start": "electron ." }創(chuàng)建最簡Electron項(xiàng)目
創(chuàng)建main.js文件，添加下面的代碼。
創(chuàng)建index.html文件，添加下面的代碼。
終端運(yùn)行命令npm start,這時(shí)會(huì)彈出一個(gè)應(yīng)用窗口（本質(zhì)是一個(gè)瀏覽器），顯示了hello electron文字（來自index.html頁面）。
main.js
const {app, BrowserWindow} = require('electron');let win;function createWindow() {//創(chuàng)建瀏覽器窗口win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}})//加載index.htmlwin.loadFile('index.html')//打開開發(fā)者工具win.webContents.openDevTools()//當(dāng)window被關(guān)閉，這個(gè)事件會(huì)被觸發(fā)win.on('closed', () => {//取消引用window對(duì)象win = null}) }//electron 會(huì)在初始化后準(zhǔn)備 創(chuàng)建瀏覽器窗口時(shí)，調(diào)用這個(gè)函數(shù) // 部分 API 在 ready 事件觸發(fā)后才能使用。 app.on('ready', createWindow)//當(dāng)全部窗口關(guān)閉時(shí)退出 app.on('window-all-closed', () => {// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，// 否則絕大部分應(yīng)用及其菜單欄會(huì)保持激活。if (process.platform !== 'darwin') app.quit() })app.on('activate', () => {// 在macOS上，當(dāng)單擊dock圖標(biāo)并且沒有其他窗口打開時(shí)，// 通常在應(yīng)用程序中重新創(chuàng)建一個(gè)窗口。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>打包發(fā)布MacOS應(yīng)用
復(fù)制node_modules文件夾下electron/dist/Electron.app到項(xiàng)目下out文件夾里面。（之所以用out是上面再.gitignore里面我們讓git忽略了這個(gè)文件夾）
右鍵Electron.app顯示包內(nèi)容，進(jìn)入到contents/Resources文件夾，新建一個(gè)app文件夾，這里就是放置所有頁面的地方。
把項(xiàng)目里面的package.json,main.js,index.html文件拷貝到app文件夾。
然后你可以把Electron.app重命名任意名字，拷貝到任意地方，運(yùn)行起來都是我們上面編寫的效果。
你可以從網(wǎng)上下載icns蘋果系統(tǒng)專用的圖標(biāo)文件，覆蓋Electron.app報(bào)內(nèi)容里面contents/Resources內(nèi)的electron.icns，然后Electron.app被復(fù)制到其他地方時(shí)候圖標(biāo)就會(huì)改變。
https://www.easyicon.net/covert/在線把png圖片轉(zhuǎn)為icns圖標(biāo)
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的创建electron应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css选择器 pa,p~a,p+a区别
- 下一篇： 用electron-forge创建一个项