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. Java编程思想(Chapter2、4、6)

    一切皆对象 用引用操纵对象 Java中操纵的标识符实际上是对象的“引用”.例如想要操纵一个字符串,则可以创建一个String引用. String s; 此处s只是一个引用. 存储位置 基本类型/对象的 ...

  2. Render OpenCascade Geometry Surfaces in OpenSceneGraph

    在OpenSceneGraph中绘制OpenCascade的曲面 Render OpenCascade Geometry Surfaces in OpenSceneGraph eryar@163.co ...

  3. OpenCascade Shape Representation in OpenSceneGraph

    OpenCascade Shape Representation in OpenSceneGraph eryar@163.com 摘要Abstract:本文通过程序实例,将OpenCascade中的拓 ...

  4. javascript中数组的22种方法

    × 目录 [1]对象继承 [2]数组转换 [3]栈和队列[4]数组排序[5]数组拼接[6]创建数组[7]数组删改[8]数组位置[9]数组归并[10]数组迭代[11]总结 前面的话 数组总共有22种方法 ...

  5. IE浏览器下常见的CSS兼容问题

    目录 [1]宽高bug [2]边框bug [3]盒模型bug[4]列表项bug [5]浮动bug [6]定位bug [7]表单bug 宽高bug [1]IE6-浏览器下子元素能撑开父级设置好的宽高 & ...

  6. Java多线程系列--“基础篇”03之 Thread中start()和run()的区别

    概要 Thread类包含start()和run()方法,它们的区别是什么?本章将对此作出解答.本章内容包括:start() 和 run()的区别说明start() 和 run()的区别示例start( ...

  7. 云计算之路-阿里云上:结合IIS日志分析“黑色30秒”问题

    在昨天针对“黑色30秒”问题的分析中,我们猜测Requests Queued上升是由于正在处理的请求出不去(到达不了客户端).今天我们结合IIS日志验证这个猜测. IIS日志中有一个重要的指标——ti ...

  8. Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?

    上一篇我们学习了如何写一个Andorid下自动更新的插件,我想还有一部分看本系列blog的开发人员希望学习在iOS下如何做插件的吧,那么今天你就可以来看看这篇文字了. 本次练习你能学到的 学习如何获取 ...

  9. 基于HT for Web的3D呈现A* Search Algorithm

    最近搞个游戏遇到最短路径的常规游戏问题,正巧看到老同事写的3D机房最短路径巡线文章,一时起兴基于HT for Web写了个A*算法的WebGL 3D呈现,算法基于开源 https://github.c ...

  10. Vue2.0流式渲染中文乱码问题

    在参照vue2.0中文官方文档学习服务端渲染之流式渲染时,因为响应头默认编码类型为GBK,而文件为UFT-8类型,所以出现了中文乱码问题. 解决办法:设置响应头编码类型即可 response.setH ...