Webtop Html5 桌面App开发系列（一）

最新推荐文章于 2024-05-16 16:27:43 发布

weixin_33994444

最新推荐文章于 2024-05-16 16:27:43 发布

阅读量225

点赞数

文章标签： c/c++ javascript git ViewUI

原文链接：https://my.oschina.net/FengJ/blog/86610

版权

为什么80%的码农都做不了架构师？>>>

Webtop——html5桌面app开发引擎。基于webtop，你可以使用html5和css3等新技术构建桌面app，即开发直接运行于windows上的软件，使用透明渲染模式能将网页直接渲染在桌面上，轻松实现透明阴影等特效。

在我上一篇博客中，简单的介绍了Webtop。Webtop是一个开源的项目，目前只有作者Gdy一人在开发维护。它是用c++编写，而我不会c++，我只是一个使用者。所以下面我将一个使用Webtop的开发者来介绍Webtop的api的使用。帮助作者为Webtop做一点推广吧。如果时间允许我也希望学习一下c++，能帮助作者一起来完善api。Webtop还有很大的发展前景，我认为甚至可以印象将来桌面App的模式。毕竟Web开发者要比桌面开发人员要多得多。

目前，我正在使用Webtop开发一个小应用，目前正在仿着Zune做图片管理和音乐播放器功能，音乐播放器中还加入了随便听听功能，歌曲是拿的QQ音乐的。以后还打算加入Outlook的邮件，任务，待办事项，笔记本等功能。如果可能的话可以做成私密分享应用。

开发第一个Webtop应用

首先，我们需要先安装Webtop，在Webtop的官网 http://webtop.alloyteam.com 上面可以直接下载到。也可以通过Git 下载源码，自己用VS2010编译。安装的时候，win7需要已管理员身份运行，有安装杀毒软件的朋友，需要注意会被拦截。安装完以后，可以运行 air brower.exe，作者提供了几个小demo。

为了方便开发，作者提供了Chrome的调试工具和简单的打包工具。也可以通过其他工具来打包。

然后，我们创建一个Web工程，这里你可以使用DW，Aptana或者直接在一个文件中编写文本。我这里是使用的Aptana。

这里我们需要创建一个 .app 的文件，这个文件是我们工程的配置文件。用记事本编写，然后保存为 .app 即可。

[BASE]
url=index.html    //网页地址
width=0           //初始化窗口宽度
height=0          //初始化窗口高度
enableResize=1    //允许改变窗口大小
enableDrag=0      //是否允许全窗口拖拽，仅对透明窗口有效
name=MyApp        //程序名字

相关配置参数的说明在Webtop的官网上面有说明，http://webtop.alloyteam.com/?p=1#more-1 。

然后，我们创建一个Html5的页面，这个页面就是我们软件打开的主页面了。下面是我的页面的部分代码。

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>无标题文档</title>
		<link href="css/css.css" rel="stylesheet" type="text/css">
		<link href="css/themes/gray/easyui.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<div id="app_bg" class="bg"></div>
		<div id="app_win" class="win">
			<div id="app_title" class="title">
				<div id="app_icon"></div>
				<div id="app_name">Rest</div>
				<div id="app_btn">
					<div id="app_close_btn"></div>
					<div id="app_max_btn" class="app_unmax_btn"></div>
					<div id="app_min_btn"></div>
				</div>
			</div>
			<div id="app_main" class="app_main">
				<div class="navigation-bar">
				</div>
				<div id="app_content">
					
				</div>
				<!-- end app_content -->
			</div>
		</div>
		<iframe src="http://qzone-music.qq.com/fcg-bin/fcg_set_musiccookie.fcg?fromtag=31"></iframe>
	</body>
	<script type="text/javascript" src="js/core.js"></script>
</html>

我们还需要一个js文件，来让Webtop渲染我们的这个页面。Webtop提供了一个js对象webtop，让我们在js中调用webtop提供的一些本地App的api。我需要在这个js文件添加一个监听来让Webtop渲染我们的页面。

addEventListener("webtopReady", Rest.init.readyHandler);

这句代码最好写在js文件的最下面，保证js对象都加载完成后。Webtop中自定义了一些事件来对应桌面App的一些事件行为。比如：

■webtopReady事件，webtop对象创建完成之后触发，有关webtop的初始化调用请放在此事件触发之后。 监听代码：addEventListener(“webtopReady”,readyHandler);//其中webtopReady为事件名，readyHandler为事件的回调函数。以下事件的监听方法与此相同。注：对webtopReady事件的监听请放在onload之前。
 ■webtopWindowResize：webtop窗口改变大小之后触发，e.detail的结构如下{width:243,heigh:234}。width和height为窗口的宽度和高度
 ■webtopWindowMove：webtop窗口移动后触发，e.detail结构如下{x:34,y:43}，x和y为窗口的坐标，相对于屏幕
 ■webtopDragDrop：当拖拽文件到窗口时触发，仅在透明渲染模式下有效（因为在此模式下html5的拖拽功能会失效）。e.detail的结构如下{list:["E:/webtop/1.png","E:/webtop/2.png"]}。list为文件列表，存储各个文件的路径
 ■webtopWindowActive：窗口激活时触发
 ■webtopWindowFocus：窗口获得焦点时触发

这里值例举了一部分，更多的可访问Webtop官网。我这里为 webtopReady事件绑定了一个js方法，在这个方法中，我对我的App界面做了一些初始化工作。

readyHandler : function() {
			var screenSize = webtop.getScreenSize();  //获取屏幕大小
			Rest.cfg.width = screenSize.width;
			Rest.cfg.height = screenSize.height;
			webtop.move(0, 0);  // 移动app
			webtop.max();  // app最大化
			Rest.win.max();
			console.log('ready');
			relayoutWin();

			Rest.win.init();   //初始化App界面
			Rest.menubar.init();  //初始化菜单栏
			Rest.girl.init();  // 初始化Girl图片欣赏界面
		}

对App界面的编写，一些功能完全使用Html、css、js去做就好了。我们在页面上面引用这个js。然后我们就可以运行我们编写的App了。这里建议开发的时候直接双击.app来运行，Webtop是支持多实例同时运行的。如果.app不能打开，我们可以手动选择一下打开方式，关联到 air brower.exe。

下面是编写软件的主界面：