需求： 將一個已經(jīng)上線的后臺管理系統(tǒng)（只兼容Chrome）打包成一個不需要谷歌瀏覽器就可以運行的軟件
需要安裝：
npm install electron -g
npm install electron-packager -g
WinRAR解壓工具（或者2345等其他解壓工具也可以）
Powershell 3 或 3 以上版本（electron-packager打包需要）
NET 4.5 或 4.5 以上版本（electron-packager打包需要）
此例只進行最簡單的轉(zhuǎn)換，詳細electron用法請參考electron中文文檔
運行文件
新建文件夾，演示中暫命名為app，在文件夾中啟動cmd,創(chuàng)建package.json，在package.json中必須有寫入
{
"name": "app",
"main": "main.js",
}
在app文件夾中創(chuàng)建main.js文件，在文件中寫入以下內(nèi)容
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
// 保持一個對于 window 對象的全局引用，不然，當(dāng) JavaScript 被 GC，
// window 會被自動地關(guān)閉
var mainWindow = null;
// 當(dāng)所有窗口被關(guān)閉了，退出。
app.on('window-all-closed', function () {
// 在 OS X 上，通常用戶在明確地按下 Cmd + Q 之前
// 應(yīng)用會保持活動狀態(tài)
if (process.platform != 'darwin') {
app.quit();
}
});
// 當(dāng) Electron 完成了初始化并且準(zhǔn)備創(chuàng)建瀏覽器窗口的時候
// 這個方法就被調(diào)用
app.on('ready', function () {
// 創(chuàng)建瀏覽器窗口。
mainWindow = new BrowserWindow({ width: 800, height: 600 });
// 加載應(yīng)用的 index
mainWindow.loadURL("http://www.baidu.com")
// 打開開發(fā)工具
// mainWindow.openDevTools();
// 當(dāng) window 被關(guān)閉，這個事件會被發(fā)出
mainWindow.on('closed', function () {
// 取消引用 window 對象，如果你的應(yīng)用支持多窗口的話，
// 通常會把多個 window 對象存放在一個數(shù)組里面，
// 但這次不是。
mainWindow = null;
});
});
如果安裝了上邊說的 npm install electron -g，就可以直接在命令窗口運行electron .,打開窗口了
導(dǎo)出文件
在app文件夾下，安裝
npm install electron -D
npm install electron-package -D
安裝后，在命令行輸入 `electron-packager . app --win --out ./appBox --arch=x64 --version1.0.0 --icon=ico.ico --overwrite --ignore=node_modules`
這句命令的意思是electron-packager .exe文件名稱--win --out ./文件夾名稱--arch=64位--version版本號--icon=打包后文件的圖標(biāo)--每次調(diào)用覆蓋文件--ignore=不打包的內(nèi)容
可以按照個人需求適當(dāng)刪除內(nèi)容
注意： electron-packager必須安裝Powershell3或3以上版本和NET4.5或4.5以上版本，否則會報錯
如果希望打開內(nèi)容不是一個URL而是一個index.html的本地文件的話，可以使用
// 把
mainWindow.loadURL("http://www.baidu.com")
// 替換為
mainWindowloadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
然后在app文件夾中創(chuàng)建index.html就可以了
如果需要打開后全屏顯示
// 把
mainWindow = new BrowserWindow({ width: 800, height: 600 });
// 替換為
mainWindow = new BrowserWindow({width: 800, height: 600, autoHideMenuBar: true})
打包完成后，打開文件夾中的app.exe就可以運行了
以上就是“使用electron 將網(wǎng)頁打包成應(yīng)用程序”的詳細內(nèi)容，更多請關(guān)注木子天禾科技其它相關(guān)文章！
