注：當(dāng)package.json里不存在main時，Electron將會默認使用index.js
main.js是啟動你App的腳本，它將會開啟主進程，main.js應(yīng)當(dāng)創(chuàng)建一個窗口并處理系統(tǒng)事件。一個典型的例子如下：[javascript] view plain copy PRint?// 控制應(yīng)用生命周期的模塊 const {app} = electron; // 創(chuàng)建本地瀏覽器窗口的模塊 const {BrowserWindow} = electron; // 指向窗口對象的一個全局引用，如果沒有這個引用，那么當(dāng)該Javascript對象被垃圾回收的 // 時候該窗口將會自動關(guān)閉 let win; function createWindow() { // 創(chuàng)建一個新的瀏覽器窗口 win = new BrowserWindow({width: 1920, height: 1080}); // 并且裝載應(yīng)用的index.html頁面 win.loadURL(`file://${__dirname}/index.html`); // 打開開發(fā)工具頁面 //win.webContents.openDevTools(); // 當(dāng)窗口關(guān)閉時調(diào)用的方法 win.on('closed', () => { // 解除窗口對象的引用，通常而言如果應(yīng)用支持多個窗口的話，你會在一個數(shù)組里 // 存放窗口對象，在窗口關(guān)閉的時候應(yīng)當(dāng)刪除相應(yīng)的元素。 win = null; }); } // 當(dāng)Electron完成初始化并且已經(jīng)創(chuàng)建了瀏覽器窗口，則該方法將會被調(diào)用。 // 有些API只能在該事件發(fā)生后才能被使用。 app.on('ready', createWindow); /* var mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: false } }); */ // 當(dāng)所有的窗口被關(guān)閉后退出應(yīng)用 app.on('window-all-closed', () => { // 對于OS X系統(tǒng)，應(yīng)用和相應(yīng)的菜單欄會一直激活直到用戶通過Cmd + Q顯式退出 if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // 對于OS X系統(tǒng)，當(dāng)dock圖標(biāo)被點擊后會重新創(chuàng)建一個app窗口，并且不會有其他 // 窗口打開 if (win === null) { createWindow(); } }); 最后，index.html是你最終要展示的頁面[html] view plain copy print?<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using node <script>document.write(process.versions.node)</script>, Chrome <script>document.write(process.versions.chrome)</script>, and Electron <script>document.write(process.versions.electron)</script>. </body> </html>
就會出現(xiàn)如下圖的界面
預(yù)覽應(yīng)用，就是把app那個文件直接拖入到打開的 electron里面就可以查看效果了發(fā)布成exe的問題使用命令 npm install --save-dev electron-packager將electron-package安裝到項目的路徑下面
安裝完成后，package.json中會多出一條electron-package的版本號配置信息"devDependencies": { "electron-packager": "^6.0.0", "electron-prebuilt": "^0.37.3", "gulp": "^3.9.1" }electron-packager <location of project> <name of project> <platform> <architecture> <electron version><optional options>命令說明： * location of project：項目所在路徑 * name of project：打包的項目名字 * platform：確定了你要構(gòu)建哪個平臺的應(yīng)用（Windows、Mac 還是 linux） * architecture：決定了使用 x86 還是 x64 還是兩個架構(gòu)都用 * electron version：electron 的版本 * optional options：可選選項命令比較長，每次要是都用這個命令來打包會很煩，可以使用第二種方法；首先在項目根目錄下面的 package.json 里添加代碼， "packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"
PS：這里要注意，字段里的 項目名字，version，icon路徑要改成自己的； 具體添加位置如圖，
然后，在使用命令 npm run-script packager
最后，打包完成之后如圖
運行對應(yīng)包下的.exe文件，就可以看到我們的應(yīng)用了。
還有就是為了避免源代碼直接暴露給用戶，我們還需要做的就是用asar把./resources下面的app文件打包成一個asar的文件
然后直接把app文件刪除，把打包好的app.asar直接./resources下面，在運行appName.exe就好了
注意，asar的文件名一定得是app
[plain] view plain copy print?asar pack your-app app.asar 例如：asar pack F:/atom_project/myatom_1 F:/atom_project/app.asar這樣就會把myatom_1打包成app.asar再給大家推薦一個使用nsis制作安裝程序的博客:http://www.cnblogs.com/modou/p/3573772.html
新聞熱點
疑難解答
