今天发现原来JavaScript也可以用来开发桌面应用程序,顿时有一种很牛逼的感觉,于是马上就开始了Hello,World!,感受一下JavaScript的强大。

  可以用来开发桌面应用的js框架有三种:

  1.NW.js

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

  2.Electron

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

  3.Hex

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

  于是我的目光就指向了NW.js,毕竟是Intel大神的杰作,具体Hello,World!的步骤如下。

  一、NW.js的下载

  官网地址是:http://nwjs.io/

  进去之后,点击下载SDK的版本,并解压至本地目录即可。

  

  二、应用编写

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

  新建index.html

  

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello World!</title>
  6. <script src="helloworld.js"></script>
  7. </head>
  8. <body>
  9.  
  10. </body>
  11. </html>

  新建helloworld.js

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

  新建package.json

  1. {
  2. //应用的入口页面(也可以设置成js文件)
  3. "main": "index.html",
  4. //应用的名称
  5. "name": "HelloWorld"
  6. }

  2. 运行helloworld。

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

  b) 可以直接将helloworld目录拖拽到nw.exe上同样也可以运行。

  三、应用打包

  一般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同级目录下,然后执行命令

  1. 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。

使用nwjs开发桌面应用之Hello,World!的更多相关文章

  1. Nwjs开发桌面应用

    使用Nwjs开发桌面应用体验 https://www.cnblogs.com/zhupengfei/p/8906131.html 之前一直用.net开发桌面应用,最近由于公司需要转为nodejs,但也 ...

  2. 使用Nwjs开发桌面应用体验

    之前一直用.net开发桌面应用,最近由于公司需要转为nodejs,但也是一直用nodejs开发后台应用,网站,接口等.近期,需要开发一个客户端,想着既然nodejs号称全栈,就试一下开发桌面应用到底行 ...

  3. arcpy+PyQt+py2exe快速开发桌面端ArcGIS应用程序

    前段时间有一个项目,大体是要做一个GIS数据处理工具. 一般的方法是基于ArcObjects来进行开发,因为我对ArcObjects不太熟悉,所以就思考有没有其他简单快速的方法来做. 在查看ArcGI ...

  4. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  5. NativeScript 也能开发桌面应用 (nativescript-dotnet-runtime)

    自从看了NativeScript就甚是喜欢,心想要是也能开发桌面应用该多好.求人不如求己,开源组件很强大,差不多组装一下就行了,说干就干. Javascript 引擎用 Jint , 纯C#实现,集成 ...

  6. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  7. heX:用HTML5和Node.JS开发桌面应用

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  8. node-webkit:开发桌面+WEB混合型应用的神器

    顾名思义, node -webkit就是 node js+webkit. 这样做的好处显而易见,核心奥义在于,用 node js来进行本地化调用,用webkit来解析和执行HTML+JS. 快速上手 ...

  9. HTML5开发桌面应用:选择node-webkit还是有道heX

    近几年,移动应用和web2.0大行其道,相比之下.传统桌面应用程序开发显得相对冷清(包含该领域技术人才的后继力量),但在一些场景下,它依旧有其不可替代的优势. 将HTML5和Node.JS的技术优势. ...

随机推荐

  1. 【小程序分享篇 二 】web在线踢人小程序,维持用户只能在一个台电脑持登录状态

    最近离职了, 突然记起来还一个小功能没做, 想想也挺简单,留下代码和思路给同事做个参考. 换工作心里挺忐忑, 对未来也充满了憧憬与担忧.(虽然已是老人, 换了N次工作了,但每次心里都和忐忑). 写写代 ...

  2. “.Net 社区虚拟大会”(dotnetConf) 2016 Day 1 Keynote: Scott Hunter

    “.Net 社区虚拟大会”(dotnetConf) 2016 今天凌晨在Channel9 上召开,在Scott Hunter的30分钟的 Keynote上没有特别的亮点,所讲内容都是 微软“.Net社 ...

  3. 搞个这样的APP要多久?

    这是一个“如有雷同,纯属巧合”的故事,外加一些废话,大家请勿对号入座.开始了…… 我有些尴尬地拿着水杯,正对面坐着来访的王总,他是在别处打拼的人,这几年据说收获颇丰,见移动互联网如火如荼,自然也想着要 ...

  4. WPF 微信 MVVM 【续】修复部分用户无法获取列表

    看过我WPF 微信 MVVM这篇文章的朋友,应该知道我里面提到了我有一个小号是无法获取列表的,始终也没找到原因. 前两天经过GitHub上h4dex大神的指导,知道了原因,是因为微信在登录以后,web ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统(64)-WebApi与Unity注入

    系列目录 前言: 有时候我们系统需要开放数据给手机App端或其他移动设备,不得不说Asp.net WebApi是目前首选 本节记录Asp.net MVC WebApi怎么利用Unity注入.系列开头已 ...

  6. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  7. Android Studio开发RecyclerView遇到的各种问题以及解决(一)

    以前一直在用ListView,,,最近才看RecyclerView发现好强大.RecyclerView前提是Android版本在5.0以上,本人以前用的是eclipse只支持到4.4.索性就安装一个A ...

  8. Android之网络数据存储

    一.网络保存数据介绍 可以使用网络来保存数据,在需要的时候从网络上获取数据,进而显示在App中. 用网络保存数据的方法有很多种,对于不同的网络数据采用不同的上传与获取方法. 本文利用LeanCloud ...

  9. Java集合类--温习笔记

    最近面试发现自己的知识框架有好多问题.明明脑子里知道这个知识点,流程原理也都明白,可就是说不好,不知道是自己表达技能没点,还是确实是自己基础有问题.不管了,再巩固下基础知识总是没错的,反正最近空闲时间 ...

  10. 设置Hyper-V和VMware多个服务之间共存

    这个方法是解决多个服务之间不能共存,下面相当于是以Hyper-V和VMware做例子,其他的也适用. 今天准备安装VMware Workstation 10,然后玩玩MAC OS. 没想到,淡定的我双 ...