基于混合模式的移动应用开发

基于混合模式的移动应用开发作者张宝玉12原生、Web、混合的选择混合模式的实现目录3开发实践移动开发的困惑移动互联网技术不断发展企业需要选择一个为将来而使用的能够满足多种不同层面需求的移动开发模式原生开发模式JavaObjective-C.NetFrameworkAndroidSDKiosSDKSilverlight/MetroEclipsexCodeVisualStudio语言开发包开发工具AndroidiosWindowsPhone平台安装包格式应用商店.sdk.ipa.xapAndroidMarketAppStoreWPMarket原生模式原生开发模式的优劣APP移动Web开发模式WebApplicationApp：应用程序完成某项或者几项任务满足某些需求Web：构建于Web技术之上HTML/CSS/JS服务端WAP浏览器(2006-)牺牲浏览体验的浏览器Android浏览器(2009-)iPhone浏览器(2007-)移动APP移动Web开发模式优势移动Web开发模式的优势学习成本低、易于上手轻量级应用突破渠道限制(AppStore)跨平台，比原生更易于适配和浏览器轻耦合，应用快速发布移动Web开发模式的劣势•性能低•功能不能完全满足，用户体验不好•缺乏设备访问能力性功能Hybird(混合应用)模式HybridApp同时使用网页语言与程序语言开发，通过应用商店区分移动操作系统分发，用户需要安装使用的移动应用。Hybird模式架构移动应用分类就是所谓的原生应用.指的是用平台特定的开发语言所开发的应用主要是采用统一的标准的HTML,JavaScript.CSS等web技术开发.通过不同平台的浏览器访问来实现跨平台.为了弥补如上两者开发模式的缺陷的产物.可以安装，使用web开发两种模式(Native主体型/web主体型)NativeAPPHybirdAPPWebAPP为什么使用Hybird为什么使用Hybird-跨平台性和设备访问能力分析为什么使用Hybird-用户体验和开发成本分析MobileWebsiteWebAppHybirdAppNativeApp用户体验开发成本和时间为什么使用Hybird-总结特性NativeAppWebAppHybirdApp开发语言原生语言Objective-C、Java、.net网页语言HTML5+JS+CSS3网页或原生语言跨平台性低高高设备访问能力高低高开发难度高低低高级图形高中中应用体验好差较好安装体验高从应用商店安装中通过移动浏览器安装高从应用商店安装升级灵活性低总通过应用商店升级高中常通过应用商店升级向后兼容差好好12原生、Web、混合的选择混合模式的实现目录3开发实践常见JS库或框架phoneGapTitaniumAppCanMonoTouch(.net-iphone)MobileNation(在线、拖拽)AppMakr(在线)foneFrame(移动网页)还有一大堆…Magmito(基于模板)appMobiXDK(云定制)Widgetbox(在线RSS)DragoRAD(企业级)jQuerymobileSenchaTouchjQTouchRexsee(支持Android，在线打包)WorkLightJQ.MobiZeptoJQueryUIJOUI框架对比及选择轻量级；jQuery开发人员上手快；跨平台兼容性好有不同主题，可定制性好；基于webkit浏览器进行了优化，对IOS和Android设备支持好重量级，功能丰富；学习难度高(有EXT开发经验者除外)；免费许可，收费支持($13955DeveloperSupport)PhoneGap简介PhoneGap是一个开源的开发框架，使用HTML，CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利用iPhone，Android，Palm，Symbian，Blackberry，WindowsPhone和Beda智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap云编译服务,除了在本地编译应用之外，还可以使用Phonegap提供的云端Build工具进行应用编译。那就是：PhonegapBuild，通过它，您只需要将用HTML5写好的应用上传到PhoneGap的云端服务器，它即可以帮你编译成不同平台的应用。AppCan简介AppCan移动快速开发平台是基于HTML5技术的跨平台快速开发解决方案。开发者利用HTML5+CSS3+JavaScript技术可以快速的开发与本地应用相媲美的应用。AppCan平台提供了UI快速开发框架、手机本地功能调用Api接口、AppCan应用打包系统、AppCan集成开发IDE环境和AppCan模拟器。完善的框架接口，强大的服务支持，使开发者可以快速的进入移动开发领域。WrokLight简介WrokLigth是IBM2012年2月份收购的以色列一家创业公司的产品，Worklight平台为开发基于Web技术的手机客户端提供了一套完整的解决方案，从开发、部署、测试到发布均可在这个平台上完成。Worklight是一个用于开发管理企业App的平台。App用HTML，CSS和Javascript写成，之后被扩展成桌面的（Windows，Mac，Linux），互联网的（Facebook等），本地移动设备上的（iOS，Android，RIM和WindowsPhone）应用程序。开发者还能把一些流行的Javascript构架如jQueryMobile，Sencha和Dojo整合到Worklight中。而且App的本地运行时也能用本地代码来编写和修改。Worklight为企业提供了众多的功能，例如开发环境，后端集成，PlusDeployment，运行时和App生命周期管理，也包括分析和资源调配功能。这个平台有一个只可供评估使用的免费版本。Hybird框架对比对比项PhoneGapAppCanWorkLight整体性能表现•启动慢•页面切换响应较快•ios上性能较好•启动速度快•页面切换相应速度不错•数据请求较快前端整体性能与所用到的UI框架有关，后端性能较好多窗口支持与动画支持支持多窗口及native平台自身的窗口间动画支持各种动画，支持效果与前端UI框架有关NativeUI支持支持，开发者自己打补丁支持并且有系统的NativeUI扩展具备本地访问能力UI对本地的访问使用PhoneGap技术API接口本地化接口丰富,支持可扩展（非常有利于定制功能）本地化接口丰富,官方提供了很多第三方插件有完全的本地API访问接口开发环境无标准的IDE及模拟器,不同平台的开发要求安装不同的开发环境，模拟器androidSDK一套完整的开发环境,IDE为标准的Eclipe插件,支持智能提醒,自动补齐,代码自动生成,模拟器为标准的Chrome扩展插件,支持单步调试,Log输出等基于Eclipse前后端开发工具基于浏览器的仿真器(调试、测试)Hybird框架对比对比项PhoneGapAppCanWorkLight文档说明及技术支持中文文档较详细，正在逐渐丰富中•文档相对详细•国内团队支持；•官方论坛提供解决渠道；大多是英文,有部分中文,有视频,有IBM售后支持开源及收费•开源•免费•不开源•免费•有开发者版与商业版，不开源；•开发者版免费，能做一些要求不高的普通应用；•商业版收费，其包含了一套移动应用的解决方案；学习成本掌握WebApp开发掌握AppCan自带的UI框架（是JqueryMoblie的封装）•掌握WL开发框架；•掌握WL的API；•掌握一门前端开发框架（JqueryMoblie、Sencha、Dojo)Hybird框架选型结论•框架较成熟•可利用成熟的JS框架•易用，学习成本低，资料丰富•免费需要掌握的内容表单元素Html5新特性选择器视觉效果变换和动画12原生、Web、混合的选择混合模式的实现目录3开发实践开发实践搭建环境创建Android项目建立目录拷贝文件设定cordova.jar修改代码修改AndroidManifest.xml加入index.html123456789App从这里开始10搭配JQuery11使用AJAX模拟登录使用PhoneGapAPI演示1213开发实践官网下载：（开发包）开发平台：安装AndroidSDK：选择您使用的开发平台（一）搭建开发环境开发实践创建一个Android项目（二）创建Android项目开发实践创建存放HTML页面及相关web资源的文件夹创建存放jar包的文件夹（三）建立项目目录开发实践从phoneGap包中拷贝相应的文件到项目中（四）拷贝文件开发实践配置引用jar包路径（五）设定cordova.jar开发实践引入PhoneGap包配置html入口页面（六）修改代码开发实践修改AndroidManifest.xml文件中的安全访问控制（七）修改AndroidManifest.xml开发实践加入index.html主页面（八）加入index.html开发实践运行后出现的helloworld（九）App从这里开始开发实践（十）在html页面中引入Jquery库开发实践（十一）使用AJAX模拟登录1.编写index.html页面中loginPagedivid=loginPagedata-role=pagestyle=background-image:url(image/login_bg.png);background-size:100%100%;width:100%;height:100%;background-repeat:no-repeat;divdata-role=contentclass=login_bgdivstyle=margin-top:220PX;divstyle=margin:20PX;inputid=userIdvalue=feiystyle=height:30px;type=textplaceholder=账号/divdivstyle=margin:20PX;inputstyle=margin-top:30px;height:30px;id=passwordvalue=123type=passwordplaceholder=密码/divdivdivstyle=width:100%;margin-left:0px;divstyle=width:50%;height:40px;float:left;imgid=remenber_pwdonclick=changeImage();alt=src=image/select_succ.pngalign=absmiddlestyle=width:20%;margin-top:0px;margin-left:20%;line-height:40px;spanstyle=color:#fff;line-height:40px;记住密码/span/divdivstyle=width:40%;height:40px;margin-left:53%;aid=butlogindata-role=buttonstyle=border:1px;border-radius:10px;background-color:#ccc;margin-top:30px;font-size:17px;height:40px;登陆/a/div/div/div/div/div/div2.编写login.Js文件functionlogin(){varuserId=$('#userId').val();varpassword=$('#password').val();if($.trim(userId)==){//phonegap封装后的alertnavigator.notificati