NW.js 基于 Chromium 和 Node.js 的应用程序框架 - 文章教程

NW.js 基于 Chromium 和 Node.js 的应用程序框架

发布于 2019-11-25 字数 3076 浏览 1407 评论 0

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

NW.js 基于 Chromium 和 Node.js 的应用程序框架

功能特性

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

快速入门

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

客户端代码

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

<!DOCTYPE html>
<html>
<head>
<meta 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>.
</body>
</html>

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

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

运行

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’

更多设置

将 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,程序将无边框显示。

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论