# 单个exe桌面应用程序

| 工具     | 最小OS版本 | IDE           | 最小发布体积 | 可单文件 | 技术栈    | 备注                                                         |
| -------- | ---------- | ------------- | ------------ | -------- | --------- | ------------------------------------------------------------ |
| Win32API | 任意       | VS            | 0.1M         | Y        | C++/Win32 | 没有任何多余的依赖，发布体积极小。基本只能用Windows 标准原生控件。 |
| MFC      | Windows7   | VS            | 1-3M         | Y        | C++/Win32 | “MFC对API的封装像纸一样薄”，明日黄花（过时），但需要小体积原生应用可以考虑。 |
| Qt       | Windows7   | VS/Qt Creator | 5M           | Y        | C++       | 可自己编译发布静态编译版本，最小可做到5M的EXE体积。          |
| PyQt     | Windows 7  | PyCharm/VSC   | 40M          | N        | Python    | 通过 pyinstaller/cx_freeze 发布可执行版本。                  |
| WPF      | Windows7   | VS/Rider      | 50M+         | N        | C#        | .net core 5.0 据说可以单文件发布。                           |
| WinForm  | Windows7   | VS            | 50M+         | N        | C#        | 微软的，不建议学习。                                         |
| Electron | Windows 7  | VSC           | 40M+         | N        | Js/HTML   | 需要前端。                                                   |

# node-webkit（NW.js）

桌面应用开发以往需要的MFC、C#之类的技术，现在不用这些，只用前端的工作栈也可以做。node-webkit开源框架封装了webkit内核和node.js，这样就可以用web技术开发Windows、Linux和Mac程序，目前node-webkit已经改名为NW.js。[GitHub地址](https://github.com/nwjs/nw.js)。

## 安装NW.js

进入官网（http://nwjs.io/），SDK是带chrome调试器的，方便调试使用，normal版等正式发布应用的时候再用，所以两个都下载下来。一般用SDK版本进行开发，下载SDK后解压后就能使用，注意按照对应的机器下载使用。

## 使用NW.js

1、在根目录创建文件夹 `app` ，该文件夹下放入html、css、js的源码。

2、在app工作目录下添加 `package.json` 配置文件，NW.js通过配置文件来配置app

```json
{
  "main": "index.html",
  "name": "Simulator",
  "description": "指令学习",
  "version": "0.1.0",
  "keywords": [  "指令学习", "在线"],
  "window": {
    "title": "指令学习",
    "icon": "icon.png",
    "toolbar": false,
    "frame": false,
    "width": 1090,
    "height": 750,
    "position": "center",
    "min_width": 1090,
    "min_height": 750,
    "max_width": 1920,
    "max_height": 1080,
    "resizable": true
  },
  "webkit": {
    "plugin": false,
    "java": false,
    "page-cache": false
  },
  "user-agent": "%name %ver %nwver %webkit_ver %osinfo",
  "chromium-args": "--allow-file-access-from-files"
}
```

相关说明

```json
{  
    /**指定程序的起始页面。*/  
    "main": "index.html",  
    /**字符串必须是小写字母或者数字，可以包含.或者_或者-不允许带空格。name必须全局唯一。*/  
    "name": "demo",  
    /**程序描述*/  
    "description": "demo app of node-webkit",  
    /**程序版本号*/  
    "version": "0.1.0",  
    /**关键字*/  
    "keywords": ["demo","node-webkit"],  
    /**bool值，如果设置为false，将禁用webkit的node支持。*/  
    "nodejs": true,  
    /**  
     * 指定一个node.js文件，当程序启动时，该文件会被运行，启动时间要早于node-webkit加载html的时间。  
     * 它在node上下文中运行，可以用它来实现类似后台线程的功能。  
     * （不需要可注释不用）  
     */  
    //"node-main": "js/node.js",  
    /**  
     * bool值。默认情况下，如果将node-webkit程序打包发布，那么只能启动一个该应用的实例。  
     * 如果你希望允许同时启动多个实例，将该值设置为false。  
     */  
    "single-instance": true,  
    /**窗口属性设置 */  
    "window": {  
        /**字符串，设置默认title。*/  
        "title": "demo",  
        /**窗口的icon。*/  
        "icon": "link.png",  
        /**bool值。是否显示导航栏。*/  
        "toolbar": false,  
        /**bool值。是否允许调整窗口大小。*/  
        "resizable": true,  
        /**是否全屏*/  
        "fullscreen": false,  
        /**是否在win任务栏显示图标*/  
        "show_in_taskbar": true,  
        /**bool值。如果设置为false，程序将无边框显示。*/  
        "frame": true,  
        /**字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。*/  
        "position": "center",  
        /**主窗口的的宽度。*/  
        "width": 800,  
        /**主窗口的的高度。*/  
        "height": 670,  
        /**窗口的最小宽度。*/  
        "min_width": 400,  
        /**窗口的最小高度。*/  
        "min_height": 335,  
        /**窗口显示的最大宽度，可不设。*/  
        "max_width": 800,  
        /**窗口显示的最大高度，可不设。*/  
        "max_height": 670,  
        /**bool值，如果设置为false，启动时窗口不可见。*/  
        "show": true,  
        /**是否在任务栏显示图标。*/  
        "show_in_taskbar":true,  
        /**  
          * bool值。是否使用kiosk模式。如果使用kiosk模式，  
          * 应用程序将全屏显示，并且阻止用户离开应用。  
          * */  
        "kiosk": false  
    },  
    /**webkit设置*/  
    "webkit": {  
        /**bool值，是否加载插件，如flash，默认值为false。*/  
        "plugin": true,  
        /**bool值，是否加载Java applets，默认为false。*/  
        "java": false,  
        /**bool值，是否启用页面缓存，默认为false。*/  
        "page-cache": false  
    }  
}
```

3、生成可执行的exe文件

将app目录下的文件都打包压缩成一个app.zip，然后将.zip更名为.nw，（有时不用改后缀也可以），然后将app.nw剪切到上一级根目录中。注意这里的根目录为`D:\Download\nwjs-sdk-v0.61.0-win-x64` ，工作目录为 `D:\Download\nwjs-sdk-v0.61.0-win-x64\app` 。

在根目录下执行指令

```bash
copy /b nw.exe+app.nw app.exe
```

这样在目录下就生成了app.exe。



4、封包

方式一：使用Enigma Virtual Box工具

下载地址：https://enigmaprotector.com/en/downloads.html

- 在Enter Input File Name输入app.exe的路径
- 在Enter Output File Name输入打包出来的可执行文件的输出路径
- 点击增加，选择nwjs文件夹
- 导入配置文件，选择执行封包后生成exe可执行文件
- 双击exe既可以直接运行

方式二：使用Inno Setup打包工具

Inno Setup的打包方式是将一开始的web应用源文件和node-webkit的nw.exe和一些dll直接压缩成一个安装文件，我们并不需要上述中间那先打包成app.exe的步骤。用户在使用你的exe后会出现setup wizard把程序安装到Program Files目录中，将nw.exe，dll，web应用释放出来，这个时候所生成的安装文件其实size会小很多。

下载地址：http://www.jrsoftware.org/isdl.php

- 下载安装运行后点击File->New即进入创建步骤
- 填写应用发布的信息
- 添加应用程序的打包文件
- 执行后续操作，进行编译
- 生成可执行EXE

# 使用nw-builder

nw-builder可以通过CLI使用来构建不同平台的应用。项目地址https://github.com/nwjs-community/nw-builder

## 安装

```bash
# local安装
npm install nw-builder  --save-dev

# global安装
npm install nw-builder -g
```

## CLI使用

```bash
nwbuild [options] [path]

Options:
-p, --platforms 编译的平台，可选参数win32, win64, osx32, osx64, linux32, linux64
-v, --version 版本号，如0.8.1
-r, --run 为当前的平台执行编译，生成对应的exe可执行文件
-o, --buildDir 编译文件目录
-f, --forceDownload 强制下载NW.js
--cacheDir 缓存目录
--quiet 日志不可用
```

# Electron桌面开发

```bash
mkdir my-electron-app && cd my-electron-app
npm init
```



```json
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}
```



```bash
npm install --save-dev electron
```


<!-- markdown for nginx, see https://phus.lu -->
<script>
!function(){
	var dom = {
		element: null,
		get: function (o) {
			var obj = Object.create(this)
			obj.element = (typeof o == "object") ? o : document.createElement(o)
			return obj
		},
		add: function (o) {
			var obj = dom.get(o)
			this.element.appendChild(obj.element)
			return obj
		},
		text: function (t) {
			this.element.appendChild(document.createTextNode(t))
			return this
		},
		attr: function (k, v) {
			this.element.setAttribute(k, v)
			return this
		}
	}

	if (!document.head) return
	head = dom.get(document.head)
	head.add('meta').attr('charset', 'utf-8')
	head.add('meta').attr('name', 'viewport').attr('content', 'width=device-width,initial-scale=1')

	if (!document.body) {
		document.write(["<div class=\"container\">",
		"<h3>nginx.conf</h3>",
		"<textarea rows=6 cols=50>",
		"# download markdown.html to /wwwroot",
		"location ~ \\.md$ {",
		"    default_type text/html;",
		"    add_after_body /markdown.html;",
		"}",
		"</textarea>",
		"</div>"].join("\n"))
		return
	}

	var bodytext = document.body.innerHTML
	document.body.innerHTML = ''

	div = dom.get('div').attr('class', 'container')

	div.add('script').attr('src', 'https://cdnjs.cloudflare.com/ajax/libs/marked/0.5.2/marked.min.js').attr('integrity', 'sha256-zFUosuESzULu5P+SZdjRRtBZR8+1u5RZDlbt3Q5KL8U=').attr('crossorigin', 'anonymous')
	div.add('link').attr('rel', 'stylesheet').attr('href', 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown-light.min.css').attr('integrity', 'sha256-WQx0Y6LLZeGv3V3NVVge+YIL5MIOt45RPuFdkyNodls=').attr('crossorigin', 'anonymous')

	title = decodeURIComponent(document.location.pathname.replace(/.*\//, '').replace(/\.html$/, ''))
	document.title = '《' + title.replace(/\.md$/, '') + '》'
	tbody = div.add('table').add('tbody')
	tbody.add('tr').add('th').text(title).attr('class', 'octicon-book')
	tbody.add('tr').add('td').add('div').attr('id', 'readme').attr('class', 'markdown-body')

	wait = function (name, callback) {
		var interval = 10; // ms
		window.setTimeout(function() {
			if (window[name]) {
				callback(window[name])
			} else {
				window.setTimeout(arguments.callee, interval)
			}
		}, interval)
	}
	wait('marked', function() {
		document.getElementById("readme").innerHTML = marked.parse(bodytext)
	})

	document.body.appendChild(div.element)
}()
</script>

<style>
body {
	margin: 0;
	font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif;
}
.markdown-body {
	float: left;
	font-family: "ubuntu", "Tahoma", "Microsoft YaHei", Arial, Serif;
}
.container {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 768px) {
	.container {
		max-width: 80%;
	}
}
@media (min-width: 992px) {
	.container {
		max-width: 70%;
	}
}
@media (min-width: 1200px) {
	.container {
		max-width: 60%;
	}
}
table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	padding: 0;
	border-collapse: collapse;
}
table th {
	font-size: 14px;
}
table tr {
	border: 1px solid #ddd;
	padding: 5px;
}
table th, table td {
	border: 1px solid #ddd;
	font-size: 14px;
	line-height: 20px;
	padding: 3px;
	text-align: left;
}
.octicon-book {
	background-position: center left;
	background-repeat: no-repeat;
	padding-left: 20px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,5 L7,5 L7,6 L3,6 L3,5 L3,5 Z M3,8 L7,8 L7,7 L3,7 L3,8 L3,8 Z M3,10 L7,10 L7,9 L3,9 L3,10 L3,10 Z M14,5 L10,5 L10,6 L14,6 L14,5 L14,5 Z M14,7 L10,7 L10,8 L14,8 L14,7 L14,7 Z M14,9 L10,9 L10,10 L14,10 L14,9 L14,9 Z M16,3 L16,12 C16,12.55 15.55,13 15,13 L9.5,13 L8.5,14 L7.5,13 L2,13 C1.45,13 1,12.55 1,12 L1,3 C1,2.45 1.45,2 2,2 L7.5,2 L8.5,3 L9.5,2 L15,2 C15.55,2 16,2.45 16,3 L16,3 Z M8,3.5 L7.5,3 L2,3 L2,12 L8,12 L8,3.5 L8,3.5 Z M15,3 L9.5,3 L9,3.5 L9,12 L15,12 L15,3 L15,3 Z' /%3E%3C/svg%3E");
}
</style>