文档章节

node-webkit:开发桌面+WEB混合型应用的神器

随影求是
 随影求是
发布于 2014/01/31 19:18
字数 2395
阅读 1.9K
收藏 63

大漠穷秋 2014-01-31

 

bla...bla...

 

        顾名思义,node-webkit就是nodejs+webkit。

 

        这样做的好处显而易见,核心奥义在于,用nodejs来进行本地化调用,用webkit来解析和执行HTML+JS。

 

 

快速上手

 

下载node-webkit

 

        点击这里:

 

        https://github.com/rogerwang/node-webkit

 

        找到Downloads这一小节,然后下载对应平台的node-webkit预编译包。(为了介绍起来方便,本文后续内容全部针对windows平台,OSX和linux平台上的操作类似,就不做特意说明了。)

 

        下载完之后解压,可以看到如下内容:

 



 

 

        双击nw.exe直接运行,看到如下界面说明一切都ok,在你的机器上可以运行:

 



 

 

Hello nw

 

        老规矩,先来Hello World!

 

        建一个example1.html,内容如下:

 

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello node-webkit!</h1>
    We are using node.js <script>document.write(process.version)</script>.
  </body>
</html>

 

        在同一级目录下再建一个package.json,内容如下:

 

{
  "name": "nw-demo",
  "main": "example1.html"
}

 

        好了,用你机器上的压缩工具,rar或者7z或者神马神马的,把这两个文件压缩成exampl1.zip,如下图所示:

 



 

 

 

 

 

        注意,用什么工具压缩无所谓,但是一定要压缩成ZIP格式。

 

        把example1.zip拷贝到与nw.exe同级的目录下,如下图:

 



 

 

        然后用鼠标把example1.zip拖动到nw.exe上运行(用命令行也可以,不过在windows下还是直接拖比较爽一点),效果如下图:

 



 

 

        这样,第一个例子就完成了,然后你自己可以去玩儿了。

 

        按照官方的搞法,example1.zip可改名成example1.nw,这样显得更加高大上一些。不过由于小僧的BIG一向比较低,私认为用.zip作为后缀也没啥不可以。

 

 

来点儿JS

 

        第一个例子代码非常简单,你可以自己加点儿你最熟悉的JS代码,比如这样:

 

<!DOCTYPE html>
<html>
  <head>
    <title>Example2</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  </head>
  <body>
    <h1>Example2</h1>
    <script>
        alert("This is example2!");
    </script>
  </body>
</html>

 

        显然,这里有很多HTML5的习惯写法,那当然是必须的对吧?因为webkit在google的调教之下早已成了HTML5的开路先锋了!

 

 

打包和分发

 



 

 

        如上图,很显然,要想让我们的应用跑起来,以上这些dll和pak文件是少不了的(至于每个文件是用来干嘛的,请参见官方的描述文档)。

 

        那么,对于我们做的example1这个简单的应用,怎么让我们的用户能运行它呢?当然,让我们的用户自己去下载node-webkit然后解压运行,这也算一种办法,这样的话我们只要把example1.zip文件扔给他就可以了。

 

        不过这样总觉得有点儿奇怪,要是能把所有相关的内容都打包成一个独立的exe文件就好了,比如打包成example1.exe,这样用户拿到之后直接双击就可以运行,这样显然是极好的。

 

        OK,let's go!

 

        首先,我们要合并example1.zip和nw.exe,形成一个新文件,名为example1.exe,这一点我们通过windows的命令行下的copy命令可以实现:

 

copy /b nw.exe+example1.zip example1.exe

 

        注意,nw.exe必须放在+号前面。

 

        这样就生成了一个名为example1.exe的文件,双击这个文件,看到的效果和第一个例子相同。很显然,这个example1.exe还是要依 赖那些dll文件才能运行,所以,这时候我们需要一款打包工具来帮助我们把这些example1.exe和dll文件都打包到一起,它就是Enigma Virtual Box ,大家可以点击这里下载安装:

 

http://enigmaprotector.com/assets/files/enigmavb.exe

 

        安装完成之后启动,看到如下界面:

 



 

 

        打包过程截图(请按照图中的配置操作):

 



 

 

        点击右下角的Process按钮开始打包,最终获得了一个名为example1_boxed.exe的文件。把这个文件拷贝到其它任意目录中双击,如果能顺利运行,说明打包成功!你可以把它分发给你的用户了!

 

        官方的文档上还介绍了其它几种打包分发方式,不过看起来都不是很实用,有兴趣的参见这里:

 

https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps

 

 

未竟的主题

 

        以上就是关于node-webkit用法的一些简单示例,你可以沿着这个方向自己去探索了。有热心的网友把我们的Ext4.1中文文档打了一个包出来,可以到脚本娃娃的群共享(号83163037)去下载(比较大,不好放上来),入群口令nw

 

 

如何最小化发布?

 

        在官方发布的内容里面,icudt.dll这个文件有9724k,nw.exe有38396k,很显然,这个体积略显庞大了一些,如果我们的应用本身很小,只有几百K,而打包出来的东西有几十M显然是不合适的,这样非常不方便拷贝和网络传播。

 

        很显然,我们还需要一款工具,能够根据需要进行最小化的打包发布。

 

        不过目前我还没找到这样的好东东,各路大神如有知道的,求指教。

 

 

如何利用nodejs调用本地接口?

 

        很显然,既然nodejs都被打包进来了,网上众多的npm模块都是可以拿过来使用的,具体做法官方主页上都有比较详细的介绍,参见这里https://github.com/rogerwang/node-webkit

 

 

其它案例

 

        官方的主页上还展示了众多使用node-webkit制作的应用,各位自行点击查看即可。

 

展望未来

 

其实这条路老早就有人在走

 

        网上有很多人在争论,未来究竟是原生的应用会胜出,还是WEB APP会胜出,实际上这两者并不是你死我活的关系,而是会互相融合,走向【混合型应用】这样一种形态。

 

先看几个界面:

 



 

 

 

 

 

        大家可以把自己的网络断掉测试以上界面,QQ有时候甚至能爆出JS错误,哈哈。

 

        2011年的时候,我发过一篇文章,《未来五年,桌面应用和WEB走向融合》,当时只是因为看到诸如酷我音乐、腾讯QQ这些桌面应用的开发方式而有 所感悟,对于桌面应用会以什么样的形式和B/S开发模式融合在一起并没有确切的想法。而最近由于打包Ext4.1中文文档的缘故知道了node- webkit,突然有一种恍然大悟的赶脚!

 

        当然,酷我音乐盒和疼讯目前是用什么样的技术实现的小僧不知道其中的细节(人家也不想让外人知道对吧?)。不过,小僧相信,对于屌丝单兵作战来说,疼讯的实现方式肯定会比node-webkit更加复杂,目测个人无法模仿。

 

 

跨平台+多终端的神器

 

        毫无疑问,这货会成为2014年的一款神器。因为它具备了以下这些无可比拟的优势:

 

  1. 人力成本最低:招一个会C++的码农要花多少钱?招一个牛逼哄哄的既会C++还对QT、MFC等了如指掌的码 农又要花多少钱?对比一下,招一个会JS+CSS的呢?如果你是老板,你怎么想?再说了,市面上会C++的码农更多,还是会JS+CSS的码农更多?无需 小僧多言,其中的奥妙您自个儿体会。
  2. APP的体积更小:列位一定还记得当年大明湖畔的疼讯QQ只有十几M的体积,俗话说,岁月是把杀猪刀,在集成了疼讯的各种应用之后,如今的QQ身材早已发福走形。可以想象,如果QQ不使用嵌入浏览器内核的方式,恐怕体积早就超过100M了吧!
  3. 不需要整体更新APP:如果是按照传统的方式开发桌面应用,每次升级的时候都需要用户重新下载整个应用,比如疼讯QQ。但是用node-webkit的这种方式,可以很好地避免这个问题,就像网站一样,网站内容可以不断更新,但是浏览器本身的更新不需要那么频繁。
  4. 跨平台:这一点是由NodeJS来保证的。
  5. 多终端:由于nodejs和chromium本身都是可以在桌面平台和移动平台上运行的,因此用这货来支持多终端开发,保持技术栈的一致性是非常合适的。
  6. 完善的工具链:由于nodejs的兴起,它下面的npm模块数量已经有几十万个;而各种基于chrome内核的定制版浏览器就不用再介绍了。加上传统B/S开发模式下已经具备的完整开发和设计工具,用node-webkit来开发桌面应用已经具备了完善的工具链。

 

参考资料

 

        关于node-webkit作者的介绍参见这里:

 

        http://www.csdn.net/article/2014-01-08/2818066-Node-Webkit

 

        node-webkit在github上的地址:

 

        https://github.com/rogerwang/node-webkit

 

        由于node-webkit的作者提供的文档都是E文的,为了方便大中华局域网内的一众屌丝,我的好基友@老男孩对文档做了一些翻译,参见这里:

 

        https://github.com/liu78778/node-webkit

本文转载自:http://damoqiongqiu.iteye.com/blog/2010720

随影求是
粉丝 40
博文 182
码字总数 6102
作品 0
南岸
高级程序员
私信 提问
加载中

评论(4)

A
AikeraAutoman
说好的同学见过这种方案开发出来的可执行文件的体积吗?
ellan
ellan
不错
bygreencn
bygreencn
perfect
跟猪谈理想
跟猪谈理想
win8的应用支持原生js开发
开发桌面应用框架 - Atom Shell

Atom Shell 现已改名为 Electron atom-shell 是 GitHub 随 Atom 一起开源的跨操作系统(Windows,Linux,MacOS X)的利用 Web 技术(Node.js、JavaScript、HTML 5)开发桌面应用的框架。Ato...

匿名
2014/08/04
2.6W
16
用node-webkit 创建 osChina PC 客户端

7月 3 2013 导言 node-webkit 是一个很神奇的桌面客户端项目,正如这个项目的名字,这个项目是由node 和 webkit 构成,简单来说,就是你可以用HTML 5和 node 进行桌面客户端开发,而且客户端还是同...

打杂程序猿
2013/07/03
7.2K
29
使用node-webkit开发exe窗口程序

首发:个人博客,更新&纠错&回复 ====关于原生程序与壳中程序的议论begin==== 在所有用户windows机器上都能直接跑的程序,如果不采用微软系的语言,如VB,C++,C#等,而采用Java,Python,R...

祁达方
2015/11/20
320
0
Web浏览器引擎 - WebKit

WebKit是开源的Web浏览器引擎,苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发的。WebKit 还支持移动设备和手机,包括iPhone和Android手机都是使用WebKit做为浏览器的核心。 WebK...

匿名
2008/09/22
11.6W
7
node-webkit v0.7.2 发布

node-webkit 是一个基于 Chromium 和 Node.js 的 Web 运行环境,可让你直接在 DOM 中调用 Node.js 模块,并可使用任何现有的 Web 技术来编写本地应用。 下载地址: https://s3.amazonaws.com...

打杂程序猿
2013/08/27
2.6K
11

没有更多内容

加载失败,请刷新页面

加载更多

12、日志系统解析

1.1、日志介绍 日志分为日志门面和日志实现,日志实现是日志的门面的具体实现.日志门面框架指的是日志实现的抽象层,定义log.info、log.error等方法,日志的门面框架主要与两个,JCL和SLF4J日志...

神锋
16分钟前
15
0
5步实现规模化的Kubernetes CI/CD 流水线

一、背景 在近几年,Kubernetes迅速成为了容器编排的事实上的开源标准。与虚拟机不同,Kubernetes在抽象化基础架构的同时可靠地大规模编排容器,这可以帮助开发人员将工作负载与基础架构的复...

JFrog杰蛙
20分钟前
20
0
Postgrsql 使用CASE WHEN解决不定列问题

CASE WHEN condition THEN column END as name 示例如下: SELECT WIDTH_BUCKET( public.ST_X ( geom ),107.63636363636364,114.90916363636364,10 )grid_x,WIDTH_BUCKET( public.ST_Y ( g......

boonya
29分钟前
50
0
基于james实现在物理隔离环境下邮件的传输

基于james实现在物理隔离环境下邮件的传输 背景 为了保护高安全级别的网络安全,国家保密局于1999年12月27日发布了涉密网络的物理隔离要求,并于2000年1月1日颁布实施的《计算机信息系统国际联...

ezsync小智
36分钟前
44
0
Kafka 数据可靠性、消息发送传输

本篇分别介绍 数据可靠性保障 消息发送模式 消息传输保障 数据可靠性保障 当Producer向Leader发送数据时,可以通过request.required.acks参数来设置数据可靠性的级别,各个级别及其含义如下表...

moon888
39分钟前
78
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部