node-webkit制作桌面应用
心血来潮突然想用js尝试写桌面应用，突然发现我大js真的无所不能。在网上搜到了这么一个东东：node-webkit。用Node.js来进行系统资源的访问，用HTML+CSS完成页面的搭建。哇，一切突然就好像变得特别简单。大学上c#课时也用c#制作过一些很入门的桌面应用，严格来说那个叫桌面窗体程序。比起来，node-webkit创建桌面应用的方式就像是我平时用来搭积木的东西突然可以盖楼了~厉害了，我的js。
废话少说，我把我的helloworld过程详细搞出来，过程中还有一些小坑，小思考。如下：
1.环境
首先，肯定要把node-webkit这个好帮手下载下来。
gihub地址：https://github.com/nwjs/nw.js/nw官网：https://nwjs.io/
根据系统不同选择不同的版本，我这里下的是win64的版本，其他系统也基本大同小异。
v0.20.1: (Feb 2, 2017, based off of Node.js v7.5.0, Chromium 56.0.2924.87): release notes
NOTE You might want the SDK build. Please read the release notes.
☀Linux: 32bit / 64bit
☀Windows: 32bit / 64bit
☀Mac 10.9+: 64bit
☀Use LTS build for Win XP and early OSX.
latest live build: git tip version; build triggered from every git commit: https://dl.nwjs.io/live-build/
Previous versions
下载以后找到nw.exe。如果可以打开，那么就是环境搭好啦~接下来，就是开发软件啦~\(≧▽≦)/~
2.Hello World
我们为了方便就在刚刚下载下来的nw文件夹里创建一个文件夹，例如名字叫做product1。然后创建一个package.json。格式如下：
{
"name": "app1",//程序名字
"version": "0.1.0",//版本号
"main": "index.html",//程序入口
"window": {
"toolbar": false, // 工具栏
"frame": false, // 框架
"width": 1000,
"height": 650,
"resizable": false//是否可调整大小
}
}
这里我只是用了一部分参数，更多的可以去官网查询文档，这里就不提了。
（看看就好）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css">
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="top">
<span id="logo">CosName</span>
<div id="drag"></div>
<ul id="nav">
<li id="close"><a href="#" id="close_btn"></a></li>
<li id="large"><a href="#" id="a" class="large_btn"></a></li>
<li id="mini"><a href="#" id="mini_btn"></a></li>
</ul>
</ul>
</div> <div id="play_area">
<video src="" width="400" height="400" controls="controls "></video>
</div>
<div id="movie_list">
<ul>
<li><a href=""></a></li>
</ul>
</div>
<div id="footer">
</div>
</body>
</html>
<script src="index.js" type="text/javascript"></script>
Html
*{
margin:;
padding:;
background-color: #3C3C3C;
color: lightgray;
outline: none;
user-select: none;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
#top{
width: 100%;
height: 30px;
border-bottom: 1px solid #272727;
}
#logo{
position: absolute;
left: 10px;
right:;
width: 80px;
height: 30px;
line-height: 30px;
font-weight: bold;
}
#drag{
width: 91%;
height: 30px;
-webkit-app-region: drag;
display: inline-block;
}
#nav{
position: absolute;
display: inline-block;
right:;
width: 90px;
height: 30px;
background-color: rebeccapurple;
}
#nav li{
width: 30px;
height: 30px;
float: right;
}
#nav li a{
display: inline-block;
width: 30px;
height: 30px;
z-index:;
}
#close a{
background: url("close.png") 0 no-repeat;
background-size: 20px;
background-position: center;
}
#large a{
background: url("large.png") 0 no-repeat;
background-size: 20px;
background-position: center;
}
#mini a{
background: url("mini.png") 0 no-repeat;
background-size: 20px;
background-position: center;
}
#close a:hover,#a:hover,#mini a:hover{
opacity: 0.7;
}
#play_area{
margin: 30px 0 0 20px;
width: 400px;
height: 400px;
border: 1px solid #272727;
box-shadow: 0 1px 2px #8E8E8E;
}
#footer{
position: fixed;
bottom:;
width: 100%;
height: 32px;
border-top: 1px solid #272727;
box-shadow: 0 1px 2px #8E8E8E;
}
css
var gui = require('nw.gui');
var win = gui.Window.get();
$('#close_btn').click(function () {
win.close();
})
$("#mini_btn").click(function () {
win.minimize();
})
$("#a").click(function () {
if($(this).attr("id")=="a"){
win.maximize();
$(this).css("backgroundImage","url('restore.png')")
$(this).attr({id:"b"});
}else{
win.restore();
$(this).css("backgroundImage","url('large.png')")
$(this).attr({id:"a"});
}
})
Javascript
当然这一步自由发挥，程序最终呈现的效果就是你的页面在浏览器上的效果。
3.打包
nw应用的打包灰常简单，只需要把上边我们创建的所有和页面有关的文件包括那个json，统统压缩成zip格式的文件，然后更改后缀名为.nw，把这个文件直接拖到nw.exe上运行，出来的就是你的程序了。
这一步里我要说的是，如果在测试程序阶段，可以直接把没有压缩的文件夹拖到nw.exe上运行，不需要压缩也不要改后缀名，效果是一样一样的~
到了这里虽然我们程序效果有了，但是有一个很重要的问题，假如我做好了一个桌面程序，我想要给小伙伴发过去让他感受一下我的技艺精湛：）我总不能把他拖到我电脑前给他演示呀。这里有两步，首先把我们之前产出的这些文件和nw.exe进行一个合并，可以在nw根目录shift加右键快速打开命令窗口，然后键入以下代码：
copy /b nw.exe+myapp.nw myapp.exe（这里的myapp就是你压缩文件的名字，myapp.exe是你打包后产出exe程序的名字）
4.总结
Javascript搭建桌面应用的过程可谓简单轻松，但是这种方式也有一个显著的弊端。就是文件体积庞大。像我上述的那个程序全部打包好后有80多mb，可分明我都没写什么啊╮(╯_╰)╭。所以目前看来娱乐娱乐差不多，要做商业产品的话，估计还得优化。
node-webkit制作桌面应用的更多相关文章
- heX——基于 HTML5 和 Node.JS 开发桌面应用
heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...
- Fenix – 基于 Node.js 的桌面静态 Web 服务器
Fenix 是一个提供给开发人员使用的简单的桌面静态 Web 服务器,基于 Node.js 开发.您可以同时在上面运行任意数量的项目,特别适合前端开发人员使用. 您可以通过免费的 Node.js 控制 ...
- 基于node.js制作爬虫教程
前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...
- 在deepin系统中制作桌面快捷方式
在使用deepin-wine 安装一些软件的时候,每次启动都需要到.deepinwine目录下运行deepin-wine xx.exe.笔者在安装过HeidiSql之后,一直苦于这种情况.比较好的解决 ...
- electron+vue制作桌面应用--自定义标题栏
electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分 ...
- electron利用nodejs+移动端技术跨平台桌面应用开发框架——记录下，类似node webkit！
Build cross platform desktop appswith JavaScript, HTML, and CSS Electron: 1.6.8Node: 7.4.0Chromium: ...
- heX：用HTML5和Node.JS开发桌面应用
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- (转)heX——基于 HTML5 和 Node.JS 开发桌面应用
本文转载自:http://techblog.youdao.com/?p=685 简介:heX,一个允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.是你开发 ...
- node.js 开发桌面程序， 10个令人惊讶的NodeJS开源项目
用 node-webkit 开源框架. 做企业站,杠杠地 包括电子书和支付宝系统都是node开发的,. 接收传感器发送的数据再运算...对水泵.风机.空调这些硬件进行远程控制. 细数10个令人惊讶的N ...
随机推荐
- JQuery中根据表单元素动态拼接json 字符串
// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- 10.TCP连接的建立与终止
1.建立连接协议 (1)请求端发送一个SYN段指明客户打算连接的服务器的端口,移机初始序号ISN.这个SYN段为报文段1. (2)服务器发回包含服务器的初始序号的SYN报文段作为应答.同时,将确认 ...
- vdi、vhd、vmdk虚拟格式转换
VirtualBox带来VBoxManager.exe,可以来转换格式. 命令如下(Windows环境,Linux版的应该也有VBoxManager这个二进制文件): VBoxManager存在于Vi ...
- 10种处理PHP字符串的措施
PHP有一个海量字符串操作库,提供了大约100个分割.连接.解析和搜索文本的功能.在这一点上,PHP的性能是如此地强大以至于在处理字符串相关问题时,判断哪一个是最好的方法会比较困难.本文中我讲了10个 ...
- iOS 之 绘图简介
iOS 实现图形编程主要有三种技术:UIKit.Core Graphics.OpenGL. 绘图需要在图形环境中进行,图形环境分为三种:屏幕图形环境.off screen 位图环境和PDF图形环境.在 ...
- --@angularJS--较复杂的指令嵌套demo——综合小实例：登陆界面
1.index.html: <!DOCTYPE HTML><html ng-app="app"><head> <title>c ...
- Windows Server 2012的配置与部署
一. 背景 这里以阿里云Windows Server 2012系统的服务器为主,介绍服务器的配置以及.Net程序的发布顺序,在后续的项目管理文章中,会介绍<运维手册>的写法. 二. 步骤 ...
- cookie、session、sessionid的区别
我们都知道银行,银行的收柜台每天要接待客户存款/取款业务,可以有几种方案: 1.凭借柜台职员的记忆,由收柜台职员来为每位顾客办理存款/取款业务,单凭职员的记忆力,要记到每位顾客的相貌,并迅速这个顾客当 ...
- SpringMVC+RestFul详细示例实战教程
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--conf ...
- RxJava2出现:Unable to create call adapter for io.reactivex.Flowable
前面一直使用的是Rxjava 1.x 版本,最近 Rxjava 2.x 版本发布了,并且支持了背压,便换成了 Rxjava 2.x 版本.更换之后出现了下面的错误. Caused by: java.l ...