基于NW的H5桌面应用

1. 概述

nwjs是基于Chromium和Node.js运行的, 咱们能够经过html+css来编写UI页面，使用js来实现功能。能够直接调用Node.js的各类api以及现有的第三方包。javascript

因为Chromium和Node.js的跨平台，那么你的应用也是能够跨平台的。css

如今已经有不少知名的应用是基于NW.js实现，这是官方统计的一些列表:https://github.com/nwjs/nw.js/wiki/List-of-apps-and-companies-using-nw.js。html

前端领域比较熟悉的微信开发者工具就是基于nwjs开发的。前端

NW文档中心: https://nwjs.org.cn/java

2. 开始使用

你能够从互联网直接下载nw的各个版本https://nwjs.org.cn/download.html也可使用npm安装。node

将下载好的压缩包解压，你能够将解压后的文件夹修改一个名字，也能够新建一个文件夹将解压后的文件copy进去。其实主要有用的文件就是nw执行程序，只要这个就能够了。git

而后在nw执行程序的同级目录新建一个package.json文件。在里面设置应用的名称和启动执行的html页面。而后咱们在文件夹中新建一个index.htmlgithub

package.json中写上应用名称和启动页面。npm

{
  "name": "个人应用", // 名称
  "main": "index.html", // 启动页面
}
复制代码

在html文件中随便写点什么。json

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人应用</title>
</head>
<body>
    个人应用程序
</body>
</html>
复制代码

双击nwjs执行这个程序，页面长成这么个样子。

3. 应用配置

接着咱们介绍一下package.json中都能配置哪些参数

{
  "name": "应用的名称", // 应用的名称
  "main": "./index.html", // 指定应用的主页面
  "build": "1445048139741", // 这是为了给更新时判断版本用的时间戳
  "version": "0.0.1",// 当前的版本号
  "homepage": "通常是官网地址之类的",
  "description": "应用的描述", // 描述
  "window": {
    "title": "应用打开时候显示的名称", // 若是 index.html没有title,则会显示这里的值
    "icon": "assest/img/logo.png", // icon
    "position": "center", // 打开应用时在浏览器屏幕中的位置
    "width": 1280, // 应用的宽度
    "height": 680, // 应用的高度
    "toolbar": true, // 是否隐藏窗口的浏览器工具栏，nw老版本还有用，新版本已经无效了
    "frame": true, // 是否显示最外层的框架，设为false以后 窗口的最小化、最大化、关闭 就没有了
    "resizable": true, // 能够经过拖拽变换应用界面大小
    "min_width": 1028 // 最小宽度
  },
  "node-main": "./node-main.js",// 启动时执行的js，检查更新之类的。
}
复制代码

其实这里的package.json就是咱们平常开发项目中的项目管理文件，咱们能够经过npm或者yarn的方式安装第三方的依赖包，而后经过require的方式导入进来，这里也是可使用的。

好比咱们经过npm安装一个marked模块。

npm install marked --save-dev
复制代码

{
  "name": "个人应用",
  "main": "index.html",
  "devDependencies": {
    "marked": "^1.2.5"
  }
}
复制代码

而后在html中的script中经过require加载这个模块，而且使用这个模块在页面转义一句markedown。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人应用</title>
</head>
<body>
    <div id="content"></div>
    <script> const marked = require('marked'); // 加载marked模块 document.getElementById('content').innerHTML = marked('# Marked in the browser\n\nRendered by **marked**.'); </script>
</body>
</html>
复制代码

效果以下:

4. 开发调试

新版的nw是没有地址栏的，同时也没有控制台，这在开发过程当中会产生很大的不便，不过这也很好解决，可使用腾讯的vconsole来调试代码。

引入vconsole.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人应用</title>
</head>
<body>
    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <script> var vConsole = new VConsole(); console.log('Hello world'); </script>
</body>
</html>
复制代码

5. 软件打包

若是是mac系统，打包就比较简单了，将package，html 等资源所在的文件夹压缩成zip，注意nwjs执行程序不要压缩不然包体积太大，而后修改文件名为app.nw，注意这里的后缀名改成nw。

而后在nwjs文件上右键显示包内容 -> Contents -> Resources, 将上面的app.nw文件放进来，同时这个文件夹里面有一个app.icns就是咱们软件的显示图标，能够本身制做一个替换掉。这样咱们的软件就只作完了，能够发给其余人使用了。

windows系统打包方式相对来讲麻烦一些，首先也是将package，html 等资源所在的文件夹压缩成zip，修改后缀名为app.nw，而后须要将nw.exe和app.nw合并成一个文件夹。可使用下面命令操做。

copy /b nw.exe+app.nw app.exe
复制代码

而后能够下载Enigma Virtual Box将文件打成一个软件包。更换软件展现icon可使用借助zip的能力。

程序 -> 添加到压缩文件 -> zip, 存储（方式） , 建立自解压 -> 高级 -> 自解压选项 -> 设置 -> 提取后运行(添加文件名.exe) -> 模式(解压到临时文件夹, 所有隐藏) -> 更新(覆盖全部文件) -> 文本和图标(从文件加载自解压文件图标) -> 肯定。

至此打包好的应用就能够发送给用户使用了。

至此咱们就能够去开发咱们的桌面工具了，我开发了下面这样一个工具。

好吧，貌似并非一个工具，算了，管他呢，和队友联机玩魂斗罗去了....