00:00
大家好,今天我来给大家介绍如何使用note JS开发桌面应用。呃,在开始之前,我们需要确保我们已经安装好了no的环境。这部分大家应该很熟悉了,我们从官网下载note安装包,然后直接安装就可以了。安装好后,我们执行noe-v或者NPM-V来检查我们的安装是否正确。那接下来呢,我们要创建应用,创建应用呢,那我们这一次的应用呢,叫做play Bill是我自己的一个呃,小的工具。呃,首先是创建play Bill文件夹,然后切换到该目录底下,然后执行n PM in命令。然后我们的一些参数一路默认啊,这里需要注意的就是我们的entry point index.js默认的是index.js,这这里我们要改成问点JS。否则在。
01:01
打包的时候会报错。那初始化工程之后,我们需要安装一串的。执行环境。这需要等待一段时间。嗯。嗯,安装结束之后,我们继续进入到package的Jason文件中,加入我们的启动指令。我们在scripts里加入starts命运。
02:02
然后里面执行electron点。然后执行启动NPM,让start检查一下我们的配置是否正确。如果这个时候弹出一个错误的对话框,证明我们的配置已经正确了,不过我们还需要在加入我们的启动脚本。好,接下来我们创建主界面。我们创建一个index.html文件。然后在里面加入我们将要显示到主界面上面的内容。这个文件就可以完全按照一个。哦,HTML的网页去编辑。
03:00
我们可以在里面写上我们的字符集。可以为我们的应用窗口设置标题。啊,还可以增加到我们呃主窗体的内容啊,在这里我们就简单的用hello来代替。好,保存退出。那接下来我们要。为主界面。去写启动脚本。同样我们创建闷点JS,这也是刚才我们在package这点Jason里面,呃,指定的启动脚本。
04:02
然后再。脚本的一开始,加上electron的依赖。然后创建我们的启动方法。这里面没有太多的变化。我们创建主窗体的实力。在创建的时候,我们可以加入一些参数,比如说窗体的宽度和高度。然后为主窗体配置它的显示的界面。
05:02
然后接下来就是当我们的应用加载完毕之后。让他调用主窗体的启动。来显示我们的应用窗口。好,到这里基本上就完成了。我们可以来。执行一下看看效果。嗯,可以看到我们的窗体已经创建成功,并且能够显示出我们刚才在。呃,主界面里输入的内容。那这里面呢,因为麦克S就是我们的苹果主机会有一些特殊的配置,我们现在把苹果主机的配置加上。嗯,因为在苹果系统上,当窗体全被关闭之后,它的程序其实依然在后台执行。
06:08
那为了让我们的窗体在关闭之后,让我们的应用完全退出呢?所以我们要在这里加上一个。呃,所有窗体都关闭的事件。并且在这个事件里面啊,去判断,如果当前的平台是苹果系统的话。我们要对这个应用做一次完整的退出。就是我们要主动的去执行退出命令。好,那我们现在应用的界面呀,还有启动已经开发好了,接下来我们要为这个应用。
07:00
打包。这个打包我们用到了electron builder这个依赖,那首先呢,我们先安装这个依赖。安装好后,我们要配置打包变量。同样是在package的Jason文件中。哦,首先呢,我们要增加打包指令,增加一个Bill的命令。执行的是命令。然后呢,我们还要加入到一些build的参数。
08:01
嗯。嗯,首先呢,可以配置我们的应用标识。然后是我们打包后的名称。还有我们希望打包的平台,比如在Windows上,我们希望打包成一个一键安装的程序包。我们就可以加上Windows。然后他的他这是一个n sis类型的格式。啊,如果我们对这个NSS有一些其他的配置需求的话,我们可以在底下再加上。NSS的配置。这里我们就使用默认的配置了,做其他的变更了。
09:12
好完成配置以后。我们可以执行打包。执行也很简单,就是执行我们刚才在package Jason里面配置的build指令。我们看到打包指令已经开始执行,这个时候我们可能需要等一小会儿。嗯,注意啊,如果在这个过程中我们发现,嗯,他要从 Ghu.com去下载一些环境。如果这个环境下载失败的话,我们可以手动复制这个链接,然后通过下载工具下载好后把它放到。我们程序的开始目录。
10:01
然后这样就可以避免下载失败的问题了。这个也是需要再等一等。好,我们的打包已经执行完了,那接下来我们来看一看打包之后的效果。我们看到打包之后,在我们的。应用目录下面出现了一个Dis Dis文件夹,然后里面呢有一个安装包。然后还有一个检验好的。这里我们直接看检验好的那个应用程序。双击play Bill,也就是我们的那个应用。我们看到窗口已经被打开了。然后上面也显示着我们。
11:01
刚刚编辑出来的内容。那到此呢?Note JS开发应用的内容。我们就。实现了,感谢大家的收看,再见。
我来说两句