NW.js的用途
NW.js 基于 Chromium 和 Node.js,从而能够在桌面app中使用浏览器开发技术并直接调用 Node.js 资源,甚至将一个web应用打包到本地也垂手可得。javascript
安装NW.js
能够从官网下载;html
推荐在开发时下载是sdk版,以使用DevTools前端
非sdk版也应同时下载,在发布时使用java
写一个 Hello World!
package.jsongit
{
"name": "test1",
"main": "index.html",
"window": { "width": 500, "height": 500, "resizable": false }}
入口文件指定为"index.html"github
若是指定一个js文件为入口,则能够先作一些初始化工做,而后手动启动UI界面:
nw.Window.open('index.html', {}, function(win) {});
web
index.htmljson
<html><head>
<meta charset="UTF-8">
<title>Document</title></head><body>
Hello NWJS~ <br/><br/>
<p>== 右键单击可看到菜单 ==</p>
<div id="os"></div>
<script> //此处演示调用`NW.js`的API var menu = new nw.Menu(); menu.append(new nw.MenuItem({ label: 'Item A', click: function(){ alert('You have clicked at "Item A"'); } })); menu.append(new nw.MenuItem({ label: 'Item B' })); menu.append(new nw.MenuItem({ type: 'separator' })); menu.append(new nw.MenuItem({ label: 'Item C' })); document.body.addEventListener('contextmenu', function(ev) { ev.preventDefault(); menu.popup(ev.x, ev.y); return false; }, false); //此处演示直接调用Nodejs的API var os = require('os'); document.querySelector('#os').innerHTML = 'You are running on <i style="font-size: 30px;">' + os.platform() + '</i>'; </script> </body></html>
运行NW.js程序
cd /path/to/your/app
/path/to/nw .
/path/to/nw
是 NW.js 的二进制运行文件;windows在Windows上是nw.exe,在Linux上是nw,而在Mac则是nwjs.app/Contents/MacOS/nwjs浏览器
Linux和Mac可能须要sudo提高运行权限
例如mac上用以下方式启动:
sudo ~/nwjs/nwjs.app/Contents/MacOS/nwjs .
打包和发布
下载 https://github.com/jyapayne/Web2Executable
运行下载的图形界面程序,选定项目目录
程序会根据项目中的 package.json 自行填好 "App Settings" 和 "Window Settings" 两个界面中的内容,可自行补充
在 "Export Settings" 中,选择要发布的平台种类,屏蔽一些无用文件等
在 "Compression Settings" 中,选择压缩级别;高压缩级别会带来相应的启动时间变长,并可能形成打包后的程序运行失败
在 "Download Settings" 中,将第一步中下载的“非sdk版程序包的.zip文件”所在的目录,填入"Download location",而且不勾选"SDK build"选项
点击右下角的Export按钮,便可发布,默认路径是output
mac下的dmg安装包制做参考 http://www.macx.cn/thread-2099005-1-1.html
windows安装包参考 http://www.aichengxu.com/diannao/4906106.htm
参考资料
http://docs.nwjs.io/en/latest/For Users/Getting Started/
http://docs.nwjs.io/en/latest/For Users/Package and Distribute/
* 原创文章转载请注明出处
-------------------------------------
长按二维码关注咱们的公众号哦:
本文分享自微信公众号 - 云前端(fewelife)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。