教你如何用網(wǎng)頁開發(fā)桌面應用

1、下載nw.js

https://nwjs.io/
在這里插入圖片描述
最好下載sdk版本。

2、解壓打開安裝包

下載完之后，解壓打開
在這里插入圖片描述
圖中的app文件夾是我自己創(chuàng)建的，你也需要自己創(chuàng)建一個，里面放你項目文件。
app文件夾中一般放一個index.html（頁面展示），另外還需要創(chuàng)建一個package.json文件（參數(shù)配置）：

{
        "name":  "first  app",
        "main":  "index.html",
        "version":  "1.0",
        "window":  {
                "height":  300,
                "width":  360,
                "show":  true,
                "title":  "first  app",
                "toolbar":  true,
                "frame":  true,
                "resizable":false,
                "icon":  "./icon.png",
                "transparent":false
        }
}

下面是各個參數(shù)的意思：

name：這個app的名稱，可以隨便取一個~
main：代表app的入口文件，我們這里用的是index.html，就是當app啟動的時候第一個頁面是什么。
version：版本號，一般于后續(xù)版本升級使用。
window：對窗口進行設(shè)置。
height：高度，單位像素。
width：寬度，單位像素。
show：當程序一點擊運行的時候是否直接把窗口顯示出來。
title：窗口標題，當入口頁面的title標簽為空的時候就使用這個屬性來當做窗口的標題。
toolbar：是否啟用工具條。
frame：是否使用邊框，也就是含有最小化，關(guān)閉等按鈕的邊框。
resizable：是否可以調(diào)整窗口大小。
icon：窗口的圖標，也是在快速啟動欄顯示的圖標。
transparent：窗口背景是否透明。

然后將app文件夾下的所有文件項目文件壓縮成app.zip的壓縮文件，將其更改為app.nw文件。將app.nw從app中粘貼到根目錄中，然后 打開命令行工具合并成exe文件：

copy /b "E:\myweb\maomin\nwjs\nw.exe"+"E:\myweb\maomin\nwjs\app.nw"   "E:\myweb\maomin\nwjs\app.exe"

這里只是一個例子，按自己的存放的路徑來。合并完成后會在根目錄看見一個名叫app.exe的文件。

3、下載Enigma Virtual Box

接著你需要下載一個名叫Enigma Virtual Box的軟件。
下載鏈接
打開它，選中app.exe
然后將你剛才下好的nw.js里原始文件（除去你自己生成和創(chuàng)建的文件或文件夾）。拖到下面的大方框中，點擊Process
在這里插入圖片描述

4、完成

進度條完成后，根目錄下會有個app_boxed.exe的文件，這個文件可以在任何地方打開，是不是很happy?。?！






作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路