简介

NW.js

nw.js和electron相似，是前端开发桌面端应用的框架，

且两者架构也相似都是基于node.j和chromium进行封装，

这样在渲染层就可以用html,css,js等前端技术实现，

在处理层就可以用nodejs实现，

不管是v8还是chromium都是各自行业内的翘楚，这种架构还是很赞的，

而且抹平了os层的一些特性，可以生成win，mac，linux等系统下的桌面应用

看一下官方的描述

下载

在官网可以下载，Downloads，

可以选择自己的平台下载，另外sdk代表可调试，如果是开发者则选择sdk版本，如果是纯运行可以选择normal版本，两个版本的文件见下图

机制

没有使用过nw.js或者electron的可以稍微理解下机制哈，下面表述是我的概括，比较严谨的用户可以看官网的介绍哈。

渲染层（UI层），后续以render进程代表

桌面应用中能肉眼看到的部分叫做渲染层，这一层在electron和nw.js中都是基于 chromium 实现的，chromium是chrome的内核，也就意味着electron或nw.js的渲染层功能比较强大，支持html，css，js各种新特性，不用在担心类似qt下webkit不支持新特性了

业务层（主进程），后续以main进程代表

例如点击下载按钮开始下载文件等等业务，大部分都是放在业务层实现的，electron和nw.js的业务层是基于v8实现的，v8是node.js的核心引擎，功能也十分强大，大部分原生的操作都支持，另外一些os差异的特性，两个框架都抹平了，也可以十分方便的使用

hello world

下面开始都是一些示例了，参考官方文档：Homepage - NW.js Documentation

package.json代码，主要是main属性，声明了入口文件

{"name": "nwjs-demos","version": "0.0.1","description": "nw.js demos","keywords": [],"main": "index.js"
}

index.js，上面说的main进程下的文件

nw.Window.open('./index.html', {}, function(win) {});

index.html，上面说的render进程下的文件

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

运行

在electron下，可以通过npm命令安装好electron环境，运行时只要用npm scripts执行即可

electron .

nw.js下，首先nw环境需要上述手动下载nw sdk zip包，运行时官网示例如下

实际操作中

1.下载对应的nw.js sdk zip包

2.解压缩zip包，把解压缩出的文件夹挪到你方便使用的地方

3.执行 nw .命令，可以输nw完整的路径不太好记

4.mac下可以给一个alias，win下可以加入path，方便使用

alias nw='/Users/vincent/Data/tencent/qqbot/nwjs-sdk-v0.59.1-osx-x64/nwjs.app/Contents/MacOS/nwjs'

安全

第一次运行时，在mac下会弹出警告

可以先点击取消，然后系统偏好设置——安全与隐私，点击仍要打开

效果

执行nw .后效果如下

命令行上显示

代码见：https://github.com/insistime/nwjs-demos/tree/0.0.1

使用nw.js apis

上述hello world的例子算是最简单的渲染层的示例，下面来一个使用nw.js apis的示例，

nw.js apis这一层，更多的是对os进行封装，比如右键菜单，在mac，win，linux各有不同，nw.js会封装好，方便大家使用

index.html

<!DOCTYPE html>
<html>
<head><title>Context Menu</title>
</head>
<body><p>'Right click' here to show context menu.</p><script>
// Create an empty context menu
var menu = new nw.Menu();// Add some items with label
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' }));// Hooks the "contextmenu" event
document.body.addEventListener('contextmenu', function(ev) {// Prevent showing default context menuev.preventDefault();// Popup the native context menu at place you clickmenu.popup(ev.x, ev.y);return false;
}, false);</script>
</body>
</html>

运行后效果

代码见：https://github.com/insistime/nwjs-demos/tree/0.0.2

使用Node.js apis

同样的可以直接使用nodej的相关api，

index.html

<!DOCTYPE html>
<html>
<head><title>My OS Platform</title>
</head>
<body>
<script>
// get the system platform using node.js
var os = require('os');
document.write('You are running on ', os.platform());
</script>
</body>
</html>

运行效果如下

代码见：https://github.com/insistime/nwjs-demos/tree/0.0.3

end

至此，介绍了nw.js和它的原理，分别写了渲染层，nw.js apis，node.js api啥的示例

NW.js-01-简介和使用相关推荐

node windows更新_node.js 01 简介 - 产生，发展历程，优势，适用场景，实际应用
node.js是什么上面是来自于node.js 官网 (https://nodejs.org)的介绍.翻译过来,意思是node.js 基于JavaScript, 需要运行在Chrome V8 的 J ...
NW.js 简介与使用
简介 (1)以网络最流行的技术编写原生应用程序的新方法 (2)基于HTML5, CSS3, JS and WebGL而编写 (3)完全支持nodejs所有api及第三方模块 (4)可以使用DOM直接调 ...
nw.js 使用记录 - 加载远程URL
使用的是加载远程URL的方式一. Package.json的内容如下: {"main": "index.html", "name": &q ...
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文件请求的是普通权限,当我们的应用需要访问一些特殊目录或者注册表等,就需要程序启动的时候以管理员权限运行.那么此时 ...
使用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 打包换桌面图标_我如何使用CometChat和NW.js构建桌面聊天应用程序（以及方法）
nw.js 打包换桌面图标 This is not your typical "paste this here" and "paste that there"- ...

NW.js-01-简介和使用

简介

下载

机制

hello world

运行

安全

效果

使用nw.js apis

使用Node.js apis

end

NW.js-01-简介和使用相关推荐

最新文章

热门文章