先看到了NW.js(应该是前身node-webkit的缩写? 觉得该起个更讲究的名字, 如果是NorthWest之意的话, logo(见下)里的指南针好像也没指着西北啊)和Electron的比较文章: Why I prefer NW.js over Electron? (2018 comparison)

之后在看NW.js创始者(Wang WenRui)的推时不意发现微信小程序用了此框架. 也许与它对老系统如Windows XP的支持有关. 必须体验一下!

下面完成与中文编程：中文代码示例之Electron桌面应用开发初体验相同的功能, 作一个比较.

package.json

{

  "name": "hello",

  "main": "主页.html",

  "version": "1.0.0",

  "window":{

    "min_width":800,

    "min_height":400

  }

}

主页.html

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>吃了么?</title>

  </head>

  <body>

    <h1>吃了么?</h1>

    我们用了Node <script>document.write(process.versions.node)</script>

    , flavor <script>document.write(process.versions['nw-flavor'])</script>

    <script>

      nw.Window.get().showDevTools();

  </script>

  </body>

</html>

起初安装时用了Normal版, 将nwjs.app移到了/Applications下(Mac环境)

在目录下运行:

$ /Applications/nwjs.app/Contents/MacOS/nwjs .

发现弹出的开发者工具窗口为完全空白, 搜了一下发现官方的说明:

Debugging with DevTools​

docs.nwjs.io

必须用"SDK Flavor", 但链接直接引向了从源码构建NW: Build Flavors - NW.js Documentation

正纠结是否要着手构建, 想起之前有个"SDK"版本下载, 试着下载解压后将nwjs.app文件(还有其他一些文件, 不知何用)移到/Applications下, 再次运行, 就成功如下打开了开发者窗口.

下面尝试官网第二个例子: Getting Started - NW.js Documentation. 显示上下文菜单:

菜单.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

  <title>上下文菜单</title>

</head>

<body style="width: 100%; height: 100%;">

<p>'右击'显示上下文菜单.</p>

<script>

// 创建空白上下文菜单

var 菜单 = new nw.Menu();

菜单.append(new nw.MenuItem({

  label: 'A项',

  click: function(){

    alert('你点了"A项"');

  }

}));

菜单.append(new nw.MenuItem({ label: 'B项' }));

菜单.append(new nw.MenuItem({ type: 'separator' }));

菜单.append(new nw.MenuItem({ label: 'C项' }));

// Hooks the "context菜单" event

document.body.addEventListener('contextmenu', function(事件) {

  // 避免显示默认菜单

  事件.preventDefault();

  // 在点击处弹出菜单

  菜单.popup(事件.x, 事件.y);

  return false;

}, false);

</script>

</body>

</html>

运行后随意点击窗口中央发现菜单并非期望:

后发现有效区域仅在上部:

查看开发者工具, 的确body仅在上部:

为啥height: 100%无效呢?

初感

官方文档的门槛略高(另外似乎无中文版?), 上面的问题应该会影响新手接纳程度. 也许是目标群体定位与Electron不同?

参考:

官方文档: Getting Started - NW.js Documentation

中文代码示例之NW.js桌面应用开发初体验的更多相关文章

  1. NW.js桌面应用开发（一）

    NWjs中文网 Electron中文网 一些需要了解的历史与特性,其实就是 NW.js 和 Electron的争议,建议还是亲自阅读一下各自的官网说明 1.下载SDK版工具 从淘宝NPM镜像下载,速度 ...

  2. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  3. 中文代码示例之Electron桌面应用开发初体验

    参考: 打造你的第一个 Electron 应用 首先运行下面在目录下创建package.json: $ npm init 去掉了一些无关项后内容如下: { "name": &quo ...

  4. nw.js桌面程序自动更新（node.js表白记）

    Hello Google Node.js 一个基于Google V8 的JavaScript引擎. 一个伟大的端至端语言,或许我对你的热爱源自于web这门极富情感的技术吧! 注: 光阴似水,人生若梦, ...

  5. 中文代码示例之Angular入门教程尝试

    原址: https://zhuanlan.zhihu.com/p/30853705 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入 ...

  6. 2017-11-07 中文代码示例之Angular入门教程尝试

    "中文编程"知乎专栏原址 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. ...

  7. 中文代码示例之Vuejs入门教程(一)

    原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...

  8. 2018-12-09 疑似bug_中文代码示例之Programming in Scala笔记第九十章

    续前文: 中文代码示例之Programming in Scala笔记第七八章 源文档库: program-in-chinese/Programming_in_Scala_study_notes_zh ...

  9. 2018-11-27 中文代码示例之Programming in Scala笔记第七八章

    续前文: 中文代码示例之Programming in Scala学习笔记第二三章 中文代码示例之Programming in Scala笔记第四五六章. 同样仅节选有意思的例程部分作演示之用. 源文档 ...

随机推荐

  1. 第七篇: 消息总线(Spring Cloud Bus)

    Spring Cloud Bus 将分布式的节点用轻量的消息代理连接起来.它可以用于广播配置文件的更改或者服务之间的通讯,也可以用于监控.本文要讲述的是用Spring Cloud Bus实现通知微服务 ...

  2. 漫谈golang之fmt格式化模块

    fmt 漫谈 Go Walkthrough: fmt fmt常用的格式化字符串 %v 是个通用的占位符.它会自动将变量转换为默认格式的字符串,这在打印字符串或数字等原语时非常有用,而且不需要特定的选项 ...

  3. Java之单元测试工具（Junit）

    Junit是Java单元测试框架,一般Eclipse里面会集成这个Junit4测试工具 既然是测试工具,虽然开发用得比较多,但作为测试人员也需要具备会Junit测试的思想,况且技多不压身 这里简单介绍 ...

  4. DDD实战进阶第一波(十二)：开发一般业务的大健康行业直销系统（订单上下文POCO模型）

    在本系列前面的文章中,我们主要讨论了产品上下文与经销商上下文相关的实现,大家对DDD的方法与架构已经有了初步的了解. 但是在这两个界限上下文中,业务逻辑很简单,也没有用到更多的值对象的内容.从这篇文章 ...

  5. sql server I/O硬盘交互

    一. 概述 sql server作为关系型数据库,需要进行数据存储, 那在运行中就会不断的与硬盘进行读写交互.如果读写不能正确快速的完成,就会出现性能问题以及数据库损坏问题.下面讲讲引起I/O的产生, ...

  6. MySQL批量插入数据的几种方法

    最近公司要求测试数据库的性能,就上网查了一些批量插入数据的代码,发现有好几种不同的用法,插入同样数据的耗时也有区别 别的先不说,先上一段代码与君共享 方法一: package com.bigdata; ...

  7. Spring DAO模块

    Spring的DAO模块提供了对JDBC.Hibernate.Mybatis等DAO层支持,本节介绍DAO模块对JDBC的支持.DAO模块依赖ommons-dbcp.jar.commons-pool. ...

  8. 巨杉数据库 MySQL兼容项目正式开源

    9月7日.8日,2018  ODF 开源数据库论坛,在北京盛大开幕.在大会上,巨杉数据库正式发布了巨杉全新的MySQL/MariaDB兼容架构,并将项目正式开源. 开源数据库论坛(ODF)是中国开源数 ...

  9. JavaScript 系列博客（四）

    JavaScript 系列博客之(四) 前言 本篇介绍 JavaScript 中的对象.在第一篇博客中已经说到 JavaScript 是一种''对象模型''语言.所以可以这样说,对象是 JavaScr ...

  10. 一张图，让你和面试官聊一个小时的“Java内存模型”

    如果面试官问你:你了解 Java 内存模型吗? 你就可以使用这张图,按照这张图中的顺序和面试官开聊,正常情况下,聊一个小时是差不多的,这个时候,对你的处境是非常有益的,因为面试官的时间不多了.