node.js webkit 项目 开启node.js 桌面应用
文章目录
- 为什么是 node.js 桌面应用
- 和传统桌面应用不同地方是
- 如何使用
- 玩转我们的第一个 node-webkit 项目吧
- 如何启动 node-webkit 项目
- 最后附上上面测试用的几个文件的源码:
- index.html
- package.json
为什么是 node.js 桌面应用
准确的说,这只是一个浏览器, node-webkit 项目是 chromium 和 node.js 搭建起来的本地运行时环境.
我们知道node.js 是javascript 在服务器端通过强大的 V8 引擎实现的.
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;">出自:<a style="color:white;" href="http://yijiebuyi.com/blog/d1e5620d1a980fe24316d3d4ab929a53.html" >node.js webkit 项目 开启node.js 桌面应用</a></p>