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

简介: 中文代码示例之NW.js桌面应用开发初体验

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

之后在看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下, 再次运行, 就成功如下打开了开发者窗口.
2019_03_09_nwjs_

下面尝试官网第二个例子: 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>

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

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

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

为啥height: 100%无效呢?

初感

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

相关文章
|
12天前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
2月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
88 1
|
3月前
|
JavaScript 前端开发
怀孕b超单子在线制作,p图一键生成怀孕,JS代码装逼娱乐
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习
|
6月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
296 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
3月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
71 0
|
5月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
447 9
|
6月前
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
465 11
|
8月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
337 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子