HTML5及混合开发技术研究

1、HTML5 与与 混合开发技术研究混合开发技术研究计算机161龚磊目录目录1.混合开发概述2.Web App Hybrid App 与Native App介绍与优缺点分析3.Web App Hybrid App 与Native App比较4.Hybrid App的类型与比较5.Hybrid App开发关键与技术问题6.Hybrid App不足与展望混合开发概述混合开发概述所谓混合式开发,即目前业内所说的Hybrid开发模式。混合主要是指的原生App开发与web开发的混合。其实在H5兴盛之前,Hybrid模式就已经比较成熟了,但是一直不愠不火(因为系统的一些问题以及html本身功能限制)。但是自

2、从H5兴盛之后,大家发现原来很多功能都可以用web来实现,然后原生作为容器显示,所以为了提高开发效率,越来越多的人使用Hybrid模式进行开发,越来越多的Hybrid开发框架,越来越多的前端专职成为Hybrid开发,也就是说Hybrid也随之兴盛起来了web Appweb App介绍介绍1 1web App指的是移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指 SPA(Single Page Application)模式开发出的网站。一般来说，拥有下面特点的就是一个Web App了：使用手机浏览器进行运行；纯Web前端架构，不需要安装，很多重要手机特性无法访问，例如联系

3、人名单等。web Appweb App介绍介绍2:2:优势优势1.开发成本低,可以跨平台,调试方便：web app一般只需要一个团队的前端人员开发出一套代码,然后即可应用于各大主流浏览器(特殊情况可以代码进行下兼容),没有新的学习成本,而且可以直接在浏览器中调试2.维护成本低:同上,如果代码合理,只需要一个团队的前端人员就可以维护多个web app。3.更新最为快速：由于web app资源是直接部署在服务器端的,所以只需要替换服务器端的文件,用户访问是就已经更新了(当然需要解决一些缓存问题)。4.无需安装App：不会占用手机内存通过浏览器即可访问,无需安装,用户就会比较愿意去用web Appw

4、eb App介绍介绍3 3：不足：不足1.性能低,用户体验差：由于是直接通过的浏览器访问,所以无法使用原生的API,操作体验不好2.依赖于网络,页面访问速度慢,耗费流量多：Web App每次访问都需要去服务端加载资源访问,所以必须依赖于网络,而且网速慢时访问速度很不理想,特别是在移动端,如果网站优化不好会无故消耗大量流量3.功能受限,大量功能无法实现：只能使用Html5的一些特殊api,无法调用原生API,所以很多功能存在无法实现。4.临时性入口,用户留存率低：这既是它的优点,也是缺点,优点是无需安装,确定是用完后有时候很难再找到,或者说很难专门为某个web app留存一个入口,导致用户很难再

5、次使用Native AppNative App介绍介绍1 1Native App指的是传统的原生APP开发模式。Android App开发是基于Android操作系统，使用Java语言,底层调用的是Google的 API;iOS开发是基于IOS操作系统，使用OC或者Swift语言,底层调用的是苹果官方提供的API。Native App 介绍2：优势1.直接依托于操作系统,交互性最强,性能最好：相比于其它模式的交互,原生APP体验是最优的2.功能最为强大,特别是在与系统交互中,几乎所有功能都能实现：得益于原生是直接依托于系统的,所以可以直接调用官方提供的api,功能最为全面(比如本地资源操作,通

6、知,动画等)Native App Native App 介绍介绍3 3：不足：不足1.开发成本高,无法跨平台不同平台Android和iOS上都要各自独立开发：Android上基于Java开发,iOS上基于OC或Swift开发,相互之间独立,必须要有各自的开发人员2.门槛较高,原生人员有一定的入门门槛:原生的一个很大特点就是独立,需要分别学习Android开发与IOS开发技术，所以一般都要有两个团队才能完成两个平台的Native App开发。3.更新缓慢,特别是发布应用商店后,需要等到审核周期：原生应用更新是一个很大的问题,Android中还能直接下载整包APK进行更新,但是iOS中,如果是发布

7、AppStore,必须通过AppStore地址更新,而每次更新都需要审核,所以无法达到及时更新。4.维护成本高：同开发一样,项目上线后维护起来也很为麻烦Hybrid AppHybrid App介绍介绍1 1Hybrid是半Native半web开发模式Hybrid模式中,底层功能API均由原生容器通过某种方式提供,然后业务逻辑由H5页面完成,最终原生容器加载H5页面,完成整个App。也就是说Hybrid App是一种Native App与web App混合的开发模式。Hybrid AppHybrid App介绍介绍2 2成熟的Hybrid模式意味着业务逻辑均由H5实现一款成熟的Hybrid框架,

8、意味着各种类型的api都很完善,那么这时候几乎所有与业务相关的逻辑都是放在H5页面中的,原生只作为容器存在。成熟的Hybrid模式可复用性非常高,可以跨平台开发成熟的Hybrid框架,那么原生只会提供底层API,也就是说所有的业务是H5完成,不管是什么项目,业务只由H5实现,这时候就可以发现,业务代码是可以跨平台的,也就是说,开发一次,就可以和各自原生容器结合,组成两种原生安装包了,达到了跨平台开发效果。Hybrid AppHybrid App介绍介绍3 3：优势：优势1 11.开发成本较低,可以跨平台,调试方便：Hybrid模式下,由原生提供统一的API给JS调用,实际的主要逻辑有Html和

9、JS来完成,而由于最终是放在webview中显示的,所以只需要写一套代码即可,达到跨平台效果,另外也可以直接在浏览器中调试,很为方便。最重要的是只需要一个前端人员稍微学习下JS api的调用即可,无需两个独立团队的原生开发人员。一般Hybrid中的跨平台最少可以跨三个平台:Android App,iOS App,普通webkit浏览器2.维护成本低,功能可复用：同上,如果代码合理,只需要一个团队的前端就可以维护多个app,而且很多功能还可以互相复用Hybrid AppHybrid App介绍介绍3 3：优势：优势2 23.更新较为自由：虽然没有web app更新那么快速,但是Hybrid中也可

10、以通过原生提供api,进行资源主动下载,达到只更新资源文件,不更新apk(ipa)的效果。2.针对新手友好,学习成本较低这种开发模式下,只需要前端人员关注一些原生提供的API,具体的实现无需关心,没有新的学习内容,只需要前端人员即可开发。3.功能更加完善,性能和体验要比起web app好太多：因为可以调用原生api,所以很多功能只要原生提供出就可以实现,另外性能也比较接近原生了4.部分性能要求的页面可用原生实现：这应该是Hybrid模式的最多一个好处了,因为这种模式是原生混合web,所以我们完全可以将交互强,性能要求高的页面用原生写,然后一些其它页面用JS写,嵌入webview中,达到最佳体验

11、。比比 较较Hybrid AppNativeWeb优点成本低维护简单体验差灵活跨平台功能强性能强快速的更新稳定.高成本开发周期长体验好不跨平台维护成本高.Hybrid App 类型多View混合型单View混合型Web主体型多多ViewView混合型混合型即Native View和Web View独立展示，交替出现。目前常见的Hybrid App是Native View与WebView交替的场景出现。这种应用混合逻辑相对简单。即在需要的时候，将WebView当成一个独立的View（Activity）运行起来，在WebView内完成相关的展示操作。这种移动应用主体通常是Native App，We

12、b技术只是起到补充作用。开发难度和Native App基本相当。单单ViewView混合型混合型即在同一个View内，同时包括Native View和Web View。互相之间是覆盖（层叠）的关系。这种Hybrid App的开发成本较高，开发难度较大，但是体验较好。如百度搜索为代表的单View混合型移动应用，既可以实现充分的灵活性，又能实现较好的用户体验。WebWeb主体型主体型即移动应用的主体是Web View，主要以网页语言编写，穿插Native功能的Hybrid App开发类型。这种类型开发的移动应用体验相对而言存在缺陷，但整体开发难度大幅降低，并且基本可以实现跨平台。Web主体型的移动

13、应用用户体验的好坏，主要取决于底层中间件的交互与跨平台的能力。三种类型比较三种类型比较Hybrid App Hybrid App 开发关键开发关键涉及到混合开发，那么在原有技术的基础上，两种技术的融合就成为了关键之处。在Hybrid App开发中也是同样的道理。Hybrid App的关键是原生页面（Native）与H5页面之间的交互，其交互实现的好坏直接影响到Hybrid App 的功能和用户体验。目前广为流行的一种通信方式就是JSBridge。JSBridgeJSBridge基本原理基本原理JSBridge就是定义Native和JS的通信,Native只通过一个固定的桥对象调用JS,JS也只

14、通过固定的桥对象调用Native,可以将JSBridge理解成一个中间层，专门负责原生与H5的通信，基本原理是:H5-通过某种方式触发一个url-Native捕获到url,进行分析-原生做处理-Native调用H5的JSBridge对象传递回调。JSBridge JSBridge 原理图原理图其他技术问题其他技术问题1.客户端数据缓存问题：采用HTML5的localStorage技术，可以将静态资源一次加载之后保存在本地，以便优化下一次时候的加载速度。2.消息实时通知：采用HTML5的webSocket技术实现。3.客户端浏览器兼容性问题：依旧需要前端工程师进行浏览器兼容性的修改和测试。Hybrid AppHybrid App不足与展望：不足不足与展望：不足1.相比原生,性能仍然有较大损耗：这种模