用HTML开发Windows桌面应用程序

转载自：http://blog.csdn.net/xiaoaiai/article/details/46043077

如果要说明这个题目上的问题，就先要说一下，软件开发的种种方式，从最初的命令行软件开发方式，到可视化的窗口软件，开发方式的进步使得开发难度降低，用户体验也越来越完善，不过今天要谈的是windows下的桌面软件开发方式，关于windows下桌面软件的开发方式，请看下面：

1. 传统的开发方式。基于WIN32、MFC

这种开放方式最传统，也最简便，从工具箱拖动控件，生成一个变量，打开MSDN找到关于这种的类的定义，便可以对它进行操作。如果技术熟练，开发出一个可以使用的工具，几乎没有难度。但缺点就是界面程序过于简陋，几乎设计师无法参与你的开发工作，只能帮你把图标切出来，可是甭管你的设计师如何帮你设计图标，你做出的软件看上去还是显得如此寒碜

2.重写MFC控件

这是一种开发方式上的进步，通过现有的系统组件，重写它的样式，然后把它的实现也重写了，就能完成你想要的功能。

关于如何实现MFC重绘，可以去参看以下这个代码试试：

http://www.codeproject.com/Articles/2840/CProgressCtrlST/

这下，设计师终于可以帮你设计整个界面，并且你也可以按照设计师的设计图完整的实现你的程序。不过你的设计师如果是个很有创造能力的人，设计出一些奇里古怪的界面，你还是会被他的DEMO打败。你会发现一些奇怪的操作方式，通过重写MFC根本无法实现。更操蛋的是，一个程序里可能出现相同的类型，却操作完全不同的多个控件，比如BOTTON,可能你要重写好多个类型，并且每个类实现的功能都不一样。

这样你只能使用下一种方式。

3.无窗体绘图。

这下你终于牛逼了，纵然产品经理是个多么装逼的货，设计师多么有个性，对你来说，他们的需求你都可以实现。虽然这种技术相对上两种来说难度够大，你要敲入的代码也很多，不过只要你会创建一个窗口，然后知道各种消息的原理，尤其要明白WM_PAINT,还有鼠标操作的消息，比如WM_MOUSEHOVE,WM_MOUSEMOVE等，然后用GDI不停的绘图，就可以实现各种操作了。

比如像QQ,360,MSN等这些看上去很漂亮的界面，都是用这个方式写成的

关于无窗体绘图技术，看看这个项目

http://www.viksoe.dk/code/windowless1.htm

你、产品经理、设计师都很满意。

不过现实是很残酷的，当你开始搞以后，你会发现，相对你旁边写PHP的那帮货们，你的工作要忙非常的多，因为他们把PHP程序写完，基本就完工了，即使页面出了问题，各种效果没有了，只需要扯大嗓门喊过前端开发看他耍牛逼就可以了。可对于你，即使界面上一个像素的改动，都需要你去改，如果你要实现LISTBOX这个很操蛋的功能，你会发现，不经过长时间的调试，极端的可能是，你的列表记录都没有办法完成的输出。或者设计突然改变，或者产品需求突然改变。。。。。。都是你的噩梦，因为你的工作，没有人帮你分担，当你筋疲力尽像打个盹时，你的领导就会走到你面前：

当然，还有一种开发模式，相信你是最想要的

4.HTML+CSS+JS

你只要写好功能的实现，如何现实界面甚至逻辑都和你没有关系了，比如要实现读取一个本地文件并返回内容，你只要createfile就可以了，然后具体返回的内容怎么用，和你就没有关系了，剩下的，就交给前段前端工程师搞就可以了。这个就是我要介绍的重点。

基于HMTL,CSS,JAVASRIPT桌面软件开发方式

用HTML,CSS,JS去构建一个桌面程序,其实这种技术并不新鲜，打开你的VS，便可以创建基于MFC的DHTML窗口。其实就是内嵌IE浏览器，再调用IE的接口去和JS实现交互

这种技术的好处在于前端开发人员（HTML,JS）和后端开发人员（c++），可以互不依赖的工作。

关于这种方式。。。

1.MFC,DHMTL开发

给大家演示一下，用MFC搞一个HTML应用程序。

关于如何用MFC搞DHTML，可以参见上一篇文章

贴代码

1.添加这个消息映射

[cpp] view plain copy

BEGIN_DISPATCH_MAP(CMFCApplication9Dlg, CDHtmlDialog)
DISP_FUNCTION(CMFCApplication9Dlg, "DianDian", DianDian, VT_EMPTY, VTS_NONE)
END_DISPATCH_MAP()

2.添加方法一个安全方法，否则会弹出安全提示

[cpp] view plain copy

BOOL CMFCApplication9Dlg::CanAccessExternal()
{
return TRUE;
}

注意，它是个需方法，声明时候要注意

[cpp] view plain copy

virtual BOOL CanAccessExternal();

3.添加刚才映射的DiandianJS 方法

[cpp] view plain copy

void CMFCApplication9Dlg::DianDian()
{
}

以为这就完事了吗？如果这么简单就完事，还需要我出来装逼？

4.最后了，再加两句就完事了

[cpp] view plain copy

BOOL CMFCApplication9Dlg::OnInitDialog()
{
CDHtmlDialog::OnInitDialog();
// 设置此对话框的图标。当应用程序主窗口不是对话框时，框架将自动
// 执行此操作
SetIcon(m_hIcon, TRUE); // 设置大图标
SetIcon(m_hIcon, FALSE); // 设置小图标
EnableAutomation();
SetExternalDispatch(GetIDispatch(TRUE));
// TODO: 在此添加额外的初始化代码
return TRUE; // 除非将焦点设置到控件，否则返回 TRUE
}

5.在HTML代码中调用

[html] view plain copy

<input type="button" onclick="external.DianDian()" value="点我一下,感觉自己萌哒哒" />

6.F5运行,结果看图

咋样？简单吧？不过，MFC，DHTML只能用IE,是本机IE,也就是说如果你的客户机器装的是IE6.......，IE啊.......

2.CEF

这个可是牛逼，其实就是chrome的整体封装，chrome知道吧，webkit内核,全宇宙最快V8引擎。完善的HTML5支持。

从http://www.magpcss.net/cef_downloads/上下载，记得要下载CEF3,CEF1停止更新了。里面有例子，看看就明白。

Webgl测试

Canvas 测试

够屌吧？

开发浏览器绝对没有问

但是看看它的文件结构，以及体积，也够屌的。也就是说，如果要用它开发应用程序，甭管你的程序有多大，这60M的依赖库你是躲不过的，就算不用3D等功能，最小也在40M 以上。

3.太大？换小的，EAWEBKIT

为了做游戏，EA公司使用WEBKIT搞了自己的一套WEBKIT，不说别的，小，真是小呀，编译完才4M，用它开发桌面应用程序没问题

可以去http://gpl.ea.com/下载，虽然开源，不过一点说明都没有，具体要怎么使用只能自己琢磨了

不过有个哥们挺能耐的，愣是用着东西搞出来个浏览器

http://blog.csdn.net/achellies/article/details/6550050

测试一下：访问百度首页

访问JQUERYUI

没样了。

能把30M的WEBKIT缩到4M，当然要干掉很多东西，人家是有针对性的开发，只是为了他的游戏，谁管你的JQUERY.

4.LTFrame

这个是个不大，也不小，尺寸刚刚好的html渲染引擎，基于WEBKIT开发而成，针对于桌面应用程序做了很多的优化。

用它开发出的程序。。。。

LTFRAME是基于原生WEBKIT开发而成的，它最大的改进是对WEBKIT做了较大幅度的修改，使的webkit体积大大的缩小、包括它的依赖库也全部封装在一起，整个LTFRAME只有一个DLL，大约12M,和一个ICU的字符库，大约4M.却实现了WEBKIT的几乎所有功能。

并且LTFRAME对WEBKIT内核所存在的一些BUG和不合理处进行了修正，让它更加适于桌面软件开发。

开发时候，只需简单几句话，就可以创建出一个HTML应用程序，在用几句话就能用C++轻易扩展出一个Javascript方法供前端调用。

不扯淡，直接说正题，LTFRAME官方网站为

http://www.ltplayer.com

进入以后，进入DOWNLOAD，可以下载LTFRAME

用百度下载比较快

再往下是基于LTFRAME开发而成的音乐播放器，可以下载后体验一下LTFRAM的桌面开发方式

下载后，直接解压缩，是一堆实例和实例源码

你可以用VS2008或者更高版本的VS打开、调试这些实例，要是想直接看，就打开那个relelase文件夹，里面是编译好的

关于使用方式，官方有详细的开发说明和函数的说明，打开DOCS就是

打开release文件夹，点击LTFrameExmaple.exe，这是个索引文件，包一所有的实例

贴两个运行实例

用HTML5开发的游戏

离屏渲染

更多的东西，你自己去看吧。我要去准备了，因为下次将用LTFRAME去开发一个实例