基于phoneGap与HTML5的移动应用

基于PhoneGap的HTML5的移动应用8月初，我有幸参加了InfoQ全球开发者大会。在此期间，我倾听了移动互联网专场中各位业界专家的精彩演讲。因为各位专家所在应用领域不同，他们对移动开发是否采用HTML5技术策略不同。这里结合本人的一些项目经验，我认为HTML5决策的因素，大致可以如下考虑：（1）权衡移动APP的交互性要求。（2）业务应用领域，是企业级应用还是面向年轻消费大众的应用。（3）技术成就动机，新技术往往会让人燥动不安，跃跃欲试。（4）企业技术现实情况考量。例如：企业是否能够投入大量的研究成本，现有团队的技术沉垫，跨平台可以节省成本（毕竟现在object-c人员成本高）等。落地是项目最原始的目标，基于以上决策因素考量。这里，本文以选择HTML5进行项目实践为例，最大的优点是跨平台。进行简要阐述。初接触HTML5，往往我们会乐观不已，认为它不所不能。然而技术却存在一些约束，需要引起注意：（1）页面滚动条。利用overflow实现div实现局部滚动条在移动设备不可行，iscroll等开源滚动条出现手机兼容型问题。（2）绝对与相对定位，会造成html5布局兼容型问题。（3）使用一些特效，会导致不可预估的兼容型问题。例如：html5表单元素失效。（4）异常退出。例如：点击输入框，弹出手机软键盘会异常退出。由于上述约束，给开发纯HTML5应用带来极大的难度。HTML开发似乎还依赖浏览器更高的成熟度(想过绑定内置浏览器，重新封装html表单以及特效，开发成本太高，没去实现)。我的想法是：采用Html5混合纯生应用，这种方式减去模拟滚动条等特效带来的负面影响，而尽量使用到浏览器自身的特点。Html5混合纯生应用Html5的优点是跨平台，然而面对移动设备内置的功能如何跨平台的问题，自然想到了PhoneGap(提供了大量可以操作移动设备内置的功能的JSAPI,为在HTML中操作JS提供了跨平台特性1)。鉴于以上考虑，我的混合架构思路是将移动应用布局结构分为标题头、正文、导航。移动应用布局结构（1）标题头。最主要的功能是显示标题以及返回功能。（2）正文。移动浏览器控件，android是WebView，ios是UIWebView。Webview视图原本是一种内置浏览器，上述提到的“页面滚动条”不复存在。而兼容型的问题，只要控制HTML样式写法，经过多平台测试也能降低。（3）导航。以上结构采用原生语言布局实现，标题头、导航与正文之间存在交互，例如：改变标题文字。原生语言中Js与androidjava可以实现，androidios也可以。采用上述混合架构思路后，后续功能开发主要集中在应用实现部分。在正式开发前，还需要还需要考虑正文中的页面架构。页面架构在设计架构后，需要考虑团队如何开发的问题。曾研究senchatouch,发现其功能模块是一系列用js拼装html字符串方式动态加入（没有深究，毕竟senchatouch源代码1://不开源，风险型无法评估）。这种方式让代码阅读变得模糊，毕竟识别Js字符串拼装方式有点不方便，特别是对于很复杂的页面结构。我仍想保持传统开发方式，由团队成员分功能开发html代码，由js动态加入html文件。页面结构如下图，完整的应用界面为一个HTML页面，它除了维持页面样式的基本结构之外，最为主要的是内容div区域，它是动态加载业务功能对应的HTML页面的区域。这些页面，可以选择缓存起来或者重新加载。一般情况上，业务功能上下操作步骤，缓存HTML是值得推荐的。这种思路，仍然可以现在采用MVC的思想进行开发，如下图。AJAX是Js异常的基础，在跨平台html5开发中扮演重要角色（移动终端运行，可直接JSON,无需JSONP格式）。（1）操作触发，调用动态加载html文件的JSAPI，并考虑是否缓存该HTML片段(div片段缓存最简洁，但要记得清除，否则导致DIV累积过多)。（2）HTML文件内容，ajax方式等待装入响应数据，页面显示等待。（3）Ajax向后端服务取回数据，并调用回调js函数向HTML页面文件片段装入响应数据。（4）请求结束，等待提示消失。遇到的问题html文件....html填充数据ajax服务动态加载HTML页面请求Json数据请求以下方案，在开发过程会遇到一些，供参考（1）Android4的版本，对html后？号字符没法识别。（2）Phonegap内部抛出错误，系cordova_x.js中setTimeOut方法调用频繁造成。07-0917:17:49.260:D/dalvikvm(7039):GC_CONCURRENTfreed386K,55%free2647K/5831K,external0K/0K,paused4ms+4ms07-0917:18:19.160:D/dalvikvm(7039):GC_CONCURRENTfreed385K,55%free2646K/5831K,external0K/0K,paused8ms+4ms07-0917:18:50.289:D/dalvikvm(7039):GC_CONCURRENTfreed384K,55%free2647K/5831K,external0K/0K,paused8ms+5ms07-0917:26:06.530:W/dalvikvm(7039):Last10entriesinJNIlocalreferencetable:07-0917:26:06.530:W/dalvikvm(7039):502:0x40573980cls=Ljava/lang/String;(28bytes)07-0917:26:06.530:W/dalvikvm(7039):503:0x405739c8cls=Ljava/lang/String;(28bytes)07-0917:26:06.530:W/dalvikvm(7039):504:0x40573b70cls=Ljava/lang/String;(28bytes)07-0917:26:06.530:W/dalvikvm(7039):505:0x40573ba8cls=Ljava/lang/String;(28bytes)07-0917:26:06.530:W/dalvikvm(7039):506:0x40573bf0cls=Ljava/lang/String;(28bytes)07-0917:26:06.530:W/dalvikvm(7039):507:0x40573d98cls=Ljava/lang/String;(28bytes)07-0917:26:06.530:W/dalvikvm(7039):508:0x40573dd0cls=Ljava/lang/String;(28bytes)07-0917:26:06.530:W/dalvikvm(7039):509:0x40573e18cls=Ljava/lang/String;(28bytes)07-0917:26:06.530:W/dalvikvm(7039):510:0x40573fc0cls=Ljava/lang/String;(28bytes)07-0917:26:06.530:W/dalvikvm(7039):511:0x40573ff8cls=Ljava/lang/String;(28bytes)07-0917:26:06.540:W/dalvikvm(7039):JNIlocalreferencetablesummary(512entries):07-0917:26:06.540:W/dalvikvm(7039):512ofLjava/lang/String;28B(512unique)07-0917:26:06.540:W/dalvikvm(7039):Memoryhelddirectlybytrackedrefsis14336bytes07-0917:26:06.540:E/dalvikvm(7039):FailedaddingtoJNIlocalreftable(has512entries)07-0917:26:06.540:I/dalvikvm(7039):WebViewCoreThreadprio=5tid=9RUNNABLE07-0917:26:06.540:I/dalvikvm(7039):|group=mainsCount=0dsCount=0obj=0x4052cab8self=0x9cad007-0917:26:06.540:I/dalvikvm(7039):|sysTid=7047nice=0sched=0/0cgrp=defaulthandle=62824807-0917:26:06.540:I/dalvikvm(7039):atandroid.webkit.JWebCoreJavaBridge.sharedTimerFired(NativeMethod)07-0917:26:06.540:I/dalvikvm(7039):atandroid.webkit.JWebCoreJavaBridge.fireSharedTimer(JWebCoreJavaBridge.java:91)07-0917:26:06.540:I/dalvikvm(7039):atandroid.webkit.JWebCoreJavaBridge.handleMessage(JWebCoreJavaBridge.java:108)07-0917:26:06.540:I/dalvikvm(7039):atandroid.os.Handler.dispatchMessage(Handler.java:99)07-0917:26:06.540:I/dalvikvm(7039):atandroid.os.Looper.loop(Looper.java:123)07-0917:26:06.540:I/dalvikvm(7039):atandroid.webkit.WebViewCore$WebCoreThread.run(WebViewCore.java:661)07-0917:26:06.540:I/dalvikvm(7039):atjava.lang.Thread.run(Thread.java:1019)07-0917:26:06.540:E/dalvikvm(7039):VMaborting（3）点击输入框，弹出新的页面操作，部分终端会直接crash.原因在于软键盘会弹出。请使用js方式让输入框失去焦点。（4）单选框，下拉选择框有部分终端不可操作。需要检查使用的绝对与相对定位样式，可开发页面元素替换。