前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用NW.js构建跨平台桌面应用(1)-入门案例

用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

代码语言:javascript
复制
{
"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

代码语言:javascript
复制
<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程序

代码语言:javascript
复制
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

参考资料

  • http://docs.nwjs.io/en/latest/For Users/Getting Started/
  • http://docs.nwjs.io/en/latest/For Users/Package and Distribute/

* 原创文章转载请注明出处

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2017-02-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 云前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • NW.js的用途
  • 安装NW.js
  • 写一个 Hello World!
  • 运行NW.js程序
  • 打包和发布
  • 参考资料
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档