node-webkit製做桌面應用

時間 2019-12-01

標籤 node webkit 製做桌面應用简体版

原文原文鏈接

心血來潮忽然想用js嘗試寫桌面應用，忽然發現我大js真的無所不能。在網上搜到了這麼一個東東：node-webkit。用Node.js來進行系統資源的訪問，用HTML+CSS完成頁面的搭建。哇，一切忽然就好像變得特別簡單。大學上c#課時也用c#製做過一些很入門的桌面應用，嚴格來講那個叫桌面窗體程序。比起來，node-webkit建立桌面應用的方式就像是我平時用來搭積木的東西忽然能夠蓋樓了~厲害了，個人js。
廢話少說，我把個人helloworld過程詳細搞出來，過程當中還有一些小坑，小思考。以下：
1.環境
首先，確定要把node-webkit這個好幫手下載下來。
gihub地址：https://github.com/nwjs/nw.js/
nw官網：https://nwjs.io/
根據系統不一樣選擇不一樣的版本，我這裏下的是win64的版本，其餘系統也基本大同小異。javascript

v0.20.1: (Feb 2, 2017, based off of Node.js v7.5.0, Chromium 56.0.2924.87): release notes
NOTE You might want the SDK build. Please read the release notes.css

☀Linux: 32bit / 64bit
☀Windows: 32bit / 64bit
☀Mac 10.9+: 64bit
☀Use LTS build for Win XP and early OSX.html

latest live build: git tip version; build triggered from every git commit: https://dl.nwjs.io/live-build/
Previous versions java

下載之後找到nw.exe。若是能夠打開，那麼就是環境搭好啦~接下來，就是開發軟件啦~\(≧▽≦)/~node

2.Hello World
咱們爲了方便就在剛剛下載下來的nw文件夾裏建立一個文件夾，例如名字叫作product1。而後建立一個package.json。格式以下：jquery

{
  "name": "app1",//程序名字
  "version": "0.1.0",//版本號
  "main": "index.html",//程序入口
  "window": {
    "toolbar": false, // 工具欄
    "frame": false, // 框架
    "width": 1000,
    "height": 650,
    "resizable": false//是否可調整大小
  }
}

這裏我只是用了一部分參數，更多的能夠去官網查詢文檔，這裏就不提了。

建立好配置文件以後，就要開始動手寫咱們的html頁面了，如下是我在第一次建立nw應用時瞎β操做的代碼

（看看就好）：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link rel="stylesheet" href="index.css">
 7     <script src="jquery-3.1.1.min.js"></script>
 8 </head>
 9 <body>
10 <div id="top">
11     <span id="logo">CosName</span>
12     <div id="drag"></div>
13         <ul id="nav">
14             <li id="close"><a href="#" id="close_btn"></a></li>
15             <li id="large"><a href="#" id="a" class="large_btn"></a></li>
16             <li id="mini"><a href="#" id="mini_btn"></a></li>
17         </ul>
18     </ul>
19 </div>
20 
21 <div id="play_area">
22     <video src="" width="400" height="400" controls="controls  "></video>
23 </div>
24 <div id="movie_list">
25     <ul>
26         <li><a href=""></a></li>
27     </ul>
28 </div>
29 <div id="footer">
30 </div>
31 </body>
32 </html>
33 <script src="index.js" type="text/javascript"></script>

Html

 1 *{
 2     margin: 0;
 3     padding: 0;
 4     background-color: #3C3C3C;
 5     color: lightgray;
 6     outline: none;
 7     user-select: none;
 8 }
 9 ul{
10     list-style: none;
11 }
12 a{
13     text-decoration: none;
14 }
15 #top{
16     width: 100%;
17     height: 30px;
18     border-bottom: 1px solid #272727;
19 }
20 #logo{
21     position: absolute;
22     left: 10px;
23     right: 0;
24     width: 80px;
25     height: 30px;
26     line-height: 30px;
27     font-weight: bold;
28 }
29 #drag{
30     width: 91%;
31     height: 30px;
32     -webkit-app-region: drag;
33     display: inline-block;
34 }
35 #nav{
36     position: absolute;
37     display: inline-block;
38     right: 0;
39     width: 90px;
40     height: 30px;
41     background-color: rebeccapurple;
42 }
43 #nav li{
44     width: 30px;
45     height: 30px;
46     float: right;
47 }
48 #nav li a{
49     display: inline-block;
50     width: 30px;
51     height: 30px;
52     z-index: 10000;
53 }
54 #close a{
55     background: url("close.png") 0 no-repeat;
56     background-size: 20px;
57     background-position: center;
58 }
59 #large a{
60     background: url("large.png") 0 no-repeat;
61     background-size: 20px;
62     background-position: center;
63 }
64 #mini a{
65     background: url("mini.png") 0 no-repeat;
66     background-size: 20px;
67     background-position: center;
68 }
69 #close a:hover,#a:hover,#mini a:hover{
70     opacity: 0.7;
71 }
72 #play_area{
73     margin: 30px 0 0 20px;
74     width: 400px;
75     height: 400px;
76     border: 1px solid #272727;
77     box-shadow: 0 1px 2px #8E8E8E;
78 }
79 #footer{
80     position: fixed;
81     bottom: 0;
82     width: 100%;
83     height: 32px;
84     border-top: 1px solid #272727;
85     box-shadow: 0 1px 2px #8E8E8E;
86 }

css

 1 var gui = require('nw.gui');
 2 var win = gui.Window.get();
 3 $('#close_btn').click(function () {
 4     win.close();
 5 })
 6 $("#mini_btn").click(function () {
 7     win.minimize();
 8 })
 9 $("#a").click(function () {
10     if($(this).attr("id")=="a"){
11         win.maximize();
12         $(this).css("backgroundImage","url('restore.png')")
13         $(this).attr({id:"b"});
14     }else{
15         win.restore();
16         $(this).css("backgroundImage","url('large.png')")
17         $(this).attr({id:"a"});
18     }
19 })

Javascript

固然這一步自由發揮，程序最終呈現的效果就是你的頁面在瀏覽器上的效果。linux

3.打包git

nw應用的打包灰常簡單，只須要把上邊咱們建立的全部和頁面有關的文件包括那個json，通通壓縮成zip格式的文件，而後更改後綴名爲.nw，把這個文件直接拖到nw.exe上運行，出來的就是你的程序了。github

這一步裏我要說的是，若是在測試程序階段，能夠直接把沒有壓縮的文件夾拖到nw.exe上運行，不須要壓縮也不要改後綴名，效果是同樣同樣的~web

到了這裏雖然咱們程序效果有了，可是有一個很重要的問題，假如我作好了一個桌面程序，我想要給小夥伴發過去讓他感覺一下個人技藝精湛：）我總不能把他拖到我電腦前給他演示呀。這裏有兩步，首先把咱們以前產出的這些文件和nw.exe進行一個合併，能夠在nw根目錄shift加右鍵快速打開命令窗口，而後鍵入如下代碼：

copy /b nw.exe+myapp.nw myapp.exe（這裏的myapp就是你壓縮文件的名字，myapp.exe是你打包後產出exe程序的名字）

以後獲得的myapp.exe直接打開就是你剛寫好的程序了。固然只有這個文件還不夠，還須要一些dll文件的支持。其中 nw.pak 與 icudt.dll 這個兩個文件是必需要的。ffmpegsumo.dll 文件是媒體支持文件，若是你的html頁面中用到了<video>或<audio>或其它與媒體相關的東西，則必須帶上這個文件。libEGL.dll 和 libGLESv2.dll 這個兩個文件則是使用webGL或GPU必需要的。

根據本身需求決定須要的文件，這裏咱們要藉助一個軟件， Enigma Virtual Box。下載地址： http://enigmaprotector.com/assets/files/enigmavb.exe。

下載安裝之後，根據軟件提示，填好三項信息，第一項input file name填寫咱們上面合併出來的那個myapp.exe，output file name則是輸出的程序文件名，最後在下方的file文件

池裏把除myapp.exe以外的文件通通拖入，而後點擊process，抽一根菸。噹噹噹當~~大功告成。僅僅一個exe文件，能夠拿去裝逼了~

4.總結

Javascript搭建桌面應用的過程可謂簡單輕鬆，可是這種方式也有一個顯著的弊端。就是文件體積龐大。像我上述的那個程序所有打包好後有80多mb，可分明我都沒寫什麼啊╮(╯_╰)╭。因此目前看來娛樂娛樂差很少，要作商業產品的話，估計還得優化。