html實(shí)現(xiàn)打包桌面應(yīng)用的方法

這篇文章主要介紹html實(shí)現(xiàn)打包桌面應(yīng)用的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

打包桌面應(yīng)用有兩款工具可以打包，一種是 Electron，另一種是nw.js ，本篇幅采用的Electron工具講解。

第一步：安裝Electron

cnpm install electron -g (全局安裝electron)

第二步： 安裝electron-packager

cnpm install electron-packager -g （打包）

第三步： 安裝electron-prebuilt [安裝之后命令 electron . 就可以運(yùn)行程序]

cnpm install electron-prebuilt -g

安裝此命令之后 最好在項(xiàng)目下安裝 cnpm install electron-prebuilt --save-dev]

第四步：在npm init項(xiàng)目后的項(xiàng)目下的package.json的文件中的配置

配置命令的解釋

electron .  執(zhí)行命令 當(dāng)前工程目錄下生成exe文件

HelloWorld 生成exe文件名

--win 生成在window系統(tǒng)中運(yùn)行 （也可以執(zhí)行命令 --all 代表所有的）

./OutApp 生成的HelloWorld.exe在OutApp文件夾下，而OutApp文件夾在當(dāng)前項(xiàng)目工程的目錄下生成

--version 對(duì)應(yīng)electron-prebuilt的版本號(hào)

--ignore=node_modiles （可以改為執(zhí)行當(dāng)前exe文件的圖標(biāo) --icon=./img/xxx.ico）

第五步 main.js文件

// var app = require('app');  // 控制應(yīng)用生命周期的模塊。
// var BrowserWindow = require('browser-window');  // 創(chuàng)建原生瀏覽器窗口的模塊

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

// 保持一個(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.html
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    // 打開(kāi)開(kāi)發(fā)工具
    mainWindow.openDevTools();

    // 當(dāng) window 被關(guān)閉，這個(gè)事件會(huì)被發(fā)出
    mainWindow.on('closed', function() {
        // 取消引用 window 對(duì)象，如果你的應(yīng)用支持多窗口的話，
        // 通常會(huì)把多個(gè) window 對(duì)象存放在一個(gè)數(shù)組里面，
        // 但這次不是。
        mainWindow = null;
    });
});

第六步 執(zhí)行命令

cnpm run-script packager

那么接下來(lái)就看一下我工程的目錄結(jié)構(gòu)圖與打包后的效果吧

以上是html實(shí)現(xiàn)打包桌面應(yīng)用的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！