开发 web 桌面类程序几个必须关注的细节
HoorayOS 写了差不多快2年了,在我的坚持下也有一部分人打算着手自己也写套类似的程序,我想我可以提供一点经验。
俗话说细节决定成败,开发2年多来,我看过大大小小类似的程序不下20个,各有优点也各有缺点。或许是处女座的强迫症导致我不能容忍这些缺点在我的程序上出现,所以一直完善至今。
以下是我初步整理的几处容易被忽视的细节:
一、当浏览器改变大小时,桌面图标无法重新排序
这个细节相对比较容易被注意,不细说。
反面教材:http://www.cdesk.org/demo/demo.html
二、当浏览器改变大小时,打开的窗口无法重新定位
这个问题会导致你的窗口可能在显示区域之外,无法进行任何操作,虽然你可以将浏览器恢复原先大小,将窗口拖动到适合位置,再改变浏览器大小。
反面教材:http://www.muzilei.com/demo/desktop3.0/index.html
同样问题还出现在挂件上,如 Q+web 就有这问题
反面教材:http://web2.qq.com/webqq.html
三、通过鼠标划取,可以选中文字

如上图,就是这种问题,简单测试方法可以按下 CTRL + A。反面教材:http://www.cdesk.org/demo/demo.html
四、当桌面图标过多时,超出置顶显示区域,被隐藏在外的图标无法进行操作


当你解决第一个问题的时候,立马就会碰到这个极端的情况,你可以强制把浏览器缩小到一个极小的窗口测试。
解决办法就是增加一个滚动条,或者模拟一个滚动条。反面教材:http://www.a-jie.com/webdesk/default.stm
五、无法通过点击窗口内部区域进行多个窗口间的置顶切换
你可以在电脑上开2个窗口,比如2个文件夹,将其重叠,边角有覆盖即可,然后分别点击窗口内部(非标题部分),你会发现你点击哪个窗口,哪个窗口就会被置顶到最上面。
而在 web 端实现这个问题需要一点技巧,因为大部分窗口里都是放个了 iframe,而 iframe 又是无法获取到点击事件的,解决办法就是当窗口处于非置顶时,在iframe上覆盖一个透明的遮罩层,然后给这个遮罩层绑定点击事件,用来处理置顶效果。
反面教材:http://32100.net
六、flash 应用遮罩层无法将其遮罩
这个问题是随着上一个问题出现的,如果 iframe 里加载的是一个 flash 程序,因为是第三方的网站,如果没有做过处理,flash 可能会一直置顶,即使有遮罩层也无法将其覆盖。
对于这个问题,技术上无法判断出 iframe 里是有有 flash,所以只能人为操作。HoorayOS 的做法是在创建应用的时候需要选择是否为 flash 应用这一选项,如果选是,则当窗口不处于置顶时,将 iframe 直接隐藏,或者直接移出浏览器外面,如设置 left:-9999px
七、拖动对象时,没有阻止默认动作,导致拖动出新窗口
这问题一般容易出现上图标拖动上,文字链接也会出现这问题。解决办法很简单,就是用 preventDefault() 方法。
反面教材:http://www.a-jie.com/webdesk/default.stm (你可以按住开始按钮,拖动一下然后放开左键)
八、让我想一想,就先到这吧
本文仅做为技术交流,以上出现的反面教材链接,如有冒犯,还请见谅。
开发 web 桌面类程序几个必须关注的细节的更多相关文章
- Electron与WEB桌面应用程序开发及其它
这几天在构思项目,研究了一下Electron,记录下来. 说起WEB桌面程序,当前最火的就是Electron了. Electron的架构用一句话总结,就是一个main.js进程加上一个或数个chrom ...
- QtSoap开发web services客户端程序
首先需要下载QtSoap开源包,下载地址为: http://www.filestube.com/q/qtsoap+download, 我使用的是:qtsoap-2.6-opensource(不 ...
- Web桌面应用框架3:Web桌面应用开发的N种Style
研究Web桌面应用开发有一段时间了,总结了Web桌面应用开发的一些主流方式. 一.前端Style 这种方式的就是直接实现一个Web程序,再封装一个浏览器展示,相当粗暴和有效.著名的框架就是Electr ...
- Web桌面应用框架2:著名的WEB桌面应用分析
前一篇文章里,分析了包括NW.js和electron这种纯JS框架在内的几种Web桌面应用开发方式,实际上还有一种最古老的方式,那就是嵌入WebView的方式. 嵌入WebView的方式和整个程序都是 ...
- Spring Boot 2.x基础教程:使用 Thymeleaf开发Web页面
通过本系列教程的前几章内容(API开发.数据访问).我们已经具备完成一个涵盖数据存储.提供HTTP接口的完整后端服务了.依托这些技能,我们已经可以配合前端开发人员,一起来完成一些前后端分离的Web项目 ...
- PHP-GTK 扩展(用PHP编写桌面应用程序)
PHP能做什么? PHP-GTK (构建桌面应用程序在PHP中使用PHP-GTK) 普及一下知识php如何做桌面客户端 [PHP技术]PHP开发Windows桌面应用程序实例 实战PHP/GTK 哪位 ...
- 用Delphi7开发Web Service程序 转
转:http://rosehacker.blog.51cto.com/2528968/450160 用Delphi7开发Web Service程序,并把服务程序放在IIS Web服务器上提供给 ...
- android widget 开发实例 : 桌面便签程序的实现具体解释和源代码 (上)
如有错漏请不吝拍砖指正,转载请注明出处,很感谢 桌面便签软件是android上经常使用软件的一种,比方比較早的Sticky Note,就曾很流行, Sticky Note的介绍能够參见 http:// ...
- Visual Studio 2012 开发环境配置+控制台工具+桌面应用程序
一.界面布局视图设置 1.窗口的布局.控制台窗口运行恢复到开发环境的设置方法 也可以保存好设好的个性化设置,导入设置: 2.视图|服务器资源管理器(sever explorer) 可以访问数据源.服务 ...
随机推荐
- Spring.NET的AOP怎么玩
之前公司一直不让使用第三方组件,因此AOP方面的组建一直不能使用,很多面向切面的应用只能通过自己写一些GenericMethod的泛型方法来解决,有一些呆板.由于公司已经开始全面转Java,因此架构组 ...
- C# yeild使用
C# yeild的两种形式的yield语句: yield return <expression>; yield break; 使用 yield return 语句每一次返回每个元素. 将使 ...
- Uvaoj10054 - The Necklace
/* 题意:打印欧拉回路! 思路:开始时不明白,dfs为什么是后序遍历? 因为欧拉回路本身是一条回路,那么我们在dfs时,可能存在提前找到回路,这条回路可能不是欧拉回路, 因为没有遍历完成所有的边!如 ...
- JavaScript中,提取子字符串方法:Slice、Substring、Substr的比较。
在JavaScript中,提取子字符串主要是通过 Slice.Substring.Substr 三个方法之一. // slice // 语法: string.slice(beginSlice [, e ...
- RPC原理详解
RPC 功能目标 RPC 的主要功能目标是让构建分布式计算(应用)更容易,在提供强大的远程调用能力时不损失本地调用的语义简洁性. 为实现该目标,RPC 框架需提供一种透明调用机制让使用者不必显式的区分 ...
- Visual Studio远程调试监视器(MSVSMON.EXE)的32位版本不能用于调试64位进程或64位转储
在VS2013中调试Silverlight项目时,提示:无法附加.Visual Studio远程调试监视器(MSVSMON.EXE)的32位版本不能用于调试64位进程或64位转储.请改用64位版本. ...
- 第22/24周 等待和I/O延迟统计
大家好,欢迎回到性能调优培训的第22周.上周我谈了SQL Server里的基线,今天我们继续,谈下SQL Server里的等待和I/O延迟统计.当我进行SQL服务器健康检查时,我总会使用这2个维度全局 ...
- JPG渐进 & PNG/PNG24 交错测试
今天由同事说起,PS导出PNG时,有个选项"交错"是干啥的,想起这也是个问题,所以特意搞了个测试页面: 引用网上"交错-就是类似旧式电视的隔行扫描,让图片只花50%的时间 ...
- postgres中的视图和物化视图
视图和物化视图区别 postgres中的视图和mysql中的视图是一样的,在查询的时候进行扫描子表的操作,而物化视图则是实实在在地将数据存成一张表.说说版本,物化视图是在9.3 之后才有的逻辑. 比较 ...
- 使用WebKit.net加载HTML编辑器
关于webkit.net使用请看这里http://www.cnblogs.com/linyijia/p/4045333.html nicedit编辑器请到这里下载http://www.nicedit. ...