node-webkit制作桌面应用_note.js 开发桌面应用-程序员宅基地

心血来潮突然想用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，可分明我都没写什么啊╮(╯_╰)╭。所以目前看来娱乐娱乐差不多，要做商业产品的话，估计还得优化。

 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vznv7p1h/article/details/57077413

智能推荐

数据库语法复习

数据库语法通常指的是用于管理和操作数据库的各种命令和语句。这些语法因不同的数据库管理系统（DBMS）而异，但大多数关系型数据库管理系统（RDBMS）都支持SQL（结构化查询语言）作为其核心语言。

OSQP文档学习-程序员宅基地

文章浏览阅读1.3k次，点赞27次，收藏22次。osqp求解器官方文档学习_osqp

开源语音格式speex教程（for iOS）_speex的encode方法-程序员宅基地

文章浏览阅读997次。转自http://www.cocoachina.com/bbs/read.php?tid=114755&keyword=speex最新的编译博客最新的Demo这两天在折腾语音的东西，实现类似微信上对讲机的功能，做了两个Demo，一种使用lib-amr库用amr格式实现的，这个网上有现成的教程，所以还是比较好实现的。另一个是用的speex库，这个提的人很多，但是出教程的不_speex的encode方法

STM32+ESP01S（WIFI）上传温湿度（DHT11）至巴法云+手机app_stm32智能加湿器wifi控制app-程序员宅基地

文章浏览阅读1.5k次，点赞26次，收藏35次。翻东西时发现一个ESP01S模块，想着玩一下本篇学习ESP01S连接巴法云STM32F103C8T6最小系统板ESP01S模块DHT11温湿度传感器本篇为学习总结，只为学习测试基础功能，没有进行太多测试，可能隐藏一些暂未发现的问题，欢迎大佬们指正。_stm32智能加湿器wifi控制app

使用Gabor滤波器进行指纹增强：Matlab源代码详解_指纹gabor增强源码-程序员宅基地

文章浏览阅读228次。接着，我们可以使用wiener2函数进行噪声去除操作，以便更好的进行后续的指纹增强。但是，由于受到外部环境的影响和指纹本身特性的限制，指纹图像往往出现模糊、噪声等问题，使得指纹识别的准确率大大降低。其中，lambda表示滤波器的波长，theta表示滤波器的方向，psi表示滤波器的相位偏移，gamma表示滤波器的宽度，bw表示滤波器的带宽，N表示滤波器的个数。通过以上步骤，我们可以使用Gabor滤波器对指纹图像进行增强，得到更加清晰的指纹图像，提高指纹识别的准确率。_指纹gabor增强源码

（五）Docker 安装 redis镜像+启动redis容器（超详细）-程序员宅基地

文章浏览阅读7.7k次，点赞4次，收藏19次。（五）Docker 安装 redis镜像+启动redis容器（4）、命令参数含义：容器＝完整Linuxdocker run:在docker中启动一个容器实例-p 6379:6379：指定宿主机端口与容器端口映射关系，容器与主机映射端口为，主机6379，容器6379，访问Linux端口就能访问到MySQL容器--name redis：容器运行后的名称，创建的容器名称。_redis镜像

随便推点

前端发版缓存问题

前端发版缓存问题

探索潜力：中心化交易所平台币的对比分析

相比之下，市值较低的平台币，如BMX、BGB和MX，具有更大的增长潜力，呈现出更多的增长机会。在过去的一年里，受益于美国股市上比特币 ETF 的上市和比特币供应量的第四次减半，比特币的价格一度飙升至73,000美元以上，达到历史新高。本文旨在为读者提供对这七种选定平台币的全面分析，评估它们的价值和潜力，并研究价格和市值增长指标、回购机制、功能权益以及其发行方的市场表现。随着越来越多的开发者和项目选择在这些区块链上构建应用程序，这些区块链的持续发展有助于提升其原生代币的可用性和需求，从而扩展其使用场景。

C语言：项目实践（贪吃蛇）

相信大家都玩过贪吃蛇这款游戏吧，贪吃蛇是久负盛名的游戏，它也和俄罗斯方块，扫雷等游戏位列经典游戏的行列，那贪吃蛇到底是怎么实现的呢？今天，我就用C语言带着大家一起来实现一下这款游戏，从设计到代码的实现可以帮助我们提升编程能力和逻辑能力

web3以太坊开发，前后端交互中涉及到的合约

在web3以太坊开发中，往往大家交流的时候，会涉及到一些合约相关的词汇，这里重点说两个合约，一个是manager合约，另一个是registry合约。

SpringBoot对接口配置跨域设置

在 Spring Boot 应用中，接口配置跨域（Cross-Origin Resource Sharing，CORS）设置是一个常见的需求，特别是当你的前端应用和后端服务部署在不同的域名下时。

android实现倒计时功能_anroid倒计时播报-程序员宅基地

文章浏览阅读611次。Android中的实现CountDownTimer类专门用来实现时间统计 直接使用这个类，或者自定义一个类 class TimeLooper extends CountDownTimer{ //参数为总时间，时间间隔 public TimeLooper(long millisInFuture, long countDownInterval) {_anroid倒计时播报

推荐文章

热门文章

相关标签