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，可分明我都没写什么啊╮(╯_╰)╭。因此目前看来娱乐娱乐差很少，要作商业产品的话，估计还得优化。