web應(yīng)用相較于原生應(yīng)用，在代碼開發(fā)調(diào)試時(shí)的便利就不多做解釋了。這里我們直入主題，今天我們要學(xué)習(xí)的是采用node-webkit來(lái)開發(fā)桌面應(yīng)用。顧名思義，node-webkit是由node和webkit構(gòu)成。我們可以直接在頁(yè)面上采用node的各種模塊，同時(shí)也可以用webkit的方式調(diào)試網(wǎng)頁(yè)。

創(chuàng)新互聯(lián)主營(yíng)樂平網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開發(fā),樂平h5微信小程序搭建,樂平網(wǎng)站營(yíng)銷推廣歡迎樂平等地區(qū)企業(yè)咨詢

下面我們就來(lái)看怎么開發(fā)簡(jiǎn)單的桌面應(yīng)用：

1、資源下載

node-webkit源碼地址：https://github.com/rogerwang/node-webkit

我要說(shuō)的是windows下的開發(fā)，所以我們點(diǎn)擊如下圖的win32鏈接

如圖所示，它也可以開發(fā)Linux和Mac下的web應(yīng)用。

下載完后打開node-webkit-v0.7.1-win-ia32，雙擊nw.exe,我們打開了一個(gè)類似瀏覽器的東西如下：

沒錯(cuò)，它不只是長(zhǎng)得像瀏覽器而已，它真的有瀏覽器功能，它是基于webkit的，所以功能和chrome很相似，我們可以隨便輸入個(gè)網(wǎng)址，點(diǎn)擊回車就能訪問。

它還有類似chrome的調(diào)試功能，點(diǎn)擊地址欄右邊三條橫線的按鈕就能出現(xiàn)調(diào)試頁(yè)面。

2、web工程建立

接入正題，如何建立web工程，最簡(jiǎn)單的web工程只需要兩個(gè)文件，一個(gè)配置文件package.json和一個(gè)主頁(yè)面index.html。

最簡(jiǎn)單的package.json格式如下：

{
  "name": "nw-demo",
  "main": "index.html"
}

一個(gè)項(xiàng)目名字name，一個(gè)主頁(yè)面main。

配置文件package.json格式可參考 Mainfest format

3、打包運(yùn)行web應(yīng)用

首先，我們將我們的配置文件和package.json和web相關(guān)打包為app.zip

然后修改app.zip后綴名為nw

然后就要運(yùn)行了,開啟cmd，cd到nw.exe的目錄下：

nw.exe app.nw

也可以將app打包為exe文件

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

不過app.exe只能在nw.exe所在目錄下運(yùn)行（不知有沒有高人知道怎么破）

官網(wǎng)說(shuō)必須要和nw.pak放在一起，但我嘗試下還是不行。

4、node_modules的應(yīng)用

(1) node自帶的模塊可以直接require('moduleName')使用

(2) 不是node自帶的我們可以在zip包根目錄中新一個(gè)node_modules文件夾，然后將npm下載的模塊放入此文件夾，依舊是require('moduleName')調(diào)用。

騷年們，發(fā)揮想象力來(lái)創(chuàng)造web app吧！