nw.js学习日志（一）

最新推荐文章于 2022-04-17 21:23:41 发布

Markov Zheng

最新推荐文章于 2022-04-17 21:23:41 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：网络学习日志 JavaScript 微信小程序前端面试题整理 HTML node 文章标签： node html nwjs dom调用js模块

本文链接：https://blog.youkuaiyun.com/marko_zheng/article/details/79457982

网络学习日志同时被 3 个专栏收录

111 篇文章

订阅专栏

JavaScript

49 篇文章

订阅专栏

HTML

37 篇文章

订阅专栏

本文档介绍了nw.js的学习历程，包括它如何让开发者使用HTML和JavaScript构建原生应用，以及如何从DOM直接调用Node.js模块。详细讲述了package.json的配置，如main和name字段，并探讨了Native UI API、窗口操作、剪切板和文件对话框等功能。同时，文章指出了使用nw.js过程中可能遇到的问题，如open新页面的路径问题和无边框窗口的拖拽设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>