NW.js是什么？能干什么？

从官网https://nwjs.io/ 的介绍来看，NW.js从DOM/WebWorker层，直接调用所有的Node模块，使用现有的web技术，开启一个全新的编写应用的方式。没怎么做过前端的东西，简单说，就是可以使用js来写一个应用程序，NW.js可以快速让一个web应用变成做普通应用。后来看着看着发现了Electron，和NW.js有相似的功能，而且优点更多，这里不赘述。所以这里只是简单体验下NW.js，做一个Helloworld。

参考文档：https://nwjs.org.cn/doc/index.html

Helloworld1

1. 下载

官网下载最新稳定版nwjs-sdk-v0.37.1-win-x64.zip，解压。

官网推荐SKD方式

2. 创建package.json

新建项目目录，创建package.json

{"name": "helloworld","main": "index.html"
}

json格式，name定义应用名称，name定义应用首页。

3. 创建index.html文件

<!DOCTYPE html>
<html><head><title>Hello World!</title></head><body><h1>Hello World!</h1></body>
</html>

4. 运行应用

Windows系统中是 nw.exe;

拖拽包含package.json的文件夹到nw.exe上，就可以运行程序了，弹出窗口

Linux系统中是 nw;

cd /path/to/your/app
/path/to/nw .

Mac系统中是 nwjs.app/Contents/MacOS/nwjs;

Helloworld2-是用NW.js APIs

NW.js中的API都被加载到了nw全局对象总，并能够通过JavaScript代码中直接使用。本例展示如何创建菜单。

修改index.html

<!DOCTYPE html>
<html>
<head><title>上下文菜单</title>
</head>
<body style="width: 100%; height: 100%;"><p>右击显示上下文菜单</p><script>
// 创建一个空菜单
var menu = new nw.Menu();// 添加菜单项
menu.append(new nw.MenuItem({label: '项 A',click: function(){alert('You have clicked at "项 A"');}
}));
menu.append(new nw.MenuItem({ label: '项 B' }));
menu.append(new nw.MenuItem({ type: 'separator' }));
menu.append(new nw.MenuItem({ label: '项 C' }));// 监听事件
document.body.addEventListener('contextmenu', function(ev) {// 阻止显示默认菜单ev.preventDefault();// 点击处弹出定义的菜单对象menu.popup(ev.x, ev.y);return false;
}, false);</script>
</body>
</html>

运行应用，弹出窗口，右键文字，弹出菜单选项，选择A

Helloworld3-使用Node.js API

可以直接使用DOM直接调用node.js代码以及模块。这样就可以通过NW.js轻松开发桌面应用。本利展示利用Node.js中的os模块查询操作系统信息。编辑index.html

<!DOCTYPE html>
<html>
<head><title>My OS Platform</title>
</head>
<body>
<script>
// 使用node.js获取系统信息
var os = require('os');
document.write('您当前系统为 ', os.platform());
</script>
</body>
</html>

运行应用，弹出窗口

蜻蜓点水的helloworld完成。

NW.js的helloworld相关推荐

十分钟轻松入门 nw.js 实现桌面应用程序
最近别的组有项目里面使用了 nw.js 去实现了桌面应用程序,出于好奇,我查找了一些资料,准备了解一下入个门. 什么是 nw.js https://github.com/nwjs/nw.js node ...
使用nw.js快速开发一个基于浏览器的小型桌面端(适用于高校学生完成可视化实验小作业)
首先讲下退坑事项,节约读者时间虽然入门较为简单,能快速产出在本地的一个桌面端应用,但是生成的exe会依赖SDK文件夹下的一些dll,所以不能简单的交付这个exe,需要使用额外的软件进行打包,如En ...
window下使用nw.js开发桌面应用程序环境的搭建
安装node window下去node官网下载长期支持版本或者最新稳定版都可以. 按装nw用来管理和按装nw.js npm install -g nrm # 用来设置npm镜像地址 npm insta ...
修改nw.js的exe文件使其请求管理员权限
修改nw.js的exe文件使其请求管理员权限默认情况下,nw.js发布的nw.exe文件请求的是普通权限,当我们的应用需要访问一些特殊目录或者注册表等,就需要程序启动的时候以管理员权限运行.那么此时 ...
鸿蒙基于JS搭建HelloWorld并修改国际化文件
场景鸿蒙HarmonyOS环境搭建与HelloWrold应用运行: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1179945 ...
使用NW.js封装微信公众号菜单编辑器为桌面应用
开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...
用node-webkit(NW.js)创建桌面程序
以往写windows桌面程序需要用MFC.C#之类的技术,那么如果你只会web开发技术呢?或者说你有一个网站,但是你想把你的网站打包成一个桌面应用程序,该如何做呢? 答案就是用node-webkit这 ...
用 vue2 和 webpack 快速建构 NW.js 项目(1)
经过实践和学习,发现本篇文章部分内容已经过时,请看我的关于 Vue 和 NW.js 的最新文章和相关实践项目 vue-nw-seed . 使用到的技能点 vue2 webpack NW.js No ...
nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

NW.js的helloworld