AppJS-使用js写图形化本地程序

围脖上看到有人说AppJS，去官网围观了下，果然NB，这东西还真就能用JS写图形化本地程序。

传统的图形化本地程序（或者说客户端程序）一般是一个可执行文件，在windows上一般是个exe，执行之后有个图形界面供用户交互。能写图形化本地程序的语言比较多，C/C++、java、C#、python等等，可能有些程序需要图形库支持，比如QT、GTK之类。JS写图形化本地程序之前我还没有听说过，今天这个算是看了眼界了。

简单来说，AppJS把Chromium和Node.js结合在一起，使用了Node.js的本地化能力来进行本地逻辑处理，同时使用Chromium的图形化能力来展现图形化界面，把这两者串起来的就是js了。Node果然无比强大。

使用AppJS来写本地程序有以下几个好处：

1、像写网页一样写本地程序。因为AppJS的图形化用的是Chromium，本质上还是使用浏览器来展现，所以写这样的本地程序跟写网页区别不大。
2、你可以使用Chromium提供的很多牛X哄哄的特性：HTML5, CSS3, SVG, WebGL等
3、你可以使用Node提供的与系统有关的特性：文件系统访问、网络访问、进程管理等，你甚至可是让你的程序是个http服务器。
4、跨平台，目前AppJS支持Windows、Linux和Mac。

来看一下AppJS自带的一个例子吧，界面如图：

这样的界面是怎么做出来的呢，还是看看代码好了

<!doctype html>
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

仅仅是一个页面而已，当然还用了点CSS3

html{ 
width: 100%; 
height: 100%; 
overflow: hidden; 
background-image: url(rainbowsky.jpg); 
background-size: cover;
-webkit-box-sizing: border-box; 
}
body{ 
margin: 0; 
height: 100%; 
font-family: 
FixedWidth; 
color: #fff 
}
h1{ 
text-align: center; 
font-weight: 900; 
font-size: 120px; 
line-height: 1; 
text-shadow: 6px 3px 3px rgba(0,0,0,.7), 0 0 30px #aaccff;
position: absolute; 
margin: -1em 0 0 0; 
top: 50%; 
width: 100%; 
-webkit-text-stroke-width: 2px; 
-webkit-text-stroke-color: #000; 
}

逻辑部分，代码就是Node了，不过例子里也没什么复杂逻辑，就是把界面显示出来而已

var app = module.exports = require('appjs');

app.serveFilesFrom(__dirname + '/content');

var window = app.createWindow({
  width  : 640,
  height : 460,
  icons  : __dirname + '/content/icons',
/***************************** defaults ********************************
* url            : 'http://appjs', // serve static file root and routers
* autoResize     : false,          // resizes in response to html content
* showChrome     : true,           // show border and title bar
* resizable      : false,          // control if users can resize window
* disableSecurity: true,           // allow cross origin requests
* opacity        : 1,              // flat percent opacity for window
* alpha          : false,          // per-pixel alpha blended (Win & Mac)
* fullscreen     : false,          // client area covers whole screen
* left           : -1,             // centered by default
* top            : -1,             // centered by default
*************************************************************************/
});

window.on('create', function(){
  console.log("Window Created");
  this.frame.show();
  this.frame.center();
});

window.on('ready', function(){
  console.log("Window Ready");
  this.require = require;
  this.process = process;
  this.module = module;
  this.console.log('process', process);
});

window.on('close', function(){
  console.log("Window Closed");
});

AppJS托管在github上，有兴趣的去围观吧 https://github.com/appjs/appjs

CoderJoy

码农之乐

AppJS-使用js写图形化本地程序