【技术创作101训练营】使用NodeJS创建桌面应用原创

大家好，今天我来给大家介绍如何使用note JS开发桌面应用。呃，在开始之前，我们需要确保我们已经安装好了no的环境。这部分大家应该很熟悉了，我们从官网下载note安装包，然后直接安装就可以了。安装好后，我们执行noe-v或者NPM-V来检查我们的安装是否正确。那接下来呢，我们要创建应用，创建应用呢，那我们这一次的应用呢，叫做play Bill是我自己的一个呃，小的工具。呃，首先是创建play Bill文件夹，然后切换到该目录底下，然后执行n PM in命令。然后我们的一些参数一路默认啊，这里需要注意的就是我们的entry point index.js默认的是index.js，这这里我们要改成问点JS。否则在。

打包的时候会报错。那初始化工程之后，我们需要安装一串的。执行环境。这需要等待一段时间。嗯。嗯，安装结束之后，我们继续进入到package的Jason文件中，加入我们的启动指令。我们在scripts里加入starts命运。

然后里面执行electron点。然后执行启动NPM，让start检查一下我们的配置是否正确。如果这个时候弹出一个错误的对话框，证明我们的配置已经正确了，不过我们还需要在加入我们的启动脚本。好，接下来我们创建主界面。我们创建一个index.html文件。然后在里面加入我们将要显示到主界面上面的内容。这个文件就可以完全按照一个。哦，HTML的网页去编辑。

我们可以在里面写上我们的字符集。可以为我们的应用窗口设置标题。啊，还可以增加到我们呃主窗体的内容啊，在这里我们就简单的用hello来代替。好，保存退出。那接下来我们要。为主界面。去写启动脚本。同样我们创建闷点JS，这也是刚才我们在package这点Jason里面，呃，指定的启动脚本。

然后再。脚本的一开始，加上electron的依赖。然后创建我们的启动方法。这里面没有太多的变化。我们创建主窗体的实力。在创建的时候，我们可以加入一些参数，比如说窗体的宽度和高度。然后为主窗体配置它的显示的界面。

然后接下来就是当我们的应用加载完毕之后。让他调用主窗体的启动。来显示我们的应用窗口。好，到这里基本上就完成了。我们可以来。执行一下看看效果。嗯，可以看到我们的窗体已经创建成功，并且能够显示出我们刚才在。呃，主界面里输入的内容。那这里面呢，因为麦克S就是我们的苹果主机会有一些特殊的配置，我们现在把苹果主机的配置加上。嗯，因为在苹果系统上，当窗体全被关闭之后，它的程序其实依然在后台执行。

那为了让我们的窗体在关闭之后，让我们的应用完全退出呢？所以我们要在这里加上一个。呃，所有窗体都关闭的事件。并且在这个事件里面啊，去判断，如果当前的平台是苹果系统的话。我们要对这个应用做一次完整的退出。就是我们要主动的去执行退出命令。好，那我们现在应用的界面呀，还有启动已经开发好了，接下来我们要为这个应用。

打包。这个打包我们用到了electron builder这个依赖，那首先呢，我们先安装这个依赖。安装好后，我们要配置打包变量。同样是在package的Jason文件中。哦，首先呢，我们要增加打包指令，增加一个Bill的命令。执行的是命令。然后呢，我们还要加入到一些build的参数。

嗯。嗯，首先呢，可以配置我们的应用标识。然后是我们打包后的名称。还有我们希望打包的平台，比如在Windows上，我们希望打包成一个一键安装的程序包。我们就可以加上Windows。然后他的他这是一个n sis类型的格式。啊，如果我们对这个NSS有一些其他的配置需求的话，我们可以在底下再加上。NSS的配置。这里我们就使用默认的配置了，做其他的变更了。

好完成配置以后。我们可以执行打包。执行也很简单，就是执行我们刚才在package Jason里面配置的build指令。我们看到打包指令已经开始执行，这个时候我们可能需要等一小会儿。嗯，注意啊，如果在这个过程中我们发现，嗯，他要从 Ghu.com去下载一些环境。如果这个环境下载失败的话，我们可以手动复制这个链接，然后通过下载工具下载好后把它放到。我们程序的开始目录。

然后这样就可以避免下载失败的问题了。这个也是需要再等一等。好，我们的打包已经执行完了，那接下来我们来看一看打包之后的效果。我们看到打包之后，在我们的。应用目录下面出现了一个Dis Dis文件夹，然后里面呢有一个安装包。然后还有一个检验好的。这里我们直接看检验好的那个应用程序。双击play Bill，也就是我们的那个应用。我们看到窗口已经被打开了。然后上面也显示着我们。

刚刚编辑出来的内容。那到此呢？Note JS开发应用的内容。我们就。实现了，感谢大家的收看，再见。