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

分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

               

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

1.1. 理解Atwood定律 1

1.2. H5做出个htmlui是很方便的,跨平台 2

1.3. 启动exe。。使用chromeapp模式启动即可 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脚本等)。。

 

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

 

 

1.2. H5做出个htmlui是很方便的,跨平台

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

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

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

1.3. 启动exe。。使用chromeapp模式启动即可

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

现在,经过我孜孜不倦的研究,使用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貌似比较难以直接调用osapi。。还好,使用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=
    
varmeth=req.query.meth;
    eval(meth+"(req,res)");
    var p1=req.query.p1
    console
.log("---p:"+p1);
 //   res.send('Hello world');
});
 functionopenTmpPic(req, res)
{
    var fsrMode= require("../com.attilax/ui/FileSelector.js");
    var fsr=newfsrMode.FileSelector();
    fsr.folderSelector(function(path){
        res.send(path);
    })
}

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

比如调用osapi,。稍微麻烦些。还好可以通过cli接口调用autoitshellos dsl来解决。。

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

其次,一些类库比如opencvjs的支持还不够,需要通过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:[email protected]

头衔: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

           

分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

猜你喜欢

转载自blog.csdn.net/jffyuhgv/article/details/87895942
今日推荐