Atitit 使用h5技术( html css js)制作桌面程序gui界面解决方案attilax总结

1.1. 理解Atwood定律 1

1.2. H5做出个html的ui是很方便的，跨平台 2

1.3. 启动exe。。使用chrome 的app模式启动即可 2

1.4. Js ide使用webstorm，支持js单点调试 3

1.5. 使用ajax技术连接界面ui与后端 3

1.6. H5技术调用本地文件选择对话框 4

1.7. 结论，使用javascript技术制作桌面gui程序已经比较成熟了。但是依然有一些小坑 6

1.1. 理解Atwood定律

在Jeff Atwood发表于2007年的这篇博客里，他提出了著名的“Atwood定律”，即”任何能够用JavaScript实现的应用系统，最终都必将用JavaScript实现。“ （Any application that can be written in JavaScript, will eventually be written in JavaScript.

这应该就是Jeff Atwood定律的由来：JavaScript既能独立完成所有互联网应用所需的功能开发，同时又是主流编程语言中最为轻量级的

编程语言的可读性与开发效率提升，也是从机器语言>>asm汇编》》native类型语言(vb pb c c++ delphi) >>vm类型语言(java c#) >>script脚本语言(js python php) >>dsl类型语言(halcon matlab h5 autoit shell sql脚本等）。。

脚本语言和dsl在GUI领域一个非常好的一个选择，主流脚本基本语言有js python php等，当然还要集大成者h5。。Attilax更加的看好js ，python的缩进很蛋疼。。脚本语言最大的优点就是不用编译啊，方便修改，体积小巧。部署友好性较好。。

1.2. H5做出个html的ui是很方便的，跨平台

但是还是有一些坑要填的啊。。特此记录。。

H5 的ui方面的ide就是dw了。。我用的dreamweaver cc 2015版本还不错

H5方面的资源就很多了，浩如烟海，这里我使用jq操作dom，使用bootstrap这个css框架稍微美化下界面

1.3. 启动exe。。使用chrome 的app模式启动即可

以往我们桌面gui程序使用h5做界面，需要使用webkit browser控件作为主控件，比如c#.net的wpf，或者java的javafx，还是有些麻烦的。。

现在，经过我孜孜不倦的研究，使用chrome这些浏览器的app模式即可啊。。现在的浏览器功能真是越来越强大了啊。。

如果全屏程序，全屏模式：kiosk

启动命令 C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --app=http://localhost:8088/imgSearch/imgSearch.html

效果如下图，和使用javafx技术制作桌面gui程序是一模一样的。。

1.4. Js ide使用webstorm，支持js单点调试

后端的js调试使用这个ws。。前段js调试使用chrome的开发者工具即可了。。。

1.5. 使用ajax技术连接界面ui与后端

还有一种浏览器扩展对象技术，可以直接连接后端，单貌似不好调试。。也许是我研究的不够。。

使用ajax技术连接后端有个好处就是方便调试，毕竟chrome这些浏览器的debug工具很强大的。

不过使用ajax，就得要一个web server了。这里直接使用nodejs +express web模块

var path = require('path');
var express = require('express');
var app = express();
console.log("__dirname:"+__dirname)
webroot=path.join(__dirname, '..');
console.log("webroot:"+webroot)

//return;

app.use(express.static(webroot));

app.get('/', function(req, res) {
res.send('Hello world');
});

var server = app.listen(8088, function() {
console.log('Express is listening to http://localhost:8088');
});

1.6. H5技术调用本地文件选择对话框

默认h5是不能调用本地文件路径的。。所以我们使用ajax技术后端调用即可。。不过，js貌似比较难以直接调用os的api。。还好，使用cli接口调用一个exe打开文件选择框即可。。。这个exe文件使用autoit脚本即可制作。。Autoit是个调用os功能的很好的dsl，其次使用shell脚本也是个调用os功能的强大dsl。。。

这样就可以直接打开本地的文件筐了

确认后，会把本地路径显示到文本框里面去

function main() {
    $("#openTmpPic").click(function () {
        //note must add ati ext ...beir   backcall/?xxxx
        $.get("../backcall.ati", {cls: null, meth: "openTmpPic", p1: "v1", p1_type: "int", rdm: Math.random()}, function (arry) {
                    $("#tmppath").val(arry);
        });

});

在nodejs后端，增加一个调用即可

app.get('/backcall.ati', function(req, res) {
//   reqG=
    var meth=req.query.meth;
    eval(meth+"(req,res)");
    var p1=req.query.p1
    console.log("---p:"+p1);
//   res.send('Hello world');
});
function openTmpPic(req, res)
{
    var fsrMode = require("../com.attilax/ui/FileSelector.js");
    var fsr=new fsrMode.FileSelector();
    fsr.folderSelector(function(path){
        res.send(path);
    })
}

1.7. 结论，使用javascript技术制作桌面gui程序已经比较成熟了。但是依然有一些小坑

比如调用os的api，。稍微麻烦些。还好可以通过cli接口调用autoit ，shell等os dsl来解决。。

js目前不能直接调用dll貌似。貌似有时候还得通过调用autoit来解决。。

其次，一些类库比如opencv对js的支持还不够，需要通过py来中转。。

作者:: 绰号:老哇的爪子claw of Eagle 偶像破坏者Iconoclast image-smasher

捕鸟王"Bird Catcher kok 虔诚者Pious 宗教信仰捍卫者 Defender Of the Faith. 卡拉卡拉红斗篷 Caracalla red cloak 万兽之王

简称：： Emir Attilax Akbar 埃米尔阿提拉克斯阿克巴

全名：：Emir Attilax Akbar bin Mahmud bin attila bin Solomon bin adam Al Rapanui 埃米尔阿提拉克斯阿克巴本马哈茂德本阿提拉本所罗门本亚当阿尔拉帕努伊

常用名：艾提拉（艾龙）， EMAIL:1466519819@qq.com

头衔：uke总部o2o负责人，全球网格化项目创始人，

uke宗教与文化融合事务部部长， uke宗教改革委员会副主席

Emir Uke部落首席大酋长，

uke制度与重大会议委员会委员长，uke保安部首席大队长,uke制度检查委员会副会长，

uke 首席cto 奶牛科技首席cto ，软件部门总监技术部副总监研发部门总监主管产品部副经理项目部副经理

uke波利尼西亚区大区连锁负责人汤加王国区域负责人 uke克尔格伦群岛区连锁负责人，莱恩群岛区连锁负责人，uke布维岛和南乔治亚和南桑威奇群岛大区连锁负责人

Uke软件标准化协会理事长理事长 Uke 数据库与存储标准化协会副会长

uke终身教育学校副校长 Uke医院与医学院方面的创始人

Uke 户外运动协会理事长度假村首席大村长 uke交友协会会长

uke出版社编辑总编

转载请注明来源：attilax的专栏 ?http://blog.csdn.net/attilax

--Atiend v4