使用nwjs开发桌面应用之Hello,World!

时间 2020-05-29

标签使用 nwjs 开发桌面应用 hello world 繁體版

原文原文链接

　　今天发现原来JavaScript也能够用来开发桌面应用程序，顿时有一种很牛逼的感受，因而立刻就开始了Hello,World!，感觉一下JavaScript的强大。html

　　能够用来开发桌面应用的js框架有三种：node

　　1.NW.jsgit

　　NW.js是Intel的工程师写的一个基于node.js和chromium的应用程序运行环境。项目地址是：https://github.com/rogerwang/node-webkitgithub

　　2.Electronweb

　　Electron是一款利用Web技术开发跨平台桌面应用的框架。项目地址是:https://github.com/atom/electronjson

　　3.Hexwindows

　　Hex是基于 CEF 而且融合了 Chromium 与 Node.js编写的，好像有道词典就是用这个写的。可是这个框架已经三年没更新了，因此直接弃用。。。。。。框架

　　因而个人目光就指向了NW.js，毕竟是Intel大神的杰做，具体Hello,World!的步骤以下。electron

　　1、NW.js的下载

　　官网地址是：http://nwjs.io/工具

　　进去以后，点击下载SDK的版本，并解压至本地目录便可。

　　2、应用编写

　　1.在nw.exe目录中建立一个helloworld的文件夹。

　　新建index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello World!</title>
    <script src="helloworld.js"></script>
</head>
<body>
    
</body>
</html>

　　新建helloworld.js

document.write('Hello, World!');

　　新建package.json

{
  //应用的入口页面(也能够设置成js文件)
  "main": "index.html",
  //应用的名称
  "name": "HelloWorld"
}

　　2. 运行helloworld。

　　a) 在nw.exe所在目录按下shift+鼠标右键，选择"在此处打开命令窗口"。而后输入nw helloworld便可看到运行效果。

　　b) 能够直接将helloworld目录拖拽到nw.exe上一样也能够运行。

　　3、应用打包

　　通常windows的桌面应用都是exe可执行文件，是不依赖于其余文件和环境的。而咱们建立的helloworld应用是依赖于nw.exe和相关文件的，那么如何将应用打包成一个可执行文件呢？

　　通过google，果真是有解决方案的，那就是Enigma Virtual Box

　　1. 下载Enigma Virtual Box

　　地址是：http://enigmaprotector.com/en/downloads.html

　　选择最后一个下载就能够了，而后安装。

　　2. 将应用打包成helloworld.nw文件。

　　进入到helloworld目录中，全选三个文件打包成zip，而后更名成helloworld.nw。

　　(遇到的坑，我本机安装的压缩工具为winRAR，因此打出来的格式一致有问题，因此致使没法成功执行，后来换成7-zip就行了。)

　　3. 合并helloworld.nw和nw.exe

　　将helloworld.nw文件移动到和nw.exe同级目录下，而后执行命令

copy /b nw.exe+helloworld.nw hello.exe

　　发现多了一个hello.exe文件，双击发现是能够运行的。不过这还不是最终的结果，由于将hello.exe移动到其余文件夹以后，就不能正常执行了。

　　4. 使用Enigma Virtual Box打包成exe

　　Input File Name选择刚才生成的hello，Output File Name就是输出文件。

　　重点来了，下面的Files须要将locales和pnacl两个文件夹拖入，而后add选择nw.exe目录中全部不包含咱们建立的helloworld应用的文件

　　而后点击右下角的"Process"按钮，

　　看到上图结果，就说明执行成功了。

　　找到打包后的文件，而后执行。

　　大功告成！！！遇到问题的小伙伴能够留言或者加入q群：210276235。