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

本文链接：https://blog.csdn.net/vznv7p1h/article/details/57077413

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

EBS R12基本概念与应用基础-程序员宅基地

文章浏览阅读1.8k次。摘自： [ORACLE EBS 入门及供应链核心系统详解教程] (书籍)EBS基础功能架构（13个核心模块，业财一体化）业务运营管理，价值增值财务会计管理，价值实现应用架构Finance财务，资金流Accounting财务管理Bisuness业务，实物流核心业务，与财务高度集成；PUR、INV、制造、订单履行等间接业务，or专业业务，为核心业务提供支持；HR..._ebs r12

Java中Date和Timestamp的区别_java date timestamp区别-程序员宅基地

文章浏览阅读838次。转载：https://blog.csdn.net/ccecwg/article/details/39546307_java date timestamp区别

如何用原生js封装一个类似jq的选择器_原声js实现jq元素选择器-程序员宅基地

文章浏览阅读1.4k次。1、我们先了解一下原生js中的选择器ID选择器（在整个文档中获取id为xxx的元素）document.getElementId([ID]);类名选择器（在整个文档中或者在指定上下文中获取类名为xxx的元素）document.getElementsByClassName(' ');[context].getElementsByClassName(' ');标签名选择器（在整个文档中或者..._原声js实现jq元素选择器

Hive中partition by和distribute by区别_partition by distribute by-程序员宅基地

文章浏览阅读1.2k次，点赞3次，收藏4次。通常查询时会对整个数据库查询，而这带来了大量的开销，因此引入了partition的概念，在建表的时候通过设置partition的字段, 会根据该字段对数据分区存放，更具体的说是存放在不同的文件夹,这样通过指定设置Partition的字段条件查询时可以减少大量的开销。1）partition by [key..] order by [key..]只能在窗口函数中使用，而distribute by [key...] sort by [key...]在窗口函数和select中都可以使用。_partition by distribute by

游标（cursor ）是什么？_c# cursor-程序员宅基地

文章浏览阅读7.3k次。Private SQL Area A private SQL area holds information about a parsed SQLstatement and other session-specific information for processing. When a serverprocess executes SQL or PL/SQL code, the process_c# cursor

listview使用的一些心得_listview的使用——购物商城实验心得-程序员宅基地

文章浏览阅读616次。近日在用ListView中的一些注意点，和公用代码，整理如下1.ListView.Items.Clear而不是ListView.Clear一般如果ListView是动态填充的，我们在填充之前都会先进行清理。但需要注意一下，我们是清理Items,如果去直接Clear整个ListView，就连原先定义好的列都没有了2.给ListView绑定数据ListView并不能直接_listview的使用——购物商城实验心得

随便推点

java 注解处理器的作用_深入理解Java：注解（Annotation）--注解处理器-程序员宅基地

文章浏览阅读110次。如果没有用来读取注解的方法和工作，那么注解也就不会比注释更有用处了。使用注解的过程中，很重要的一部分就是创建于使用注解处理器。Java SE5扩展了反射机制的API，以帮助程序员快速的构造自定义注解处理器。注解处理器类库(java.lang.reflect.AnnotatedElement)：Java使用Annotation接口来代表程序元素前面的注解，该接口是所有Annotation类型的父接口..._java注解处理器作用

全国职业技能大赛高职组(最新职业院校技能大赛_大数据应用开发2023国赛样题解析-模块C：实时数据处理-任务二：实时指标计算)_大数据国赛样题-程序员宅基地

文章浏览阅读1.8k次，点赞27次，收藏28次。全国职业技能大赛高职组(最新职业院校技能大赛_大数据应用开发样题解析-模块B：数据采集-任务一：离线数据采集-程序员宅基地。_大数据国赛样题

ssm+mysql+微信小程序疫情防控小程序-计算机毕业设计源码73691_ssm+微信小程序-程序员宅基地

文章浏览阅读926次。本系统分为管理员和注册用户两个角色，主要有疫情新闻、疫情案例介绍、健康信息申报、行程信息申报、就医流程介绍、举报、在线留言、用户管理、信息统计等模块。用户需要先注册成为会员，成功登录后，可以查看网站发布的疫情新闻，可以查看疫情相关病例介绍，有助于疫情防范，还可以查看网站发布的重大疫情案例，了解疫情的发展状况，出行时候好做好防护，同时通过网站可以上报健康信息，以及上报行程信息，方便社区了解自己的出行情况；网站还发布了疫情状态下的就医流程，方便大家就医时候做好准备；同时网站还提供了举报功能，如果发现外来人员或_ssm+微信小程序

Linux 操作系统 022-串口/U盘/共享文件夹-程序员宅基地

文章浏览阅读296次，点赞3次，收藏9次。本节关键字：Linux、centos、串口、U盘、共享文件夹本节相关指令：echo、cat、mkdir、mount

解密C++新特性：内联函数、auto和基于范围的for循环-程序员宅基地

文章浏览阅读1.3k次，点赞45次，收藏29次。本篇主题为：解密C++新特性：内联函数、auto关键字和基于范围的for循环。

上岸整理：2023前端面试题-vue，小程序，js，css_今年的前端面试难不难-程序员宅基地

文章浏览阅读774次，点赞4次，收藏11次。1、浏览器常见的报错信息与含义2、304与204的区别，http缓存，强缓存，协商缓存3、浏览器从输入地址到渲染，经历了什么状态？4、vue的界面渲染，经过哪些过程（生命周期）5、三次握手，四次挥手6、重排与重绘7、用css实现一个三角形8、常见的flex布局，有哪些功能9、用css实现一个水平垂直居中10、null与undefined的区别11、虚拟dom12、深拷贝与浅拷贝13、es6新增的功能15、async await 与promise。_今年的前端面试难不难