中文代碼示例之NW.js桌面應用開發初體驗

時間 2019-11-14

標籤中文代碼示例 nw.js 桌面應用開發體驗欄目 JavaScript 简体版

原文原文鏈接

先看到了NW.js(應該是前身node-webkit的縮寫? 以爲該起個更講究的名字, 若是是NorthWest之意的話, logo(見下)裏的指南針好像也沒指着西北啊)和Electron的比較文章: Why I prefer NW.js over Electron? (2018 comparison)
html

以後在看NW.js創始者(Wang WenRui)的推時不意發現微信小程序用了此框架. 也許與它對老系統如Windows XP的支持有關. 必須體驗一下!node

下面完成與中文編程：中文代碼示例之Electron桌面應用開發初體驗相同的功能, 做一個比較.web

package.json編程

{
  "name": "hello",
  "main": "主頁.html",
  "version": "1.0.0",
  "window":{
    "min_width":800,
    "min_height":400
  }
}

主頁.htmljson

<!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 .api

發現彈出的開發者工具窗口爲徹底空白, 搜了一下發現官方的說明:
Debugging with DevTools
docs.nwjs.io微信

必須用"SDK Flavor", 但連接直接引向了從源碼構建NW: Build Flavors - NW.js Documentationapp

正糾結是否要着手構建, 想起以前有個"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%無效呢?