心血来潮突然想用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应用时瞎β操作的代码（看看就好）：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <link rel="stylesheet" href="index.css">

     <script src="jquery-3.1.1.min.js"></script>

 </head>

 <body>

 <div id="top">

     <span id="logo">CosName</span>

     <div id="drag"></div>

         <ul id="nav">

             <li id="close"><a href="#" id="close_btn"></a></li>

             <li id="large"><a href="#" id="a" class="large_btn"></a></li>

             <li id="mini"><a href="#" id="mini_btn"></a></li>

         </ul>

     </ul>

 </div>

 <div id="play_area">

     <video src="" width="400" height="400" controls="controls  "></video>

 </div>

 <div id="movie_list">

     <ul>

         <li><a href=""></a></li>

     </ul>

 </div>

 <div id="footer">

 </div>

 </body>

 </html>

 <script src="index.js" type="text/javascript"></script>

Html

 *{

     margin:;

     padding:;

     background-color: #3C3C3C;

     color: lightgray;

     outline: none;

     user-select: none;

 }

 ul{

     list-style: none;

 }

 a{

     text-decoration: none;

 }

 #top{

     width: 100%;

     height: 30px;

     border-bottom: 1px solid #272727;

 }

 #logo{

     position: absolute;

     left: 10px;

     right:;

     width: 80px;

     height: 30px;

     line-height: 30px;

     font-weight: bold;

 }

 #drag{

     width: 91%;

     height: 30px;

     -webkit-app-region: drag;

     display: inline-block;

 }

 #nav{

     position: absolute;

     display: inline-block;

     right:;

     width: 90px;

     height: 30px;

     background-color: rebeccapurple;

 }

 #nav li{

     width: 30px;

     height: 30px;

     float: right;

 }

 #nav li a{

     display: inline-block;

     width: 30px;

     height: 30px;

     z-index:;

 }

 #close a{

     background: url("close.png") 0 no-repeat;

     background-size: 20px;

     background-position: center;

 }

 #large a{

     background: url("large.png") 0 no-repeat;

     background-size: 20px;

     background-position: center;

 }

 #mini a{

     background: url("mini.png") 0 no-repeat;

     background-size: 20px;

     background-position: center;

 }

 #close a:hover,#a:hover,#mini a:hover{

     opacity: 0.7;

 }

 #play_area{

     margin: 30px 0 0 20px;

     width: 400px;

     height: 400px;

     border: 1px solid #272727;

     box-shadow: 0 1px 2px #8E8E8E;

 }

 #footer{

     position: fixed;

     bottom:;

     width: 100%;

     height: 32px;

     border-top: 1px solid #272727;

     box-shadow: 0 1px 2px #8E8E8E;

 }

css

 var gui = require('nw.gui');

 var win = gui.Window.get();

 $('#close_btn').click(function () {

     win.close();

 })

 $("#mini_btn").click(function () {

     win.minimize();

 })

 $("#a").click(function () {

     if($(this).attr("id")=="a"){

         win.maximize();

         $(this).css("backgroundImage","url('restore.png')")

         $(this).attr({id:"b"});

     }else{

         win.restore();

         $(this).css("backgroundImage","url('large.png')")

         $(this).attr({id:"a"});

     }

 })

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

node-webkit制作桌面应用的更多相关文章

  1. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  2. Fenix – 基于 Node.js 的桌面静态 Web 服务器

    Fenix 是一个提供给开发人员使用的简单的桌面静态 Web 服务器,基于 Node.js 开发.您可以同时在上面运行任意数量的项目,特别适合前端开发人员使用. 您可以通过免费的 Node.js 控制 ...

  3. 基于node.js制作爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  4. 在deepin系统中制作桌面快捷方式

    在使用deepin-wine 安装一些软件的时候,每次启动都需要到.deepinwine目录下运行deepin-wine xx.exe.笔者在安装过HeidiSql之后,一直苦于这种情况.比较好的解决 ...

  5. electron+vue制作桌面应用--自定义标题栏

    electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分 ...

  6. electron利用nodejs+移动端技术跨平台桌面应用开发框架——记录下，类似node webkit！

    Build cross platform desktop appswith JavaScript, HTML, and CSS Electron: 1.6.8Node: 7.4.0Chromium:  ...

  7. heX：用HTML5和Node.JS开发桌面应用

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  8. (转)heX——基于 HTML5 和 Node.JS 开发桌面应用

    本文转载自:http://techblog.youdao.com/?p=685 简介:heX,一个允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.是你开发 ...

  9. node.js 开发桌面程序， 10个令人惊讶的NodeJS开源项目

    用 node-webkit 开源框架. 做企业站,杠杠地 包括电子书和支付宝系统都是node开发的,. 接收传感器发送的数据再运算...对水泵.风机.空调这些硬件进行远程控制. 细数10个令人惊讶的N ...

随机推荐

  1. Jsp属性范围

    IDE:MyEclipse 2014(自带Tomcat 7) Web项目路径: Web项目配置信息: WebRoot --WEB-INF --web.xml <?xml version=&quo ...

  2. C++中string类的使用方法

    如果所比较的两个string 相等,则返回0: 操作string 大于参数string,返回 正数:操作string 小于参数string,返回负数. (1) 比较操作string 与 _Str 或C ...

  3. PopupWindow的基本使用

    1>写好布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  4. JQuery checkbox全选多次点击后无效解决方法

    1. jquery设置checkbox时: <input type="checkbox" id="ckAll"/> $(function(){ va ...

  5. Unity3D ——强大的跨平台3D游戏开发工具（四）

    第六章 Unity3D中的C#Script编程的注意事项 也许您在学习Unity3D之前,已经是一位C#的编程高手了.但在Unity3D中的C#并不像真正的C#那般强大,在Unity3D的C#中必须全 ...

  6. Asp.Net集群中Session共享

    今天遇到了这个问题,于是研究了一下.要解决这个问题,首先就要明白一些Session的机理.Session在服务器是以散列表形式存在的,我们都知道Session是会话级的,每个用户访问都会生成一个Ses ...

  7. java系列--HTTP协议

    一.HTTP请求信息 请求行 请求头 空行 消息体 1.防盗链: 枚举类型: 二.中文乱码问题 1.Get提交 String username = request.getParameter(" ...

  8. redis 2 字符串 和 hash

    string是最简单的类型,一个key对应一个value,string类型是二进制安全的.redis的string可以包含任何数据,比如JPG图片或者序列化的对象 操作    set    设置key ...

  9. 建立、配置和使用Activity——Activity

    Activity是Android应用中最重要.最常见的应用组件(此处的组件是粗粒度的系统组成部分,并非指界面控件:widget).Android应用的一个重要组成部分就是开发Activity,下 面将 ...

  10. 选项卡（TabHost）的功能与用法

    TabHost是一种非常实用的组件,TabHost可以很方便地在窗口上放置多个便签页,每个标签页相当于获得了一个与外部容器相同大小的组件摆法区域.通过这种方式,就可以在一个容器里放置更多组件,例如手机 ...