本文基於Windows進行開發的過程,記錄下來,以便往後使用,Electron官網:https://electronjs.org/docshtml
進入官網下載、安裝。https://nodejs.org/en/node
安裝命令(打開系統的cmd.exe來執行命令): npm install -g cnpm --registry=https://registry.npm.taobao.org git
安裝命令: cnpm install -g electron github
Electron工具整合項目:https://github.com/electron-userland/electron-forgeweb
安裝命令: cnpm install -g electron-forge npm
F盤新建Electron項目文件夾 F:\Electron。json
在Electron文件夾下,按住Shift鍵並右鍵單擊空白處,選擇在此處打開命令窗口來啓動cmd.exe。瀏覽器
執行 electron-forge init 項目名稱 命令來生成名爲myapp的項目文件夾,同時安裝項目所須要的模塊、依賴項等。app
命令: electron-forge init myapp electron
cd到myapp目錄下,執行命令 electron-forge start 來啓動app(也能夠簡單的用npm start來運行)。
項目的目錄結構:node_modules 文件夾下是各類模塊、類庫,src下是app的源代碼文件,package.json是描述包的文件。
src/index.js:這是app主進程的入口,在這裏建立了mainWindow瀏覽器窗口,
使用mainWindow.loadURL(\file://${__dirname}/index.html`)來加載index.html主頁,
咱們也能夠在此連接咱們須要連接的網址,來實現web桌面應用,例:mainWindow.loadURL(`https://www.cnblogs.com/`),
使用mainWindow.webContents.openDevTools()`來打開開發者工具用於調試(這個操做一般在發佈app時刪除)。
而後是app的事件處理:
ready: 當Electron完成初始化後觸發,這裏初始化後就會去建立瀏覽器窗口並加載主頁面。
window-all-closed: 當全部瀏覽器窗口被關閉後觸發,通常此時就退出應用了。
activate: 當app激活時觸發,通常針對macOS要須要處理。
src/index.html:這是主頁面,除了顯示Well hey there!!!的信息外,沒什麼具體內容。
"productName": "myapp" 打包後的文件名稱
"version": "1.0.0" 版本號
若想更換打包程序的圖標,能夠在config->electronPackagerConfig->icon中進行設置,
(例如:咱們把app.ico放在src目錄下就能夠這樣配置"icon":"src/favicon.ico")
輸入如下命令進行編譯打包: npm run make
修改package.json,在electronPackagerConfig部分添加"asar": true。
"electronPackagerConfig": {
"asar": true
}
從新打包後源碼文件會被打包進app.asar文件中(該文件仍然在src目錄下)。
能夠直接運行打包後的myapp.exe啓動程序