教你如何用網(wǎng)頁(yè)開(kāi)發(fā)桌面應(yīng)用

1、下載nw.js

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

2、解壓打開(kāi)安裝包

下載完之后，解壓打開(kāi)
在這里插入圖片描述
圖中的app文件夾是我自己創(chuàng)建的，你也需要自己創(chuàng)建一個(gè)，里面放你項(xiàng)目文件。
app文件夾中一般放一個(gè)index.html（頁(yè)面展示），另外還需要?jiǎng)?chuàng)建一個(gè)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
        }
}

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

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

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

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

這里只是一個(gè)例子，按自己的存放的路徑來(lái)。合并完成后會(huì)在根目錄看見(jiàn)一個(gè)名叫app.exe的文件。

3、下載Enigma Virtual Box

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

4、完成

進(jìn)度條完成后，根目錄下會(huì)有個(gè)app_boxed.exe的文件，這個(gè)文件可以在任何地方打開(kāi)，是不是很happy?。?！






作者：Vam的金豆之路

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

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路