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

江米小枣

发布于 2020-06-15 14:53:54

4K0

发布于 2020-06-15 14:53:54

文章被收录于专栏：云前端

NW.js的用途

NW.js 基于 Chromium 和 Node.js，从而可以在桌面app中使用浏览器开发技术并直接调用 Node.js 资源，甚至将一个web应用打包到本地也轻而易举。

安装NW.js

可以从官网下载；
推荐在开发时下载是sdk版，以使用DevTools
非sdk版也应同时下载，在发布时使用

写一个 Hello World!

package.json

{
"name": "test1",
"main": "index.html",
"window": {
"width": 500,
"height": 500,
"resizable": false
}}

入口文件指定为"index.html"
如果指定一个js文件为入口，则可以先做一些初始化工作，然后手动启动UI界面：nw.Window.open('index.html', {}, function(win) {});

index.html

<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上是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