二、node-webkit運行web應用，node-webkit把web應用打包成桌面應用

時間 2019-11-08

標籤 node webkit 運行 web 應用打包桌面欄目 HTML 简体版

原文原文鏈接

下面我經過一個簡單的demo來介紹怎麼樣把一個web應用打包成一個可執行文件（這裏只介紹windows環境）css

首先新建一個index.html文件，做爲咱們這個demo的入口頁面，咱們暫且就把這個頁面當成一個完整的web應用吧。內容隨便寫點什麼，好比：html

項目結構以下：前端

html代碼：node

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NW</title>
    <link rel="stylesheet" href="../css/NWcss.css">
</head>
<body>
<div id="nw">這是一個測試div</div>
</body>
<script src="../js/NWjs.js"></script>
</html>

css代碼：git

#nw{
    width: 500px;
    height: 300px;
    border: solid 1px red;
}

js代碼：github

document.getElementById("nw").onclick=function () {
    alert("別點我！！！")
}

json代碼：web

{
  "main": "html/index.html", // 啓動頁面
  "name": "NW",
  "window": {
    "toolbar": false, // 是否顯示工具欄（調試使用）
    "frame": true,   // 是否顯示NW框架
    "width": 666,//應用頁面的寬度
    "height": 450,//應用頁面的高度
    "resizable": true  //可調整大小
  }
}

除了上述配置：npm

還有不少其餘有用的屬性能夠配置具體的配置參數文檔可看這裏https://github.com/rogerwang/node-webkit/wiki/Manifest-formatjson

項目在谷歌瀏覽器的運行效果：windows

該項目下全部的文件一塊兒打包：注意，必定要在項目目錄內部執行壓縮

打包以後點擊進去壓縮包效果以下：

將該zip文件剪切到咱們NW的安裝目錄：

將zip文件拖住放在nw.exe上面：

效果以下：

咱們將zip文件後綴改成.nw效果也是也同樣

打包成exe文件

首先打開windows的cmd,進入到NW的安裝目錄下，而後輸入以下命令：

copy /b nw.exe+NW.nw app.exe

而後就會產生一個exe文件：

雙擊exe文件就能夠運行咱們的程序：

注意，此時的app.exe文件只能在該目錄下運行，由於它須要依賴NW的環境

但咱們大多數人想的是給用戶一個exe文件，用戶就可使用了，不用再附帶一些其餘文件。

嗯，因此咱們還能夠把app.exe跟其餘的文件再打包一次，把上圖中的全部文件變成一個可執行文件，用戶只要獲得這個文件，就能運行咱們的應用了。

作這步咱們須要一個軟件叫Enigma Virtual Box，首先下載和安裝這個軟件，而後打開它。

而後在Enter Input File Name那裏輸入咱們的app.exe的路徑，在Enter Output File Name那裏填寫咱們要把打包出來的可執行文件輸出到哪裏。最後是把除app.exe外的其它文件拖入到Files那裏，遇到提示的話默認就能夠了。

最後點擊右下角的Process按鈕，就大功告成了。

最後咱們獲得了一個 app_boxed.exe 的文件，只要把這個文件交給用戶，用戶就能夠運行了。

node-webkit雖然方便，但有個很大的缺點是獲得的可執行文件有點大，你們在能夠在衡量利弊後決定使不使用。

固然node-webkit能作的並非本文寫的那麼淺顯，例如

解除了瀏覽器 沙盒 限制，像葫蘆鴨中用到的跨域，本來單憑前端是沒法實現的。
可使用node.js，除了node.js自己的特性，意味着npm中那麼多的擴展能夠供你使用。
node-webkit還實現了本地化的API，例如菜單欄，系統的托盤圖標支持，系統剪貼板等

相關文章

相關標籤/搜索

J2EE之web應用

Web Services 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<