2016-04-17

nwjs快速入门

demo

本文介绍了 NW.js（node-webkit）的基本知识，通过本入门指南的学习，可以让你快速构建一个 NW.js 的桌面应用。

1. 简介

NW.js （原名 node-webkit）是一个基于 Chromium 和 node.js 的应用运行时，通过它可以用 HTML 和 JavaScript 编写原生应用程序。它还允许您从 DOM 调用 Node.js 的模块，实现了一个用所有 Web 技术来写原生应用程序的新的开发模式。

这里是使用 NW.js 的应用和公司列表，可以看到 NW.js 实际应用效果。

2. 功能特性

用现代 HTML5,CSS3,JS 和 WebGL 来编写应用程序。
完全支持 Node.js APIs 和所有其第三方模块 .
良好的性能:Node 和 WebKit 运行在相同的线程:函数调用是更简洁;对象在同一堆可以互相引用;
容易打包和分发应用程序。
支持 Linux、Mac OS X 和 Windows

3. 下载

地址: http://dl.nwjs.io/

4. 快速入门

我们新建一个目录 quick-start ，来代表项目名称。

5. 客户端代码

在 quick-start 目录下，创建 index.html :

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>NW.js 快速入门|www.waylau.com</title>
  </head>
  <body>
    <h1>NW.js 快速入门</h1>
    We are using node.js <script>document.write(process.version)</script>.
    <br/>
    More demos,see <a href="http://www.waylau.com" title="更多示例">www.waylau.com</a>
  </body>
</html>

在 quick-start 目录下，创建 package.json :

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

6. 运行

运行:

bash $ /path/to/nw .(假设当前目录包含 ‘package.json’)
注意: 在 Windows 系统, 拖动包含 package.json 文件夹 quick-start ，到 nw.exe 来打开它。

注意：在 OSX 系统,可执行编译文件是在隐藏目录的 .app 文件内。为了在 OSX 运行 node-webkit , 输入:

/path/to/nwjs.app/Contents/MacOS/nwjs . (假设当前目录包含 ‘package.json’)

7. 更多设置

将 quick-start 复制为另外要给项目 quick-start-window 。

修改 package.json 来设置程序。

{
  "name": "nw-quick-start-window-demo",
  "version": "0.0.1",
  "main": "index.html",
  "window": {
    "title": "nw-quick-start-window-demo",
    "toolbar": false,
    "frame": true,
    "show_in_taskbar":true,
    "width": 800,
    "height": 500,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  }
}

窗口外观常用属性包括：

title : 字符串，设置默认 title。
width/height : 主窗口的大小。
toolbar : bool 值。是否显示导航栏。
icon : 窗口的 icon。
position :字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。
min_width/min_height : 窗口的最小值。
max_width/max_height : 窗口显示的最大值。
resizable : bool 值。是否允许调整窗口大小。
always-on-top : bool 值。窗口置顶。
fullscreen : bool 值。是否全屏显示。
show_in_taskbar : 是否在任务栏显示图标。
frame : bool 值。如果设置为 false，程序将无边框显示。

8. 发布

本节以 Windows 环境下为例。

新建发布包

将下载的 NW.js 文件解压，复制一份作为项目的发布包模板，本例名称为 nwjs-v0.12.3-win-x64

压缩

将 quick-start 内的文件压缩成 .zip 文件 quick-start.zip ，修改文件后缀为 quick-start.nw (这个是管方的说法，其实不该后缀直接是 quick-start.zip 可以是可以)

合成

将 quick-start.nw 放入发布包 nwjs-v0.12.3-win-x64 ，

在命令下，切换到 nwjs-v0.12.3-win-x64 目录，并执行

copy /b nw.exe+quick-start.nw quick-start.exe

此时，生成了可执行文件 quick-start.exe ，双击即可运行程序

删除冗余

最终的发布包，未减少体积，可以删除项目用不到的冗余文件，由于 nw.exe 、 quick-start.nw 文件已经合成为了 quick-start.exe ,故删之。又因为该项目简单，没有用到媒体库，可以删除 nwjc.exe 、 ffmpegsumo.dll 等

源码

见： https://github.com/waylau/nwjs-demos 中的 quick-start 和 quick-start-window 。

赏

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

本文标题:nwjs快速入门

文章作者:John Doe

发布时间:2016年04月17日 - 01时54分

最后更新:2017年04月03日 - 14时17分

原始链接:http://yoursite.com/2016/04/17/tools-nwjs-demo/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。