node-webkit开发桌面应用

时间  2019-11-29
标签 node webkit 开发 桌面 应用 繁體版
原文   原文链接

Node-Webkit可以作什么呢？（打开连接看discuss）

github 项目源：https://github.com/rogerwang

node-webkit 是一个很神奇的桌面客户端项目,正如这个项目的名字,这个项目是由node 和 webkit 构成,简单来讲,就是你能够用HTML 5和 node 进行桌面客户端开发,并且客户端仍是同时支持在 WIN,MAC,LINUX运行. 下面,就用一个简单的例子来展现一下node-webkit的魅力.css

若是,你用过grunt,要建立一个node-webkit 很是简单,我已经写好了一个node-webkit的grunt-init的项目模板. 至于怎么安装这个模板,跟官方的教程同样. 若是你是windows 用户html

md %USERPROFILE%.grunt-init\node-webkit 
git clone git@github.com:youxiachai/grunt-init-node-webkit.git %USERPROFILE%.grunt-init\node-webkithtml5

linux or macnode

git clone git@github.com:youxiachai/grunt-init-node-webkit.git ~/.grunt-init/node-webkitlinux

你只须要用android

grunt-init node-webkitcss3

就能够建立完毕.c++

1
2
 
├─app.nw
└─test

app.nw 这个目录就是咱们准备要开始写的pc 客户端的项目文件夹,运行node-webkit项目很简单,只须要把node-webkit 的运行环境配置到环境变量,而后运行git

nw app.nw 就能够运行起来了. nodewebkit1github

PS: 若是你不想接触grunt,不过我建议仍是学一下grunt,你能够到https://github.com/rogerwang/node-webkit#quick-start 学习如何启动一个node-webkit应用.

oscdesk1

oscdesk2

这个就是所谓的 win 8 风格的客户端了吧....界面用的框架是这货:http://aozora.github.io/bootmetro/ 90% 的时间都是调整界面...蛋疼死了......连个 win8 风格的progress 都没..让我很是伤心..也多是alpha 的缘由吧. 不过最后的效果,仍是很难看,就凑合着过去吧....

基于node-webkit 开发pc 客户端语言支持 c/c++,html5,css3, js,node api.好了,如今咱们开始用html 5 + css3 写一个pc 客户端吧. node-webkit本质就是一个能够跑node 的浏览器,因此,咱们用web 开发的技巧来开发pc 客户端毫无问题.

首先,打开toolbar,在package.json文件里面有个toolbar的参数,设置为true便可,就会见到以下图所示:

toolbar

点击那个三横线的按钮,一个chrome 风的调试窗口就出来了.

console

开发的时候,咱们修改完文件,并不须要从新运行程序来看结果,咱们,能够直接点击左边的刷新按钮便可看到咱们修改的运行结果.用node-webkit开发客户端是否是很方便了!

那么接下来,要开发一个oschina pc 客户端,咱们只须要知道,相关api 就好了,从android 客户端源码里面能够获得相关api...具体代码在app/model/oschinaApi.js 文件里面.

node-webkit,已经吧相关的安全限制已经去掉,因此说,用node-webkit开发pc客户端,用webkit 发的请求不受同源限制. 用node-webkit 开发一些restful 应用是很是舒服的事情,只要有个不错的界面.关于node-webkit的东西也就这么些了,剩下的就是web 开发,不在本文node-webkit范围内,因此就再也不啰嗦..

界面:

http://aozora.github.io/bootmetro/

https://github.com/cubiq/iscroll

模板引擎:

https://github.com/visionmedia/ejs

Github:

https://github.com/youxiachai/osChinaDesktopClient

git@osc:

http://git.oschina.net/youxiachai/oschinadesktopclient

程序运行: windows用户之间去到app.nw 目录下运行 nw.exe 便可.

cd app.nw 
nw.exe

linux 或者mac 用户 把除 index.html,package.json,app 之外的文件删除,而后将node-webkit 运行环境配到环境变量中运行

nw app.nw

  以前有一篇博文提到过node-webkit和有道的hex，今天就node-webkit开发作一个详细介绍吧。 顾名思义，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，内容以下：

  
  
  
  

   
   
   
   
 
    
 
     [html] 
     view plain 
     copy 
     
 
    
 
   

   
   
   
   
     
    
  1. <!DOCTYPE html>  
    2.  
    
  2. <html>  
    3.  
    
  3.   <head>  
    4.  
    
  4.     <title>Hello World!</title>  
    5.  
    
  5.   </head>  
    6.  
    
  6.   <body>  
    7.  
    
  7.     <h1>Hello node-webkit!</h1>  
    8.  
    
  8.     We are using node.js <script>document.write(process.version)</script>.  
    9.  
    
  9.   </body>  
    10.  
    
  10. </html>  
    11.  
    
  11.    
    12.  
    
  12.         在同一级目录下再建一个package.json，内容以下：  
    13.  
    
  13.    
    14.  
    
  14. {  
    15.  
    
  15.   "name": "nw-demo",  
    16.  
    
  16.   "main": "example1.html"  
    17.  
    
  17. }  
    18.  
    
  18.    
    19.  
   

  
  
  
  

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



        注意，用什么工具压缩无所谓，可是必定要压缩成ZIP格式。

        把example1.zip拷贝到与nw.exe同级的目录下，以下图：

 



        而后用鼠标把example1.zip拖动到nw.exe上运行（用命令行也能够，不过在windows下仍是直接拖比较爽一点），效果以下图：


        这样，第一个例子就完成了，而后你本身能够去玩儿了。

        按照官方的搞法，example1.zip可更名成example1.nw，这样显得更加高大上一些。不过因为小僧的BIG一贯比较低，私认为用.zip做为后缀也没啥不能够。

 

来点儿JS

        第一个例子代码很是简单，你能够本身加点儿你最熟悉的JS代码，好比这样：

  
  
  
  

   
   
   
   
 
    
 
     [html] 
     view plain 
     copy 
     
 
    
 
   

   
   
   
   
     
    
  1. <!DOCTYPE html>  
    2.  
    
  2. <html>  
    3.  
    
  3.   <head>  
    4.  
    
  4.     <title>Example2</title>  
    5.  
    
  5.     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />  
    6.  
    
  6.   </head>  
    7.  
    
  7.   <body>  
    8.  
    
  8.     <h1>Example2</h1>  
    9.  
    
  9.     <script>  
    10.  
    
  10.         alert("This is example2!");  
    11.  
    
  11.     </script>  
    12.  
    
  12.   </body>  
    13.  
    
  13. </html>  
    14.

        显然，这里有不少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命令能够实现：

  
  
  
  

   
   
   
   
 
    
 
     [html] 
     view plain 
     copy 
     
 
    
 
   

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

        注意，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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程