打包桌面應(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

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

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

配置命令的解釋

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

HelloWorld 生成exe文件名

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

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

--version 對應(yīng)electron-prebuilt的版本號

--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;// 保持一個對于 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.html mainWindow.loadURL( file:// + __dirname + /index.html  // 打開開發(fā)工具 mainWindow.openDevTools(); // 當(dāng) window 被關(guān)閉，這個事件會被發(fā)出 mainWindow.on( closed , function() { // 取消引用 window 對象，如果你的應(yīng)用支持多窗口的話， // 通常會把多個 window 對象存放在一個數(shù)組里面， // 但這次不是。 mainWindow = null;});

第六步 執(zhí)行命令

cnpm run-script packager

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

最后，這篇文章只是介紹electron工具打包桌面應(yīng)用的簡單使用，大家還想更深的了解electron的使用的話，可以去php 。

以上就是新手如何快速入手html打包桌面應(yīng)用？實(shí)用工具介紹的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。