跳到主要内容

node.js webkit 项目 开启node.js 桌面应用

· 阅读需 4 分钟
一介布衣
一介布衣
全栈开发者 / 技术写作者
  • 文章目录

  • 为什么是 node.js 桌面应用

  • 和传统桌面应用不同地方是

  • 如何使用

  • 玩转我们的第一个 node-webkit 项目吧

  • 如何启动 node-webkit 项目

  • 最后附上上面测试用的几个文件的源码:

  • index.html

  • package.json

  • 为什么是 node.js 桌面应用

准确的说,这只是一个浏览器, node-webkit 项目是 chromium 和 node.js 搭建起来的本地运行时环境.

  1. 我们知道node.js 是javascript 在服务器端通过强大的 V8 引擎实现的.

  2. chromium 内置了 V8 引擎

所以 node-webkit 就这样结合起来了.

回到刚才的问题,为什么说是桌面应用

  • Node支持的与操作系统交互的功能，文件系统，网络 , 操作系统资源等，
    以及Node之上的第三方库都可以在node-webkit中进行使用

  • 所以他很像是一个桌面级应用,但是又有区别

和传统桌面应用不同地方是

它的UI 完全是 html + css 来实现,就如我们上面说的它就是一个浏览器,但是它要高于我们普通浏览网页用的浏览器,原因是 node-webkit 项目,由于内部集成 node.js ,所以可以方便访问本地系统,操作本地资源.

如何使用

以 mac 为例:

首先要下载 node-webkit

https://github.com/rogerwang/node-webkit

我选择了 Mac 10.7 64位

下载解压后,我把 node-webkit 目录copy 到了 应用列表文件夹中

然后我们设置一个别名,方便调用 node-webkit 工具

alias nw="/Applications/nwjs-v0.12.3-osx-x64/nwjs.app/Contents/MacOS/nwjs"

我把 应用列表中的 node-webkit 目录下的 nwjs 工具路径设置了一个别名 nw
然后把这个别名设置 copy 到 .bash_profile (使用 bash ) 和 .zshrc (使用 zsh )
然后 source 配置文件,立刻生效.

玩转我们的第一个 node-webkit 项目吧

我本地创建了一个文件夹 webkit

├── index.html
├── package.json
├── script
│       ├── app.js
│      └── jquery.min.js
└── style
        └── style.css

如何创建node-webkit项目 package.json 文件 请点击查看另外一篇博文

package.json 中各项的配置的意义请查看上面的链接,这里不再说明.

脚本文件夹 scripts ,样式文件夹 css ,index.html 就是一个简单的登录页面

如何启动 node-webkit 项目

方法一:

刚才不是创建了一个 node-webkit 应用 nw 的别名吗,这里我们就要用到了.

➜  /Users/zhangzhi/code  >nw webkit/

用上面的工具直接运行起来了 node-webkit 项目

  • 看上去和浏览器打开一个 登录页没有任何区别

  • 方法二:

直接将 webkit 目录压缩到 node-webkit 项目中

首先 CD 进入 webkit 项目目录下:

➜  /Users/zhangzhi/code/webkit  >zip -r \${PWD##*/}.nw *

指向上面命令把 当前目录的所有一切打包压缩到 ${PWD##*/}.nw 文件中

nw 文件就是 node-webkit 应用的缩写,此扩展名应用会直接使用 node-webkit 应用打开.

${PWD##*/} 是读取系统文件目录名作为 nw 文件的文件名

运行后,你会发现你的项目当前目录中多了一个 webkit.nw 的文件

然后双击打开 webkit.nw

最后附上上面测试用的几个文件的源码:

index.html

<html>

<head>

    <title>服务管理</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/main.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form id="login" action="login" method="post">
    <h1>Log In</h1>
    <fieldset id="inputs">
        <input id="username" name="userName" type="text" placeholder="Username" autofocus required>
        <input id="password" name="passWorld" type="password" placeholder="Password" required>
    </fieldset>
    <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">

    </fieldset>

</form>

    <script>

        // Load native UI library

        var gui = require('nw.gui');

        var win = gui.Window.get();

    </script> 

</body>

</html>

package.json

{
  "name": "ServerManage",
  "main": "index.html",
  "nodejs": true,
  "window": {
    "title": "Server Manage",
    "toolbar": false,
    "width": 480,
    "height": 350,
    "resizable": true,
    "show_in_taskbar": true,
    "frame": true,
    "kiosk": false,
    "position": "center"
  },
  "webkit": {
    "plugin": true
  },
  "chromium-args": "--enable-threaded-compositing"
}

```<p style="color:white;">