概述

node-webkit是一个支持跨操作系统(Windows,Linux,MacOS)的利用流行的Web技术(Node.JS, JavaScript,HTML5)来编写应用程序的平台。应用程序开发人员可以轻松的利用Web技术来实现各种应用程序。node-webkit性能和特色已经让它成为当今世界领先的web技术应用程序平台。

相关链接

项目地址
发布相关
教程
中文社区
截图功能
截图功能2
vim集成

配置安装

  1. 找到项目首页的download节点,下载对应平台的预编译包
  2. 解压,运行nw.exe (linux平台为nw) 如果显示node webkit的窗口,则表示环境运行成功
    如果在终端运行,提示缺少lib则找对应的lib
    gconf
    dev-libs/nss
    net-print/cups
    值得注意的是,cups需要禁用内核的usb打印功能

hello world

编写

node webkit实际就是一个本地的web引擎,对于每个程序来说
–项目文件夹
|
|-main.html 窗口首页
|-package.json node webkit读取的应用程序配置

以下为package.json文件的必填配置

{
    "name":"app name",
    "main":"main.html"
}

以下为main.html文件的例子

<!DOCTYPE html>
<html><body><h1>hello world</h1></body></html>

运行

方法1:
nw.exe folder_name
方法2:
用zip压缩整个项目文件夹
nw.exe app.zip
方法3:
1. zip压缩项目的所有文件(注意:不包含项目文件夹本身)
2. 复制项目.zip 文件到nw.exe同级目录
3. copy /b nw.exe+project.zip project.exe (如果执行project.exe正常,就表示成功)
4. 打开Enigma Virtual Box Input File 选择project.exe,并把nw.exe的相关文件添加进来.然后执行process.

使用node模块

参考项目链接:
https://github.com/rogerwang/node-webkit/wiki/Using-Node-modules
模块分为三种,node内置模块、js模块、以及c++模块

安装sqlite3模块

node-webkit对应的sqlite3模块属于c++开发的模块,由于nodejs与node-webkit的ABI(application binary interface)不同,所以需要重新编译适应node-webkit的版本

系统要求:

  1. 编译器
    win:vc++ 2010 express 或者 vs2010
    linux:gcc
  2. python2.7 并且已经添加到系统环境变量,对于已经添加的python3.x版,最好先在环境变量里去掉

安装

  1. 安装nodejs
    win:在nodejs官网下载对应的nodejs安装文件.安装文件附带npm工具
    https://nodejs.org/
    linux:通常可以在包管理器中找到
  2. 安装编译工具
    开始菜单运行nodejs命令行,安装编译模块
    npm install nw-gyp -g
    npm install nw-pre-gyp -g 如果找不到nw-pre-gyp 使用node-pre-gyp
    npm install node-pre-gyp -g
    npm install node-gyp -g
    -g参数代表全局安装,保存在C:\Users\CURRENT_USER\AppData\Roaming\npm\node_modules目录
    如果提示python版本问题可以执行
    npm config set python /path/of/python27
  3. 安装sqlite3
    npm install sqlit3
    似乎直接在node-webkit项目里安装会提示package.json格式错误,在其他位置就没有问题.也可以用-g执行全局安装
  4. 重新编译sqlite3
    cd node_modules/sqlite3
    node-pre-gyp rebuild --runtime=node-webkit --target=0.12.2 --target_arch=ia32 --target_platform=win32
    编译node-webkit 0.12.2版win32平台32位版版本

–targe:node-webkit版本,根据官方要求,每次node-webkit更新,都需要重新编译
–target_arch:操作系统模式(32位/64位) 可选值: ia32,x64
–target_platform:主机平台 可选值:linux,darwin,win32,sunos,freebsd,openbsd,aix

最好在对应的平台编译,之前测试在win7 64编译 linux 64,编译成功.但是在linux上运行提示ELF头错误.

  1. 复制sqlite3文件夹到node-webkit项目根目录的node_modules文件夹内
  2. 测试
<script type="text/javascript">
  var sqlite3 = require('sqlite3').verbose();
  var db = new sqlite3.Database('data.db');
    db.serialize(function() {
    db.run("CREATE TABLE lorem (info TEXT)");

    var stmt = db.prepare("INSERT INTO lorem VALUES (?)");
    for (var i = 0; i < 10; i++) {
        stmt.run("Ipsum " + i);
    }
    stmt.finalize();
    db.each("SELECT rowid AS id, info FROM lorem", function(err, row) {
        console.log(row.id + ": " + row.info);
    });
  });
  db.close();
</script>

参考链接(有些过时):
http://www.cnblogs.com/spnt/p/3529860.html

其他技巧

不规则窗体

  1. package.json
  "window": {
    "max_width":320,
    "max_height":320,
    "transparent": true
  }

max_width/max_height 确保双击操作不会把窗口最大化
transparent 使用透明背景

  1. html使用背景透明的png图片
    <html>
    <head>
    <meta charset="utf-8">
    <title>alpha background</title>
    <style type="text/css" media="screen">
    /*可以拖拽*/
    body { 
        -webkit-user-select: none; 
        -webkit-app-region:drag;
    }
    
    /*禁止按钮的拖拽*/
    button {
        -webkit-app-region:no-drag;
    }
    
    .content {
        background-image:url(1.png);
        width:300px;
        height:300px;
        background-repeat:no-repeat;
        background-size:300px 300px;
    }
    
    .content > * {
        float:left;
        position:relative;
    }
    
    .content > span {
        left:120px;
        top:150px;
        font-size:38px;
    }
    .content > button {
        left:120px;
        top:250px;
    }
    
    </style>
    <script>
    var btnEvent = function(){
        var btn = document.getElementById("btnClose");
        var gui = require("nw.gui");
        gui.App.quit();
    };
    </script>
    </head>
    <body>
    <div>
        <div class="content">
            <span>苹果</span>
            <button id="btnClose" onclick="btnEvent();">退出</button>
        </div>
    
    </div>
    </body>
    </html>
  1. 启用透明效果
    nw --enable-transparent-visuals --disable-gpu /path/of/project

参考链接:https://github.com/nwjs/nw.js/wiki/Transparency