NW.js 简介与使用方法

什么是 NW.js

NW.js，又名 Node-WebKit，是一个可以使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用程序的开源运行时。它将 Chromium（即 Google Chrome 浏览器的内核）和 Node.js 结合在一起，可以方便地在桌面环境下编写和调试 Web 应用程序，也可以通过打包成可执行文件的形式发布。

NW.js 安装

下载 NW.js 安装包：

https://dl.nwjs.io/v0.51.2/nwjs-v0.51.2-win-x64.zip

解压缩后，进入到 nwjs-v0.51.2-win-x64 目录，可以看到以下文件：

nw.exe：NW.js 运行文件；
chrome.dll：Chromium 嵌入式组件；
node.dll：Node.js 嵌入式组件；
package.json：配置文件。

NW.js 使用方法

创建项目

在项目所在目录中创建一个 package.json 文件，并添加以下内容：

{
  "name": "my-nw-js-app",
  "main": "index.html"
}

其中 name 字段为应用程序名称，main 字段为入口文件（即默认打开的页面），这里设置为 index.html。

在同级目录下创建一个 index.html 文件，作为应用程序的界面。

运行 NW.js

在项目所在目录打开命令行，输入以下命令：

path\to\nw.exe path\to\project

其中 path\to\nw.exe 为 NW.js 运行文件的路径，path\to\project 为项目所在目录的路径。

打包应用程序

在命令行中进入项目所在目录，输入以下命令：

path\to\nw.exe path\to\project --packager="path\to\output"

其中 path\to\output 为输出文件所在目录的路径。打包后会生成多个文件，其中 my-nw-js-app.exe 为可执行文件。

示例一：使用 NW.js 创建 ToDoList

创建项目

在项目所在目录中创建一个 package.json 文件：

{
  "name": "to-do-list",
  "version": "0.1.0",
  "main": "index.html",
  "window": {
    "title": "ToDoList",
    "toolbar": false,
    "width": 480,
    "height": 320,
    "position": "center",
    "min_width": 320,
    "min_height": 240
  }
}

其中 name 字段为应用程序名称，version 字段为版本号，main 字段为入口文件（即默认打开的页面），这里设置为 index.html。window 字段为窗口设置，包含标题、工具栏、窗口尺寸、位置和最小尺寸等。

在同级目录下创建一个 index.html 文件，作为应用程序的界面。

实现 ToDoList

在 index.html 文件中添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ToDoList</title>
  </head>
  <body>
    <h1>ToDoList</h1>
    <ul id="list"></ul>
    <input type="text" id="input">
    <button id="add">Add</button>

    <script>
      function addItem() {
        var input = document.getElementById('input');
        var item = input.value;
        input.value = '';

        var li = document.createElement('li');
        li.innerHTML = item;
        document.getElementById('list').appendChild(li);
      }
      document.getElementById('add').addEventListener('click', addItem);
    </script>
  </body>
</html>

以上代码实现了一个简单的 ToDoList，包括一个输入框、一个添加按钮和一个显示列表的区域。

运行 ToDoList

在命令行中输入以下命令启动 ToDoList：

path\to\nw.exe path\to\to-do-list

其中 path\to\nw.exe 为 NW.js 运行文件的路径，path\to\to-do-list 为项目所在目录的路径。

打包 ToDoList

在命令行中输入以下命令生成可执行文件：

path\to\nw.exe path\to\to-do-list --packager="path\to\output"

运行 my-nw-js-app.exe 即可启动 ToDoList 应用程序。

示例二：使用 NW.js 打造 Markdown 编辑器

创建项目

在项目所在目录中创建一个 package.json 文件：

{
  "name": "md-editor",
  "version": "0.1.0",
  "main": "index.html",
  "window": {
    "title": "Markdown Editor",
    "toolbar": false,
    "width": 800,
    "height": 600,
    "position": "center",
    "min_width": 320,
    "min_height": 240
  }
}

在同级目录下创建一个 index.html 文件，作为应用程序的界面。

实现 Markdown 编辑器

在 index.html 文件中添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Markdown Editor</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toast-ui/editor@2.0.0/dist/toastui-editor.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.css" integrity="sha512-cbZ//eUwRU+E/Wfkq/R2ygRt7aym31lPRR9NVaDABzqi9cnb/eZNoVJzHm/jtXfLMSkymwezEFRKsUwNdeeghw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdn.jsdelivr.net/npm/@toast-ui/editor@2.0.0/dist/toastui-editor.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.2/codemirror.min.js" integrity="sha512-yksiIgyakGq+XS6T3pHVZ5fCHFi0Brf52A4WwUgVD9iTBZe9o3FYtJ7O8zFH0tOtCwblZ+8+TTsPN6PTW+rGUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js" integrity="sha512-d1GckOE9+LIXVKbZz537rRg16e8LJLqIlt3v30j/AKAOEXZZFohQUtUso1TCx4vtK56sIaUGVl5UHC5b445nKw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.1/marked.min.js" integrity="sha512-iz+MgnSsEp/jlizGU8Ei+7zSSTO6XWecGJP1FzX+QGUzkFr6wWtOmIABr13S2qW2l3Uanlxp9XVJzH61MDeXqg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </head>
  <body>
    <h1>Markdown Editor</h1>
    <div id="editor"></div>
    <button id="save">Save</button>

    <script>
      var editor = new toastui.Editor({
        el: document.querySelector('#editor'),
        previewStyle: 'vertical',
        height: '500px',
        initialEditType: 'markdown',
        useCommandShortcut: true,
        exts: ['scrollSync', 'codeSyntaxHighlight']
      });

      document.getElementById('save').addEventListener('click', function() {
        var md = editor.getMarkdown();
        // save md to file or database
      });
    </script>
  </body>
</html>

以上代码实现了一个包含 Markdown 编辑器和保存按钮的界面，使用 Toast UI Editor、CodeMirror、highlight.js 和 marked.js 库实现。

运行 Markdown 编辑器

在命令行中输入以下命令启动 Markdown 编辑器：

path\to\nw.exe path\to\md-editor

其中 path\to\nw.exe 为 NW.js 运行文件的路径，path\to\md-editor 为项目所在目录的路径。

打包 Markdown 编辑器

在命令行中输入以下命令生成可执行文件：

path\to\nw.exe path\to\md-editor --packager="path\to\output"

运行 my-nw-js-app.exe 即可启动 Markdown 编辑器应用程序。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：NW.js 简介与使用方法 - Python技术站

NW.js 简介与使用方法