HybridApp解决方案文档格式.docx

1、这样说虽然不太贴切，但实际上给人的感觉就是这样的。虽然开发成本大大降低，但页面访问速度慢、操作体验差。于是第三种模式诞生了。1.1.3. Hybrid App乍一看和Web App没啥差别，但涉及到的技术成本、开发成本、学习成本比Web App高，它综合了Web App的开发速度和Native App的高性能体验。之所以说学习成本高，是因为开发高性能的Hybrid App有难度，网络资料少。我是两年半前开始接触混合模式开发的，当时如何做好屏幕适配、提高UI响应速度、如何最大化使用原生功能等内容，网络几乎没有资料。网上能搜索到的都是很粗略的东西，或者就是Hello World级别的东西，涉及到稍

2、微细节一点的东西几乎没有。由于本系列文章都只讲Hybrid，故在此不再啰嗦了。三种开发模式各自的特点如下面的表格所示：Native AppHybrid AppWeb App原生功能体验优秀接近优秀差性能非常快快慢跨平台开发成本昂贵合理便宜碎片化适配非常严重严重编程技术支持短缺非常短缺通用人才版本升级维护保守低延时开放安全强中弱1.2. Hybrid App所需技术Hybrid App由于需要保证运行性能与开发速度，需要如下技术支持，本系列博文均会按照Demo的开发顺序依次描述本人的开发心得和教训，希望能起到一个抛砖引玉的作用。1.2.1. Native技术Native技术主要用于提供原生支持，

3、要做到跨平台，就需要掌握部分Android和iOS的知识，除了多线程，文件存储等基础知识，Android需要非常熟练的掌握WebView、WebSettings、WebChromeClient、WebClient四大对象。iOS需要非常熟练掌握UIWebView对象。1.2.2. Web技术1、HTML5熟练掌握HTML5的各个标签，如何编写最优的文档结构。2、CSS熟练掌握CSS2和CSS3的新特性，能按照效果图编写最高性能的样式。使用SCSS生成CSS，将CSS可编程化。3、JavaScript实现业务逻辑控制。个人理解JavaScript主要包含两大内容：DOM编程和面向对象编程。大部分

4、JS开发人员就只掌握DOM编程，诸如document.getElementById（）等，但面向对象是很重要的一个方面。4、 性能和开发模块化编程：编写可复用的组建；CSS渲染：了解浏览器的CSS渲染引擎才能编写更高效率的样式；JS解析：了解浏览器的JS解析引擎才能优化JS脚本；HTTP协议：熟练掌握HTTP请求的各个内容；AJAX：和服务器端的交互大都采用AJAX。1.3. 流行框架1.3.1. Hybrid 框架Cordova/PhoneGap：侧重于JS与原生的交互，开发简单，但性能差，如触摸时反应不灵敏。AppCan：性能还行，使用简单，但要提交代码给AppCan的服务器才能打包，相信

5、有追求的企业是不会把自己的代码提交给第三方，把打包权利交给第三方的。Ionic Framework：在Cordova的基础上增加一些UI/JS方面的东西，样式还不错，但同样具有Cordova的不足。1.3.2. UI/JS框架jQuery Mobile：上手简单，组件丰富，但性能超级差，闪屏现象严重。Senche Touch：简单看过，没有使用过，貌似UI很漂亮，学习成本高。React Native：FB推出的，当年FB是最早尝试Hybrid的，但性能超差，于是APP放弃了Hybrid，走原生的道路。在大家都不看好H5时，FB暗中深入挖掘H5，三年之后推出了这个框架，非常推荐各位去学习其中的思

6、想。GMU：XX推出的，这个不错。1.3.3. UI/JS库这个就多了，jQuery、Zepto、Swiper、iScroll、RequireJS、AngularJS1.3.4. 个人建议由于移动端是一个重视性能和用户体验的终端，大量采用框架存在一些问题：1、 扩展、维护、定制成本，这个非常需要考虑，或许框架提供的UI风格和自己设计的UI风格差异大，导致设计围绕框架转，不符合产品的需求。2、 既然是框架，强调的是覆盖面广度和功能的全面，会有很多无用的东西，带来累赘；3、 框架本身存在BUG，或许需要开发人员面对一些能力之外的问题。总之，如果只追求像山寨作坊一样快速产出、不计性能的开发产品，那使

7、用现成的框架是不二选择。但如果追求性能和真正的产品，建议使用库，不要使用框架。但是很多框架的实现思想都很优秀，虽然不建议使用，但我们应该多接触学习其中的思想，才能写更好的代码。仅仅建议而已，不中听请忽略。1.4. 系列大纲本系列博文将按照我近三年来开发Hybrid App过程中的体会进行编写，以一个APP完整开发为线索，形成一套完整的混合模式开发的解决方案。1、 JS和原生交互架构2、 WEB端基础知识准备3、 UI适配方案4、 UI组件开发及封装5、 JS模块化开发6、 升级、部署方案么叫做原生App?什么是混合app?什么是WebApp开发?NativeApp开发即我们所称的传统APP开发

8、模式（原生APP开发模式），该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，是专门针对某一类移动设备而生的，它们都是被直接安装到设备里，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上，原生App而用户一般也是通过网络商店或者卖场来获取例如TheAppStore与AndroidAppsonGooglePlay。HybridApp（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“NativeApp良好用户交互体验的优势”和“WebApp跨平台开发和低成本的优势”。App主要以JS+Native两者相互调用为

9、主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。目前已经有众多HybridApp开发成功应用，比如百度、网易、街旁等知名移动应用，都是采用HybridApp开发模式。WebApp开发即是一种框架型APP开发模式（HTML5APP框架开发模式），该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。原生APP的优点混合APP的优点webAPP的优点（1）可访问手机所有功能（GPS、摄像头）；（2）速度更快、性能高、整体用户体验最好；（

10、3）可线下使用（因为是在跟Web相对地平台上使用的）；（4）支持大量图形和动画;容易发现（在Store里面）和重新发现（应用图标会一直在主页上）；（5）应用下载能创造盈利（当然AppStore抽取20-30%的营收）；（6）app质量及安全性好。原生应用和Web应用的结合体,应用比例很自由；开发成本低；能节省跨平台的时间和成本，只需编写一次核心代码就可部署到多个平台；可任意调整风格，DIV版面布局；兼容多平台；顺利访问手机的多种功能；（7）Store中可下载（Web应用套用原生应用的外壳）；（8）可线下使用。运行到浏览器上，项目独立；跨平台开发工具选择多；不需要安装额外软件，控制版本非常容易；

11、缺点开发及维护成本高；支持设备非常有限（一般是哪个系统就在哪个平台专属设备上用）；上线时间不确定（AppStore审核过程不一）；内容限制（AppStore限制）；获得新版本时需重新下载应用更新。举例：YellowPagesGroup就开发了是几个版本（iOS、黑莓、Android），他们在每一个原生应用市场都有上架。1）不确定上线时间；用户体验不如本地应用；性能稍慢（需要连接网络）；技术还不是很成熟只能使用有限的移动硬件设备能力，无法使用更多移动硬件设备的独特功能；搜索Webapp比较困难；质量及安全性无法得到保障；必须联网；移动应用用户体验不是很好；性能需要进行检验特点App可以充分利用设

12、备的特性，而这一点往往是Web浏览器做不到的，所以对一个产品本身而言，NativeApp是最佳的选择。（1）每次获取最新的APP功能，需要升级APP应用；（2）原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架；（3）手机用户无法上网也可访问APP应用中以前下载的数据。（4）原生型的APP可以调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）（5）APP应用更新功能，涉及到每次要向各个应用商店进行提交审核。适用企业：游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用快速迭代，高效开发，低成本上线是每一个App开发团队追求的目标。同时，随着HTML5的不断升温和智能手机硬件性能的提高，HybridApp的概念应运而生。这种“Native搭台，HTML5唱戏”的HybridApp开发模式一时间受到各个开发团队追捧，