Html5 app开发学习笔记.docx

《Html5 app开发学习笔记.docx》由会员分享，可在线阅读，更多相关《Html5 app开发学习笔记.docx（8页珍藏版）》请在三一办公上搜索。

1、Html5 app开发学习笔记Html5 app开发学习笔记 一、序言 过去的几年里，我一直在研究HTML5移动Apps。整体的印象就是HTML5为开发者提供了一个跨平台的移动apps开发方案，并且该方案具有很好的扩展性和灵活性。我始终认为web技术将成为移动设备上的开发平台，只是目前该技术可能尚未成熟。我很担心有些人还没有弄清楚HTML5到底是什么，就盲目地开始在自己的移动设备开发中使用HTML5了。 在过去的一年中，我在努力地改变大家对HTML5的理解，让他们认识到HTML5是一个移动开发平台。 大家都知道HTML5能够做哪些事，但是你又是否知道HTML5是如何做这些事的呢？ 从我使用we

2、b技术开发的第一个移动产品到今天，已经有超过十年的时间了。我见证了移动web发展的整个历史，我曾写过一本关于怎样设计和开发移动web apps的畅销书。 到底应该怎样使用和看待HTML5呢？通过采访许多相关的公司，我们找到了关于这个问题的答案。 可以将这篇文章看做是了解开发跨平台的移动web apps的引导手册。为什么开发一个HTML5移动Apps是一件困难的事情呢？因为通常，开发者需要实现图表中展示的所有部分。即使你不亲自开发它，你也需要借用其他人的设计，并且你还是得对各个部分进行测试和调试。 二、设置服务器 客户端发送请求在移动web设备上查看某个内容。这个请求通常是一个发送到某台服务器上

3、的HTTP请求。通常，会自动生成用户需要的内容。为了将内容加入到app中通常需要至少两件事情：数据以及怎样使数据变得有意义，或者是我们的HTML5 app。 你是否有一个设备检测方案？ 由于各种设备存在很大的差异性，所有在服务器端最好能够有一个设备检测机制。实现这种检测机制的方法是很多的，甚至可以提供设备更多更加详细的信息以及容量性能方面的信息。 程序员可以对所有的设备统一进行处理，这对于简单的应用是可行的。但是对于大多数长久运行的项目来说，这显然是不够的。 针对移动设备处理方法，Scott Gledhill 给出了一些简短的介绍文档Mobile Bits Scott on Mobile De

4、vices Scott on Device Fragmentation 你打算如何处理离线数据 15% 的移动apps启 动时设备是脱机。所以你的应用程序需要处理脱机的情况。最初的程序设计时页面的访问当然是需要通过Internet的，但是如果连接端掉了，你的程序应该 也能够继续正常运行。当设备连接到网络时，应用程序如何处理用户的数据？为了处理脱机访问的情况，是否可以考虑将所有的数据打包返回？ 本文稍后会介绍cache manifest，但是不要指望cache manifest能够解决所有的问题。你还需要调用RESTful API，用来处理数据同步刷回的问题。 三、HTML5 App 现在已经有

5、了处理数据和设备的方法了，接下来就可以开发一个HTML5 App了这是其中最简单的一部分。HTML5是由HTML演化来的，如果你已经知道HTML了，那么你能很快地了解怎样使用HTML5。 为了迅速了解HTML5中引入的新功能，你可以查看下面两个链接。 Mark Pilgrims Dive in HTML5 Scott Gledhills Mobile Bits HTML5加入了许多好用的新功能，但是它并没有从根本上改变大家的编程方式。你可以在HTML5中使用Javascript和CSS3，但是它仍然还是使用标签定义内容的方式编写应用。 cache manifest HTML5最好的功能之一就是

6、提供了cache manifest，可以将它看作是app的一个缓存。cache manifest实际上是一个文本文件，上面罗列了需要在本地缓存的内容。使用该功能，可以方便地将常用的Javascript、CSS和图片文件缓存在 设备的内存中。这样，即使设备处于脱机状态，用户还是能够正常访问应用的界面。 除此以外，使用cache manifest功能还能减少网络连接的请求次数。对于动态数据的缓存处理则需要使用Javascript刷回缓存的数据，而不是cache manifest。 需要指出的是，大多数的apps都需要处理脱机访问的问题。 Marks chapter on offline appli

7、cations介绍了更多缓存的相关问题 你的降级策略是怎样的？ 最后一点，需要指出的是各种设备存在着或多或少的差异。即使你只打算支持某一种平台，在这种平台上的各个设备也不是完全相同的。当应用无法按照预想 的方式呈现时，能够提供一组隔离代码是最好的撤回策略。换句话说，就是要使代码尽量简洁且不依赖某些特殊的边缘技术我们称之为优雅的降级。 HTML5开发的代码最好严格地遵循语法规定。首先不要在代码中加入任何的CSS或Javascript，通常这种形式最简单的代码具有最好的通用性。 Javascript 现在可以介绍其中一个很重要的部分了，Javascript。在几年以前，跨平台的Javascript

8、还没有受到广泛的关注。但就在这几年，Javascript的地位发生了明显的变化。在短短两年的时间里，Javascript已经成为为用户提供数据、逻辑和交互的主要方法了。 而Javascript上的这些转变都是伴随着HTML5的推进而发生的，难怪人们总是将Javascript和HTML5视为一体。换言 之，HTML5上有许多新的功能，但是如果没有Javascript，这些功能也无法应用。你能否找到用户的物理位置？如果有Javascript就可 以。能否离线保存用户数据？有了Javascript就可以。 想想Javascript之前的开发框架： Scriptaculous, Prototype,

9、MooTools和jQuery。我不认为有人是因为喜欢Javascript才采用它的Javascript使用起来并不方便。所有的这些开发框架 确实使得我们的生活变得更加方便，并且改变了Web的面貌，许多开发者如果没有其他这些框架的帮助，根本无法开发出Javascript程序。 移动web apps开发中最困难也是最耗时的工作就是测试。你使用的所有技术必须都是可以被检测的。如果你不了解一个技术的原理，那么你需要耗费大量的时间和精力来解决一个小小的bug。 如果你的应用只是针对某个特定的平台，也许这还可以容忍。但如果应用平台变得复杂起来，开发和测试的工作量将会呈现指数级的增长。 Murphy定律“

10、一个事情只要有可能出错，那么它不久将会出错”是移动web apps开发中唯一的准则。如果你使用了某个技术，那么你需要确保这个技术在你的应用中不会出错。 下面将Javascript分成三个部分分别进行介绍。 混合脚本 混合脚本可以将开发人员编写的核心脚本与设备SDK连接起来。如果你想使用本地封装器将HTML5 app封装起来，那么你需要使用混合脚本。需要针对不同的平台编写不同的混合脚本。 核心脚本 核心脚本是app在所有平台上的通用部分。如果app是通过浏览器访问的，核心脚本也应该使得app看起来像是一个native SDK。你的app需要负责收集和渲染HTML5页面。这个时候使用jQuery这

11、类完整的框架是非常有用的，但是我们建议还是尽量使用微框架。 设备脚本 最后，你需要使用设备脚本模拟本地的行为。 jQTouch是一个很好的例子，它使用jQuery模拟iPhone的本地行为和动作。但是jQTouch无法区分不同设备间的差异，在Android以及其他的移动平台上，它都仍然使用在iOS上采用的方法。这一点受到用户的诟病。因此，需要为不同的设备编写单独的设备脚本。 CSS CSS是app的展示层。CSS的开发更像是设计工作，而不是单纯的技术工作。页面的显示其实是HTML5移动App上最重要的一个部分。 Apple，Nokia，Microsoft等公司都花费了大量的人力物力开发出非常丰

12、富的用户界面，从而省去了程序员的很多工作。但是如果你想要开发一个HTML5移动App，那么你需要自己开发一个用户界面，尽管这是一件很令人头疼的事情。 现在让应用拥有一个良好的用户体验变得越来越重要了。CSS就是用来帮助程序员提升应用的用户体验的。 如果说HTML5 App是一部小轿车的话，那么CSS就是这辆车的外观，颜色，甚至是内部的详细设计装饰。当你坐在车内，你看的的不仅仅是一些布料和皮革。我们更看重的是 设计的细节。方向盘的手感如何，仪表盘的设计是否清晰，音响的立体声效果怎样，所有的这些因素都能影响我们的驾车体验。 Javascript也能影响我们的用户体验，但是它没有那么直接。我们当然需

13、要Javascript，但正如 Top Gear所说的好的引擎并不等于好的驾车体验。 只有让性能和外观和谐统一起来，才能给用户最好的体验。 我曾和jQTouch、Sencha Touch和jQuery Mobile的爱好者交流过，我向他们询问了他们设计应用界面的方法，回答无非是使用 “Device Theme”这类网页风格，他们用 “Device Theme”模拟iOS的界面风格，再加上几行Javascript代码。很少有人考虑使用CSS模拟其他设备的界面风格(Android上的CSS模板)。 有时候，开发者需要设计一个不同于其他app的应用，想要摆脱传统的设计风格，使用自己的页面风格。那么你

14、可以考虑使用CSS为你的app设计一个全新的界面风格： 设备主题 这是开发者用来模拟设备风格的CSS代码。它是用户惯用的语言，普通用户看到这些语言后，能够直接开始执行想要处理的任务，而不用花费时间去学习你 的界面。据不完全统计，每个平台上有将近100个独立的界面组件。我不推荐开发者自己设计一种新的组件，除非你清楚的知道自己在做什么。 Sencha Touch，jQuery Mobile和其他的工具都是用来帮你完成这项工作的，但是这也难免使得你的app看起来和这些平台很像，而没有了自己的风格。但是，使用这些工具可以帮助你开发自己的风格。 核心主题 核心主题是应用程序中可以重复利用的部分那些你需要

15、使用，但不一定会显示在界面的上的内容。我习惯将各种部件单独表示，这样就能将这些部件作为我的核心主题。这些主题在不同的平台上都是一样的。比如，你的logo在所有的平台上都是一样的。你的工具栏的 颜色总是保持一样的风格。这些组件都可以定义为你的核心主题。当你在不同的设备上使用这些核心主题时，只需要修改相应的设备主题即可。 App主题 App主题是专属于某个App的风格组件。许多项目诣在将这些组件整合到一个样式表中。但是我建议，还是将你的核心主题和App主题区分开来。这对于debug有很大的帮助。 四、总结 HTML5能否满足你的要求？回答是肯定的。HTML5能够完成你的要求吗？答案也是肯定的，不过 可能需要耐心等待。这个项目可能比以往你碰到的其他项目需要更久的时间 合理的预算。这不是一个网站，可能会花费你较多的预算 确保你有合适的人才。如果你认识到世界上最有经验的专家都在对此苦苦探索，那就不难想象，你的开发过程也不会太轻松 现在还没有所谓的合适工具，更多的时候，你得自己开发需要的工具 仔细考虑你的每一个选择,在移动开发领域没有绝对的对与错,要保持开放性，关注客户的需求