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 桌面类程序几个必须关注的细节的更多相关文章

  1. Electron与WEB桌面应用程序开发及其它

    这几天在构思项目,研究了一下Electron,记录下来. 说起WEB桌面程序,当前最火的就是Electron了. Electron的架构用一句话总结,就是一个main.js进程加上一个或数个chrom ...

  2. QtSoap开发web services客户端程序

        首先需要下载QtSoap开源包,下载地址为: http://www.filestube.com/q/qtsoap+download, 我使用的是:qtsoap-2.6-opensource(不 ...

  3. Web桌面应用框架3:Web桌面应用开发的N种Style

    研究Web桌面应用开发有一段时间了,总结了Web桌面应用开发的一些主流方式. 一.前端Style 这种方式的就是直接实现一个Web程序,再封装一个浏览器展示,相当粗暴和有效.著名的框架就是Electr ...

  4. Web桌面应用框架2:著名的WEB桌面应用分析

    前一篇文章里,分析了包括NW.js和electron这种纯JS框架在内的几种Web桌面应用开发方式,实际上还有一种最古老的方式,那就是嵌入WebView的方式. 嵌入WebView的方式和整个程序都是 ...

  5. Spring Boot 2.x基础教程:使用 Thymeleaf开发Web页面

    通过本系列教程的前几章内容(API开发.数据访问).我们已经具备完成一个涵盖数据存储.提供HTTP接口的完整后端服务了.依托这些技能,我们已经可以配合前端开发人员,一起来完成一些前后端分离的Web项目 ...

  6. PHP-GTK 扩展(用PHP编写桌面应用程序)

    PHP能做什么? PHP-GTK (构建桌面应用程序在PHP中使用PHP-GTK) 普及一下知识php如何做桌面客户端 [PHP技术]PHP开发Windows桌面应用程序实例 实战PHP/GTK 哪位 ...

  7. 用Delphi7开发Web Service程序 转

        转:http://rosehacker.blog.51cto.com/2528968/450160 用Delphi7开发Web Service程序,并把服务程序放在IIS Web服务器上提供给 ...

  8. android widget 开发实例 : 桌面便签程序的实现具体解释和源代码 (上)

    如有错漏请不吝拍砖指正,转载请注明出处,很感谢 桌面便签软件是android上经常使用软件的一种,比方比較早的Sticky Note,就曾很流行, Sticky Note的介绍能够參见 http:// ...

  9. Visual Studio 2012 开发环境配置+控制台工具+桌面应用程序

    一.界面布局视图设置 1.窗口的布局.控制台窗口运行恢复到开发环境的设置方法 也可以保存好设好的个性化设置,导入设置: 2.视图|服务器资源管理器(sever explorer) 可以访问数据源.服务 ...

随机推荐

  1. leancloud 用户登录(调用API) 教程

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; ...

  2. HTML5横竖屏提示

    HTML代码: <div class="screen-prompt"></div> CSS判断代码: /*横竖屏提示*/ @media screen and ...

  3. KlayGE 4.4中渲染的改进(五):OpenGL 4.4和OpenGLES 3

    转载请注明出处为KlayGE游戏引擎,本文的永久链接为http://www.klayge.org/?p=2796 上一篇我们提到了SSSSS,作为本系列的最后一篇,本文将介绍KlayGE 4.4的Op ...

  4. IO流-文件管理

    File f = new File(“test.txt”); File的构造器不会在文件不存在的情况下新建一个文件,从File对象中创建文件是由文件流的构造器或File类的createNewFile方 ...

  5. Fiddler的学习

    以下内容转自:http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html 仅为查找方便而复制~~ Fiddler是最强大最好用的We ...

  6. LESS-Middleware:Node.js 和 LESS 的完美搭配

    LESS 是一个编写 CSS 的很好的方式 ,让你可以使用变量,嵌套规则,混入以及其它许多有用的功能,它可以帮助您更好地组织你的 CSS 代码. 最近我一直在研究 Node.js ,并想用 less- ...

  7. SQL Server代理(5/12):理解SQL代理错误日志

    SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 如我们在这个系列的前几篇文章所见,SQL ...

  8. Windows Server 2012安装时所需要的KEY

    Windows Server 2012不像Server 2008和2008 R2那样可以先装系统再输入序列号,而是在一开始就必须输入Server 2012 cdkey,目前在网上找到两枚序列号,标准版 ...

  9. JS魔法堂:LINK元素深入详解

    一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...

  10. Insert Plain Text and Images into RichTextBox at Runtime

    Insert Plain Text and Images into RichTextBox at Runtime' https://www.codeproject.com/Articles/4544/ ...