用NW.js构建跨平台桌面应用(1)-入门案例

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源创计划”,欢迎正在阅读的你也加入,一块儿分享。

相关文章
相关标签/搜索