你所不知道的Node-webkit(一)
发布在不一样的Node-webkit开发2013年12月17日view:12836
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

Node-webkit

一、什么是Node-webkit?

基于node.js和chromium的应用程序实时运行环境,可运行通过HTML5、CSS3、Javascript来编写的本地应用程序。node.js和webkit的结合体,webkit提供DOM操作,node.js提供本地化操作;且将二者的context完全整合,可在HTML代码中直接使用node.js的API。

项目地址:https://github.com/rogerwang/node-webkit/wiki

二、来看看别人都拿Node-webkit干什么?

优秀作品

https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and-companies-using-node-webkit

官方例子

https://github.com/zcbenz/nw-sample-apps

三、一个完整的项目流程

step1 创建项目

mkdir nw-demoimpossible.

cd nw-demo

vi package.json

{
  "name": "nw-demo",
  "description": "A sample app to demonstrate the use of grunt node webkit builder",
  "devDependencies": {
      "grunt": "~0.4.1",
      "grunt-node-webkit-builder": "~0.1.6"
    }
}

vi Gruntfile.js

//编写发布的grunt配置文件
module.exports = function(grunt) {

 grunt.initConfig({
    nodewebkit: {
            options: {
                    build_dir: './build', // Where the build version of my node-webkit app is saved
                    credits: './public/credits.html',
                    mac: true, // We want to build it for mac
                    win: false, // We want to build it for win
                    linux32: false, // We don't need linux32
                    linux64: true, // We don't need linux64
                  },
            src: './public/**/*' // Your node-webkit app
          },
    });

  grunt.loadNpmTasks('grunt-node-webkit-builder');
  grunt.registerTask('default', ['nodewebkit']);

};

mkdir public

cd public

vi index.html

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

vi package.json

{
  "name": "nw-demo",
  "main": "index.html",
  "version": "0.0.1"
}

Step2: 项目生成

cd nw-demo

grunt

项目执行文件生成在 build/releases/nw-demo/linux64/nw-demo ,注意:请根据不同的系统版本配置不同的生成选项。

三、常用项目配置选项

package.json

{
  "main": "index.html",  //nw 执行程序入口
  "name": "nw-demo", //程序名称
  "description": "demo app of node-webkit", //程序描述
  "version": "0.1.0", //程序版本
  "keywords": [ "demo", "node-webkit" ], //关键词
  "window": {
    "title": "node-webkit demo", //窗口名字,启动的时候,显示的名称
    "icon": "link.png", //icon图标
    "toolbar": true,  //工具栏,是否隐藏
    "frame": false, //是否隐藏边框
    "width": 800,  //宽
    "height": 500, //高
    "position": "mouse", 
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  },
  "webkit": {
    "plugin": true //是否启用插件,支持flash
  }
}

四、优点与缺点

结束上面入门级的介绍,来谈谈Node-webkit的优点:

  1. 对于某些场景的用户,可以通过打包Node-webkit的方式,让自己的网站和浏览器打包,避免对浏览器进行兼容性开发。
  2. web开发一件积累了大量的gui开发经验,要多华丽,有多华丽,基于webkit内核的node-webkit,拥有浏览器的最新特性,支持各种酷炫特效。
  3. 支持Node.js模块调用,轻松调用本地资源,突破传统浏览器的沙箱限制。

缺点:

1.因为协议的原因,部分像mp3等GPL协议的,并没有合并到node-webkit项目当中,一些理想所当然的html5标签,实际上无法正常调用,例如<audio>无法正常支持mp3,需要支持Mp3播放,某些视频格式播发,权衡最后,还是得选择flash插件播放。

2.打包后体积由30M左右,对于很多客户来说,是难以接受的。

五、开发体验

笔者,最近做了两个Node-webkit开发,其中一种是基于Node-webkit的嵌入式系统开发,公司的项目,一个是私人开源项目,Jing.fm客户端。

不一样的开发思路

传统做法,肯定会将Jing.fm单纯地本地化,弄个换个按钮,显示专辑信息就完事了,其实这还真没有发挥Node-webkit的威力,单纯地将一个网页变成客户端的形式展示而已。

解放Node-webkit的力量?

突破浏览器的沙箱限制,直接操作本地文件。在package.json里面,拥有一个叫node-remote的选项,打开这个选项,你的网页就能直接操作本地文件,可能这样说明,你还不能第一时间反应过来,你可以想象,只要打开了node-remote的白名单,假如我的白名单里面由www.baidu.com意味着,只要我在node-webkit的浏览器上,baidu就拥有访问我本地文件的权限,执行Node.js代码的权限。如果Node-webkit打开的是我们编写的网页,我们完全可以在网页里面写上var fs =require('fs);

启动了选项

  • 我们可以通过网页操作计算机的串口
  • 启动一个由Node.js编写的web Server
  • 启动一个python编写的脚本

well,nothing is impossible. 来看看我的项目,如何运用了这个特性, - 项目地址:http://jn.whattoc.com/profile - github地址:https://github.com/youyudehexie/Jing.fm-Ndual - 博客地址:http://blog.whattoc.com/2013/12/16/node-webkit01/

项目的核心部分,就是利用手机的html5页面控制客户端的操作行为,例如换歌,音量调整和暂停/播放等操作,同时,需要保证操作的流畅性,要实现上面说所的,首先,要用的websocket,利用websocket发送消息到客户端,保证流程性,就需要使用本地的 websocket server,这部分完全可以交付给Node-webkit来实现,同时,因为项目当中用到了flash player,因为flash player存在沙箱,是不能本地执行的,必须放到web server,但因为很难要求用户装一个web server,所以我写了一个服务器程序,放在公网上,只要Node-webkit启动的时候,记载这个网页就能完成我想实现的功能,因为我已经打开了Node-remote 选项,所以即使node-webkit跑的不是本地文件,我也可以控制用户的本地资源,同时因为node-webkit加载的是我服务器的页面,也方便我日后更新,不需要用户重新下载客户端。感觉还行。

评论
发表评论
2年前

step 2 项目生成, 这一部我没有看懂,尝试了很久也没有搞懂. 后来在别的教程里面看到,可以在CMD里面执行下面的命令 copy /b nw.exe+filename.nw newfilename.exe 来执行. 我试了一下,真的可以.

不过到现在还没明白,不知道作者文中用的是什么办法.求明示~

3年前

你好 我有个疑问 这里打包合并出来的 windows下文件 里面米有package.json 是合并在exe里面了吗 如果我想独立出来 我该怎么做

4年前

看了jing这个网站,觉得很有创意也很漂亮。但是有一个致命的弱点就是音乐反应慢,特别慢,其他网站三五秒就可以开始播放了,但是jing得两分钟,这个是绝对无法忍受的啊!

4年前

大赞!

4年前

好文,希望持续更新

WRITTEN BY
PUBLISHED IN
不一样的Node-webkit开发

node-webkit跟传统的gui开发,web开发思路不一样,如果只遵循某个方向的思路进行开发,会限制node-webkit的威力,本栏目,将会通过具体项目的介绍了,来为读者带来新的开发体验

我的收藏