node-webkit制作桌面应用

72 阅读 0 评论 48 点赞

我是靠谱客的博主平淡大山，最近开发中收集的这篇文章主要介绍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的版本，其他系统也基本大同小异。

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.

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

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

下载以后找到nw.exe。如果可以打开，那么就是环境搭好啦~接下来，就是开发软件啦~(≧▽≦)/~

2.Hello World
我们为了方便就在刚刚下载下来的nw文件夹里创建一个文件夹，例如名字叫做product1。然后创建一个package.json。格式如下：

{
"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

当然这一步自由发挥，程序最终呈现的效果就是你的页面在浏览器上的效果。

3.打包

nw应用的打包灰常简单，只需要把上边我们创建的所有和页面有关的文件包括那个json，统统压缩成zip格式的文件，然后更改后缀名为.nw，把这个文件直接拖到nw.exe上运行，出来的就是你的程序了。

这一步里我要说的是，如果在测试程序阶段，可以直接把没有压缩的文件夹拖到nw.exe上运行，不需要压缩也不要改后缀名，效果是一样一样的~

到了这里虽然我们程序效果有了，但是有一个很重要的问题，假如我做好了一个桌面程序，我想要给小伙伴发过去让他感受一下我的技艺精湛：）我总不能把他拖到我电脑前给他演示呀。这里有两步，首先把我们之前产出的这些文件和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，可分明我都没写什么啊╮(╯_╰)╭。所以目前看来娱乐娱乐差不多，要做商业产品的话，估计还得优化。