使用electron 將網(wǎng)頁(yè)打包成應(yīng)用程序

位置:首頁(yè) / 新聞中心 / 知識(shí)教程

知識(shí)教程 Admin 2024-02-22 17:21:36 1056

需求: 將一個(gè)已經(jīng)上線(xiàn)的后臺(tái)管理系統(tǒng)(只兼容Chrome)打包成一個(gè)不需要谷歌瀏覽器就可以運(yùn)行的軟件

需要安裝:

npm install electron -g

npm install electron-packager -g

WinRAR解壓工具(或者2345等其他解壓工具也可以)

Powershell 3 或 3 以上版本(electron-packager打包需要)

NET 4.5 或 4.5 以上版本(electron-packager打包需要)

此例只進(jìn)行最簡(jiǎn)單的轉(zhuǎn)換,詳細(xì)electron用法請(qǐng)參考electron中文文檔

運(yùn)行文件

新建文件夾,演示中暫命名為app,在文件夾中啟動(dòng)cmd,創(chuàng)建package.json,在package.json中必須有寫(xiě)入

{

  "name": "app",

  "main": "main.js",

}

在app文件夾中創(chuàng)建main.js文件,在文件中寫(xiě)入以下內(nèi)容


const { app, BrowserWindow } = require('electron')

const path = require('path')

const url = require('url')


// 保持一個(gè)對(duì)于 window 對(duì)象的全局引用,不然,當(dāng) JavaScript 被 GC,

// window 會(huì)被自動(dòng)地關(guān)閉

var mainWindow = null;

// 當(dāng)所有窗口被關(guān)閉了,退出。

app.on('window-all-closed', function () {

    // 在 OS X 上,通常用戶(hù)在明確地按下 Cmd + Q 之前

    // 應(yīng)用會(huì)保持活動(dòng)狀態(tài)

    if (process.platform != 'darwin') {

        app.quit();

    }

});

// 當(dāng) Electron 完成了初始化并且準(zhǔn)備創(chuàng)建瀏覽器窗口的時(shí)候

// 這個(gè)方法就被調(diào)用

app.on('ready', function () {

    // 創(chuàng)建瀏覽器窗口。

    mainWindow = new BrowserWindow({ width: 800, height: 600 });

    // 加載應(yīng)用的 index

    mainWindow.loadURL("http://www.baidu.com")

    // 打開(kāi)開(kāi)發(fā)工具

    // mainWindow.openDevTools();

    // 當(dāng) window 被關(guān)閉,這個(gè)事件會(huì)被發(fā)出

    mainWindow.on('closed', function () {

        // 取消引用 window 對(duì)象,如果你的應(yīng)用支持多窗口的話(huà),

        // 通常會(huì)把多個(gè) window 對(duì)象存放在一個(gè)數(shù)組里面,

        // 但這次不是。

        mainWindow = null;

    });

});

如果安裝了上邊說(shuō)的 npm install electron -g,就可以直接在命令窗口運(yùn)行electron .,打開(kāi)窗口了


導(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文件名稱(chēng)--win --out ./文件夾名稱(chēng)--arch=64位--version版本號(hào)--icon=打包后文件的圖標(biāo)--每次調(diào)用覆蓋文件--ignore=不打包的內(nèi)容

可以按照個(gè)人需求適當(dāng)刪除內(nèi)容

注意: electron-packager必須安裝Powershell3或3以上版本和NET4.5或4.5以上版本,否則會(huì)報(bào)錯(cuò)

如果希望打開(kāi)內(nèi)容不是一個(gè)URL而是一個(gè)index.html的本地文件的話(huà),可以使用

// 把

mainWindow.loadURL("http://www.baidu.com")

// 替換為

mainWindowloadURL(url.format({

    pathname: path.join(__dirname, 'index.html'),

    protocol: 'file:',

    slashes: true

}))

然后在app文件夾中創(chuàng)建index.html就可以了

如果需要打開(kāi)后全屏顯示

// 把

mainWindow = new BrowserWindow({ width: 800, height: 600 });

// 替換為

mainWindow = new BrowserWindow({width: 800, height: 600, autoHideMenuBar: true})

打包完成后,打開(kāi)文件夾中的app.exe就可以運(yùn)行了


以上就是“使用electron 將網(wǎng)頁(yè)打包成應(yīng)用程序”的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注木子天禾科技其它相關(guān)文章!

以上就是“使用electron 將網(wǎng)頁(yè)打包成應(yīng)用程序”的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注木子天禾科技其它相關(guān)文章!

15934152105 掃描微信