您的位置：首页 > Web前端 > JavaScript

nw.js学习日志（一）

2018-03-06 14:34 651 查看

NWjs学习日志

首先nwjs能干什么

通过它可以用 HTML 和 JavaScript 编写原生应用程序。它还允许您从 DOM 调用 Node.js 的模块，实现了一个用所有 Web 技术来写原生应用程序的新的开发模式。

完全支持nodejs所有api及第三方模块

可以使用DOM直接调用nodejs模块

它以前被称为“node-webkit”项目，package.json必须要有，他是解析你自己代码的入口文件

学习网址 : http://nwjs.io

文档地址：http://docs.nwjs.io/en/latest/For%20Users/Getting%20Started/#what-can-nwjs-do

中文文档：https://wizardforcel.gitbooks.io/nwjs-doc/content/wiki/Getting-Started-with-nw.js-for-simplified-Chinese.html

nw.js可以干什么？

nw.js给予Chromium和nodejs。他可以让你直接从浏览器调用node代码和模块，也可以在你的应用中使用web技术。此外，您也可以轻松jiangweb应用程序打包到本机应用程序

实现hello world

1.创建package.json文件

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

主字段main，指定有nw.js打开的第一页

name字段是nwjs应用程序中使用的唯一名称

2.创建index.html

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

这是普通的HTML文件。您可以使用最新浏览器支持的任何网络技术

3.run

在Windows上，它是nw.exe

package.json

{
"main": "index.html",
"name": "nw-demo",
"description": "demo app of node-webkit",
"version": "0.1.0",
"keywords": [ "demo", "node-webkit" ],
"window": {
"title": "node-webkit demo",
"icon": "link.png",
"toolbar": true,
"frame": false,
"width": 800,
"height": 500,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 600
},
"webkit": {
"plugin": true
}
}

必填字段

main

nw打开时的默认页面

name

包名，必须独一无二，有字母数字下划线构成不可有空格

window

设置窗口外观

toolbar是否显示导航栏

选填字段

icon
窗口的icon。

position
字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。

min_width/min_height
窗口的最小值

max_width/max_height
窗口显示的最大值。

resizable
bool值。是否允许调整窗口大小。

always-on-top
bool值。窗口置顶。

fullscreen
bool值。是否全屏显示

Native ui api

提供了在代码中访问，控制应用程序界面的显示的接口。使用之前需要先加载nw.gui模块

var gui = require("nw.gui")
//加载gui之后就可像js对象一样，创建GUI元素
//创建一个菜单
var meau = new gui.Meau({"title":"菜单"})

通过以上的方式创建的菜单如果如要获取窗口对象

var win=gui.window.get();
win.menu=menubar

每个gui对象的属性，比如title，label，menu 可以直接通过访问对象去修改

menu.title="测试"

remove append insert方法也可以使用

menu.append(new gui.MenuItem({label:"test append"}))
menu.removeAt(0)

子元素通常存储在items字段中

for (var i = 0; i < menu.items.length; ++i) {
console.log('MenuItem', i, menu.items[i]);
}

package.json中文文档

https://wizardforcel.gitbooks.io/nwjs-doc/content/wiki/package-json.html

nw.js open打开新页面的功能遇到的问题

gui = require('nw.gui');
var mainwin = gui.Window.get();
var html5;
gui.Window.open('C:/Users/Ancheng/Desktop/nwjs-sdk-v0.28.3-win-x64/list/index.html', {}, function(win){
console.log('came loaded testpop');
html5 = win.window.window;
//win.window.window.parent = mainwin.window;
});

gui.Window.open不支持相对路径

比如

gui.Window.open('./index.html',fn())
//会找不到页面

或者拼接完整路径

var dir = require("path").dirname(process.execPath).replace(/\\/g, '/') ;
console.log(dir);

如何启用无边框窗口

在package.json中配置

{
"window": {
"frame": false
}
}

窗口拖拽

默认情况下，无框窗口是不可拖拽的，可以通过body添加“-webkit-app-region: drag” 启用拖拽

如果在body上设置了拖拽，需要在button上去除拖拽，否则按钮无法点击，添加如下样式

button {
-webkit-app-region: no-drag;
}

Clipboard——–剪切板

Clipboard是对操作系统剪切板的一个抽象，目前只支持获取和设置纯文本内容

<html>
<head>
<title>appDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>app api 测试</h1>
<button onclick="getText()">获取内容</button>
<button onclick="setText()">写入内容</button>
<button onclick="clearText()">清除内容</button>
<script>
var gui = require('nw.gui');

var clipboard = gui.Clipboard.get();
function apendText(text) {
var element = document.createElement('div');
element.appendChild(document.createTextNode(text));
document.body.appendChild(element);
}
function clearText()
{

clipboard.clear();
apendText('剪贴板内容已清除');
}
function setText()
{

clipboard.set('这是node-webkit向剪贴板写的内容', 'text');
}
function getText()
{

var text = clipboard.get('text');
apendText(text);
}
</script>
</body>
</html>

File dialogs

文件操作是桌面应用最常用的功能之一，相应的打开或保存文件对话框也是常用的组件之一

和全屏有关的三个api

Window.enterFullscreen()

该api使整个窗口进入全屏状态。

Window.leaveFullscreen()

使窗口退出全屏状态。

Window.toggleFullscreen()

切换窗口的全屏状态。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： node html nwjs dom调用js模块

相关文章推荐

新的分享

章节导航