用node-webkit(NW.js)創建桌面程序

以往寫windows桌面程序需要用MFC、C#之類的技術,那么如果你只會web開發技術呢?或者說你有一個網站,但是你想把你的網站打包成一個桌面應用程序,該如何做呢?

答案就是用node-webkit這個開源框架,他封裝了webkit內核和node.js,讓你可以用web技術來開發windows/linux/OSX程序等。指的一提的是目前node-webkit已經改名為NW.js,下面是在github上的此框架站點:

https://github.com/nwjs/nw.js

?

本文講述了如何使用該工具打包成windows桌面程序的一個簡單例子,同時給出了如何降低打包出來的程序的size的一個方式(用node-webkit打包出來的桌面程序size通常會比較大),更多的技術細節請參考上述站點。

?

需求


首先我們的需求很簡單,做一個windows桌面程序(exe),里面載入百度的首頁,用戶可以就像用瀏覽器一樣使用。以此類推,由于是封裝了webkit,當然你便可以使用web技術開發一個windows桌面軟件。

?

下載和安裝node-webkit


進入官網后(http://nwjs.io/),點擊下載,我這里使用的是win8.1的64位計算機,即下載win64版本

?

下載出來后解壓,文件夾中即為Node-webkit的主文件夾:

?

這里的nw.exe即該框架原先提供的一個已經封裝了webkit等的exe,這個是你構建自己的exe的基礎,你自己創建的web程序其實都是需要這個東西來運行,因為它提供了runtime環境。

?

修改icon


這里有一點需要提的是,默認情況下你創建出來的你的應用程序(exe)會和nw.exe的圖標一樣,當然這個不是你所想要的。所以你可以通過resource hacker這個工具來修改nw.exe的圖標成你所想要的,比如可以參考:

http://keenwon.com/1311.html

?

撰寫WEB應用


到這里我們就可以開始撰寫web應用了,因為本例子很簡單就是打開一個網址,所以應用的目錄大致如下:

我們主要來看package.json這個配置文件,這個是每個用node-webkit進行打包時候必須要的一個配置文件,內容大致如下:

{// "main": "index.html","main":"http://www.baidu.com/","name": "baidu","window": {"title": "baidu","icon": "assest/img/logo.png","toolbar": true,"width": 1280,"height": 800,"min_width": 400,"min_height": 200},"webkit": {"plugin": true,"java": false,"page-cache": false}
}

由于我們僅僅是打開一個網頁,所以main這個參數里面的值并不是index.html,而直接寫上一個網址就好

window.icon這個參數可以配置這個exe在windows的底部任務欄上的圖標

toolbar最好設置為true,這樣子你的應用程序上面會有類似于瀏覽器的工具欄,如果你的程序類似于一個音樂播放器之類的東西,那么你可能需要設置為false

關鍵package.json的語法請參考:

https://github.com/nwjs/nw.js/wiki/Manifest-format#webkit-subfields

?

打包


下面我們可以開始打包了。

首先將你的所有的應用程序全選,添加壓縮文件后并改名為app.nw(名字無所謂,但是擴展名一定要修改為nw),要確保package.json在根目錄。即你打開壓縮后的zip應該是這樣的

?

隨后,將你的app.nw拷貝到node-webkit的和nw.exe同一目錄,進入windows cmd后運行這個命令:

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

?

這個時候你發現生成了app.exe,這個時候即成功將你的web應用打包成了一位windows桌面程序,直接雙擊它即可運行:

?

是不是看起來像是一個瀏覽器?其實他真的就是一個瀏覽器,因為他封裝了webkit!

?

發布


這個時候你希望把exe發布出去,但是要注意的是你不能獨立的運行這個app.exe,因為它需要依賴一些dll,官網上推薦用Enigma Virtual Box這個軟件來將app.exe和依賴的dll打包成一個exe后發布,但是這里有個嚴重問題,那就是這個最后生成的yourapp.exe的size太大,至少70MB以上!

原因很簡單,這個是因為app.exe本身就很大,已經有幾十mb,而他其實也是基于我們剛解壓出來node-webkit后那個nw.exe而生成的,而那個nw.exe本身已經50+mb了,所以我們的app.exe能小的起來嗎?

?

這里推薦另一個打包方式,就是用Inno Setup來打包成安裝程序,即將你的一開始的web應用源文件和node-webkit的nw.exe和一些以來dll直接壓縮成一個安裝文件,我們并不需要上述中間那先打包成app.exe的步驟。用戶在使用你的exe后會出現setup wizard把程序安裝到Program Files目錄中,其實等于解壓縮了,將nw.exe和dll還有你的web應用釋放出來,這個時候所生成的安裝文件其實size會小很多。

?

我們通過這個站點來下載Inno Setup工具

http://www.jrsoftware.org/isdl.php

?

下載安裝運行后點擊File->New即進入傻瓜式的創建步驟

?

下一步,填寫你的發布應用的公司信息

?

繼續下一步直到走到Application Files,這一步是添加你的應用程序的打包文件:

?

上面的“Application main executable file”指向node-webkit的nw.exe,下面的Other application files,通過add file(s)來添加nw.pak和dll依賴文件,通過add folder來添加你的web應用文件

繼續點擊下一步,后面還可以選擇用戶安裝的時候可以選擇的語言:(默認是沒有中文的,中文包請在這里下載http://www.jrsoftware.org/files/istrans/)

?

下一步,可以還可以選擇分發的exe的icon

?

繼續后面的操作的,即可生成一個只有20多mb的setup.exe安裝文件了,以供分發

?

轉載于:https://www.cnblogs.com/soaringEveryday/p/4950088.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/256462.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/256462.shtml
英文地址,請注明出處:http://en.pswp.cn/news/256462.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

一頭扎進Node系列 - 目錄

前言 本系列是屬于初級教程。博主我也還只是一個node的新兵蛋子,想通過學習官網的API文檔,慢慢的打好Node基礎。當然后期這系列文檔會慢慢完善,并且會添加一些項目實戰中遇到的一些問題以及解決方案!如果你也是初學者,…

ANSYS——“There is at least 1 small equation solver pivot term”問題的解決辦法

目錄 問題出現的原因 問題解決辦法 1、根據提示對節點進行約束的添加

JAVA中幾個常用的方法

類Object是類層次結構的根類&#xff0c;每一個類都使用Object作為超類&#xff0c;所有對象&#xff08;包括數組&#xff09;都實現這個類的方法。jdk1.5中&#xff0c;描述了該類中的11個方法 1.getClass public final Class<? extends Object> getClass() 返回一個對…

ANSYS——載荷的方向

目錄 一、壓力的方向(FORCE) 1、為正的情況 2、為負的情況 二、壓強的方向(PRESSURE)

kindeditor用法簡單介紹(轉)

1&#xff0c;首先去官網下載http://www.kindsoft.net/ 2&#xff0c;解壓之后如圖所示&#xff1a; 由于本人做的是用的是JSP&#xff0c;所以ASP,PHP什么的就用不上了&#xff0c;直接把那些去掉然后將整個文件夾扔進Myeclipse&#xff0c;如圖&#xff1a; 里面有個報錯&am…

hadoop 分片與分塊,map task和reduce task的理解

分塊&#xff1a;Block HDFS存儲系統中&#xff0c;引入了文件系統的分塊概念&#xff08;block&#xff09;&#xff0c;塊是存儲的最小單位&#xff0c;HDFS定義其大小為64MB。與單磁盤文件系統相似&#xff0c;存儲在 HDFS上的文件均存儲為多個塊&#xff0c;不同的是&#…

SOLIDWORKS——參數化建模

https://www.sohu.com/a/259742200_100042821 知識點&#xff1a;投影曲線、曲面填充、掃描、外觀設置 建模步驟 1.先在工具——方程式里輸入一個直徑的變量A120 。 2.在前視基準面上草繪圓&#xff0c;畫一條直徑。直徑等于變量A。 3.旋轉&#xff0c;選擇粉色區域。 4.上視…

Arch 常用工具

一、網絡瀏覽pacman -S firefox firefox-i18n注&#xff1a;該命令中的前者為 Firefox 主程序,后者為語言包。pacman -S opera二、圖像編輯pacman -S gimp #圖像編輯軟件首選 GIMPpacman -S inkscape #矢量圖形編輯軟件Inkscapepacman -S scrot #…

Androd安全——反編譯技術完全解析

0&#xff0e;前言單純從技術角度上來講&#xff0c;掌握反編譯功能確實是一項非常有用的技能。另外既然別人可以反編譯程序&#xff0c;我們當然有理由應該對程序進行一定的保護&#xff0c;因此代碼混淆也是我們必須要掌握的一項技術。看完此篇如果對代碼混淆也感興趣&#x…

python——shape 與reshape

轉載自:https://blog.csdn.net/u010916338/article/details/84066369 shape()和reshape()都是數組array中的方法 numpy中reshape函數的三種常見相關用法 numpy.arange(n).reshape(a, b) 依次生成n個自然數&#xff0c;并且以a行b列的數組形式顯示np.arange(16).reshape(2,…

誤刪了microsoft visual c++后如何正常運行matlab

誤刪了microsoft visual c后如何正常運行matlab 本人在卸載visual studio2013的時候&#xff0c;因為這個軟件卸載的過程中出現一些問題&#xff0c;誤將visual c當成VS的組件一同刪除了。但是在打開matlab 時發現出錯&#xff0c;matlab打開后會出現下面的界面。 出現這個問題…

iScreenLocker 3.1.8 安卓鎖屏通知--蘋果一樣的體驗

*軟件介紹:蘋果鎖屏通知(iScreenLocker)是一款android上ios風格的鎖屏軟件。它顛覆安智通知設計&#xff0c;將原來狀態欄的通知搬到鎖屏界面上來&#xff0c;能夠在桌面輕松收發短信,微博,微信等消息。它獨有的消息喚醒功能。能使手機從待機界面喚醒而消耗非常少的電量。手指輕…

JSP慕課網階段用戶登錄小例子(不用數據庫)

getAttribute和setAttribute一起使用&#xff0c;而getParameter用于取得如request傳來的參數。 Web是請求/響應架構的使用&#xff0c;而request和response就是在服務器端生成的相應的兩個對象&#xff0c;request能夠獲取客戶端傳遞的參數及相關的一些信息&#xff0c;而resp…

機器學習python——python基礎

目錄 1、常用庫 2、shape與reshape&#xff0c;dtype 3、range、arange、linspace、logspace 4、數組的計算、切片 5、繪圖基本設置 6.三維繪圖 1、常用庫 numpy、scipy、matplotlib、math 2、shape與reshape&#xff0c;dtype https://blog.csdn.net/qq_45769063/arti…

win10環境下如何給visual studio 2013永久配置opencv3.1.0環境

win10環境下如何給visual studio 2013永久配置opencv3.1.0環境 本人在給visual studio 2013配置opencv 環境下遇到過一些問題&#xff0c;比如配置不成功或者不能永久配置opencv環境。先將自己的配置經驗分享于此&#xff0c;希望同道中的好友可以用上。 首先自行下載Visual s…

屬性名、變量名與 內部關鍵字 重名 加

procedure TForm4.btn3Click(Sender: TObject); varMyQj: TQJson;MyPrinter: TPrinter; beginMyQj : TQJson.Create;tryMyPrinter.name : A號打印機;MyPrinter.status : enabled;MyPrinter.&type : yes;MyQj.FromRecord<TPrinter>(MyPrinter);Memo1.Lines.Add(MyQj.A…

機器學習——支持向量機SVM之線性模型

目錄 一、沒有免費的午餐定理 二、支持向量機SVM&#xff08;support vector machine&#xff09; 1、線性模型和非線性模型 2、如何在線性模型中畫出一條直線&#xff08;優化過程——vplink&#xff09; 1&#xff09;多少條&#xff1f; 2&#xff09;如何畫出最好的直…

Oauth2.0和1.0區別

1.0的授權分3步, A)客戶端到授權服務器請求一個授權令牌(request token&secret) B)引導用戶到授權服務器請求授權 C)用訪問令牌到授權服務器換取訪問令牌(access token&secret) D)用訪問令牌去訪問得到授權的資源 2.0的用戶授權過程有2步&#xff0c; A)引導用戶到授權…

選導師,定方向

選導師&#xff0c;定方向。 看文獻看到9.40&#xff0c;實在是看不下去&#xff0c;索性寫一些自己這近兩年來的研究生生涯的一些感悟&#xff0c;希望對還在迷茫中的你們有一點點的啟示&#xff08;如果談不上啟示&#xff0c;那就當給你們一點安慰&#xff09;。 ** 選導師…

在apache中設置訪問目錄后進入的默認頁面為index.php

找到apache的配置文件httpd.conf后找到 DirectoryIndex index.html index.php 在其中添加index.php, 轉載于:https://www.cnblogs.com/itdi/p/5844517.html