HybridApp解决方案.docx
《HybridApp解决方案.docx》由会员分享，可在线阅读，更多相关《HybridApp解决方案.docx（13页珍藏版）》请在冰豆网上搜索。
HybridApp解决方案
HybridApp解决方案_No1_混合模式（Hybrid）App开发概述
1.1. APP三种开发模式
智能手机之普及不用多说，手机APP渗投到各个行业：
电商（淘宝、京东等）、金融（各手机行业、P2P借贷等）、医疗（智慧医疗）、交通（滴滴、Uber等）、教育（慕课网等）、餐饮（饿了吗、美团等）……反正只要是个企业，无论规模大小，都已经订制或将要订制自己的APP。
这么多APP无外乎就三种模式：
NativeApp、WebApp、HybridApp。
1.1.1. NativeApp
NativeApp，原生APP，使用原生（即Android或iOS）开发的APP。
两年多以前这非常流行，到现在为止，原生开发人员数量众多，一抓一大票，技术成熟，好多培训机构都抱着老掉牙的API翻来覆去的讲——尤其是Android。
Sorry，说错话了……使用原生开发有其优势：
应用的性能好，适配起来相对容易。
学习成本要看人，个人觉得技术点不多，门槛相对稍高，但入门后学习起来就很轻松——网络资料实在是太多了。
但原生APP最头疼的有三个问题：
1、无法跨平台：
Android和iOS都需要开发各自平台的版本——开发成本高；
2、升级麻烦：
每次升级都要下载安装包，Android还好，反正不需要审核，下载就下载吧，但iOS就麻烦了，发布每个版本还得经过AppStore的审核，这导致第三个问题；
3、Android和iOS很难同步发布。
1.1.2. WebApp
所谓的WebApp，就是把手机当做一个浏览器（Android使用WebView，iOS使用UIWebView），做几个页面挂在服务器端，类似于一个小网站。
这样说虽然不太贴切，但实际上给人的感觉就是这样的。
虽然开发成本大大降低，但页面访问速度慢、操作体验差。
于是第三种模式诞生了。
1.1.3. HybridApp
乍一看和WebApp没啥差别，但涉及到的技术成本、开发成本、学习成本比WebApp高，它综合了WebApp的开发速度和NativeApp的高性能体验。
之所以说学习成本高，是因为开发高性能的HybridApp有难度，网络资料少。
我是两年半前开始接触混合模式开发的，当时如何做好屏幕适配、提高UI响应速度、如何最大化使用原生功能等内容，网络几乎没有资料。
网上能搜索到的都是很粗略的东西，或者就是HelloWorld级别的东西，涉及到稍微细节一点的东西几乎没有。
由于本系列文章都只讲Hybrid，故在此不再啰嗦了。
三种开发模式各自的特点如下面的表格所示：
NativeApp
HybridApp
WebApp
原生功能体验
优秀
接近优秀
差
性能
非常快
快
慢
跨平台开发成本
昂贵
合理
便宜
碎片化适配
非常严重
严重
严重
编程技术支持
短缺
非常短缺
通用人才
版本升级维护
保守
低延时
开放
安全
强
中
弱
1.2. HybridApp所需技术
HybridApp由于需要保证运行性能与开发速度，需要如下技术支持，本系列博文均会按照Demo的开发顺序依次描述本人的开发心得和教训，希望能起到一个抛砖引玉的作用。
1.2.1. Native技术
Native技术主要用于提供原生支持，要做到跨平台，就需要掌握部分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编程和面向对象编程。
大部分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的服务器才能打包，相信有追求的企业是不会把自己的代码提交给第三方，把打包权利交给第三方的。
IonicFramework：
在Cordova的基础上增加一些UI/JS方面的东西，样式还不错，但同样具有Cordova的不足。
1.3.2. UI/JS框架
jQueryMobile：
上手简单，组件丰富，但性能超级差，闪屏现象严重。
SencheTouch：
简单看过，没有使用过，貌似UI很漂亮，学习成本高。
ReactNative：
FB推出的，当年FB是最早尝试Hybrid的，但性能超差，于是APP放弃了Hybrid，走原生的道路。
在大家都不看好H5时，FB暗中深入挖掘H5，三年之后推出了这个框架，非常推荐各位去学习其中的思想。
GMU：
XX推出的，这个不错。
1.3.3. UI/JS库
这个就多了，jQuery、Zepto、Swiper、iScroll、RequireJS、AngularJS……
1.3.4. 个人建议
由于移动端是一个重视性能和用户体验的终端，大量采用框架存在一些问题：
1、扩展、维护、定制成本，这个非常需要考虑，或许框架提供的UI风格和自己设计的UI风格差异大，导致设计围绕框架转，不符合产品的需求。
2、既然是框架，强调的是覆盖面广度和功能的全面，会有很多无用的东西，带来累赘；
3、框架本身存在BUG，或许需要开发人员面对一些能力之外的问题。
总之，如果只追求像山寨作坊一样快速产出、不计性能的开发产品，那使用现成的框架是不二选择。
但如果追求性能和真正的产品，建议使用库，不要使用框架。
但是很多框架的实现思想都很优秀，虽然不建议使用，但我们应该多接触学习其中的思想，才能写更好的代码。
仅仅建议而已，不中听请忽略。
1.4. 系列大纲
本系列博文将按照我近三年来开发HybridApp过程中的体会进行编写，以一个APP完整开发为线索，形成一套完整的混合模式开发的解决方案。
1、JS和原生交互架构
2、WEB端基础知识准备
3、UI适配方案
4、UI组件开发及封装
5、JS模块化开发
6、升级、部署方案
么叫做原生App?
什么是混合app?
什么是Web App开发?
Native App开发即我们所称的传统APP开发模式（原生APP开发模式），该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，是专门针对某一类移动设备而生的，它们都是被直接安装到设备里， APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上，原生App而用户一般也是通过网络商店或者卖场来获取例如The App Store与Android Apps on Google Play。
Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，
兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发和低成本的优势”。
Hybrid App主要以JS+Native两者相互调用
为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发。
目前已经有众多Hybrid App开发成功应用，比如百
度、网易、街旁等知名移动应用，都是采用Hybrid App开发模式。
Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），
该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需
安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。
原生APP的优点
混合APP的优点
webAPP的优点
（1） 可访问手机所有功能（GPS、摄像头）；
（2） 速度更快、性能高、整体用户体验最
好；
（3） 可线下使用（因为是在跟Web相对
地平台上使用的）；
（4） 支持大量图形和动画; 容易发现（在
App Store里面）和重新发现（应用图标会一直在主页上）；
（5） 应用下载能创造盈利（当然App Store抽取20-30% 的营收）； （6） app质量及安全性好。
（1） 原生应用和Web应用的结合体,应用比例很自由；
（2） 开发成本低；
（3） 能节省跨平台的时间和成本，只需编写一次核心代码就可部署到多个平台；
（4） 可任意调整风格，DIV版面布局；
（5） 兼容多平台；
（6） 顺利访问手机的多种功能；
（7） App Store中可下载（Web应用套用原
生应用的外壳）；
（8） 可线下使用。
（1） 运行到浏览器上，项目独立；
（2） 跨平台开发工具选择多； （3） 不需要安装额外软件，控制版本非
常容易；
缺点
（1） 开发及维护成本高；
（2） 支持设备非常有限（一般是哪个系统
就在哪个平台专属设备上用）；
（3） 上线时间不确定（App Store审核过
程不一）；
（4） 内容限制（App Store限制）；
（5） 获得新版本时需重新下载应用更新。
（6） 举例：
Yellow Pages Group就开发
了是几个版本（iOS、黑莓、Android），他们在每一个原生应用市场都有上架。
1） 不确定上线时间；
（2） 用户体验不如本地应用； （3） 性能稍慢（需要连接网络）；
（4） 技术还不是很成熟
（1） 只能使用有限的移动硬件设备能
力，无法使用更多移动硬件设备的独特功能；
（2） 搜索Web app比较困难； （3） 质量及安全性无法得到保障； （4） 必须联网；
（5） 移动应用用户体验不是很好；
（6） 性能需要进行检验
特点
Native App可以充分利用设备的特性，而这一点往往是Web浏览器做不到的，所以对一个产品本身而言，Native App是最佳的选择。
（1）每次获取最新的APP功能，需要升级APP应用；
（2）原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架； （3）手机用户无法上网也可访问APP应用中以前下载的数据。
（4）原生型的APP可以调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）
（5）APP应用更新功能，涉及到每次要向各个应用商店进行提交审核。
适用企业：
游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用
快速迭代，高效开发，低成本上线是每一个
App开发团队追求的目标。
同时，随着HTML 5的不断升温和智能手机硬件性能的提高，Hybrid App的概念应运而生。
这种“Native搭台，HTML 5唱戏”的Hybrid App开发模式一时间受到各个开发团队追捧，快速进入了
大量开发团队，成为主流开发模式。
Hybrid App优点众多，Web前端工程师0成本介入，不依赖版本的实时更新，快速实现跨平台需求，等等。
而另一个方面，2012年Hybrid App的践行者Facebook决定大量弃用App中的HTML页面，转向更加Native化
的方案。
Facebook的这一举措也给Hybrid App方案的敲响了警钟，这似乎并不是一个完美的方案。
即使所有Web代码在本地运行，效率也要比Native差一些。
这主要取决于应用类型，对交互体验和性能有很高要求的应用是不适合用Hybrid的。
移动Web无所不在，移动Web是目前
唯一的支持各种设备访问的平台，与桌面Web一样，移动Web支持各种标准的协议。
移动Web也是唯一一个可供开发者发布移动应用的平台，它将各种移动交互与桌面任务有效地连接了起来；
（1）每次打开APP，都要通过APP框架向云网站取UI及数据；
（2）手机用户无法上网则无法访问APP应用中的数据。
（3）框架型的APP无法调用手机终端
的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）
（4）框架型APP的访问速度受手机终端上网的限制，每次使用均会消耗一定的手机上网流量；
（5）框架型APP应用的安装包小巧，只包含框架文件，而大量的UI元素、数据内容刚存放在云端；
（6）APP用户每次都可以访问到实时的最新的云端数据；
（7）APP用户无须频繁更新APP应用，与云端实现的是实时数据交互； 适用企业：
电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用
分类:
iOS
原生APP和HTML5的混合开发模式
2015-05-0821:
33:
21
在“浙江新闻”客户端中的实践
文_汤恺
原生APP开发和HTML5技术是目前移动应用开发领域两个最火的技术，本文不深入讨论两种技术的优劣，更不轻易做出“某某将取代某某”、“某某是未来”等结论，只整理了“浙江新闻”客户端在目前和以后的开发过程中，如何将两种技术混合开发，取长补短，寻求适合自己产品的最佳技术方案。
首先简单介绍一下何为原生APP和HTML5。
原生APP简单地说就是PC时代的“程序”进入移动时代后的洋气名字，它们需要经过安装才能使用，通常在Appstore和googleplay等各大安卓市场里获取。
原生APP是用户和操作系统（手机）之间的桥梁，所以原生APP能够拿到操作系统开放的所有功能，比如调用摄像头、通讯录、GPS、蓝牙等等。
“浙江新闻”就是一个原生APP，目前提供IOS、安卓两个客户端版本。
HTML5同样是PC时代的“网站”在移动时代的名字，HTML5技术开发出来的成果必须借助浏览器（或是APP内的WebView组件，例如微信内打开一个链接出来的页面），正因为多了浏览器这一层，所以HTML5在用户体验和表现上，以及对本地存储、摄像头等硬件的支持并没有原生APP那么好。
HTML5相比原生APP，有快速更新、跨平台兼容性、开发门槛较低等优势，特别是“快速更新、实时起效”这方面，我们在“浙江新闻”开发过程中，感受尤其深刻。
一.混合开发模式的三个应用场景
1.通过HTML5提供更多的内容展现形式
“浙江新闻”是一个新闻客户端，单篇新闻的具体形式都是标准统一的，即图文结合的形式。
但是“浙江新闻”提供了另外一种新闻形式——Web新闻。
采编后台发布该类型新闻的时候，只需要填写一个网址，点击该新闻即显示该网址对应的网站。
而这网站的内容，就可以根据具体内容需要，开发出想要的效果。
目前“浙江新闻”在HTML5技术和新闻报道的融合上，已经探索出多种内容展现形式，以下案例用微信扫描二维码即可观看。
什么叫做原生App?
NativeApp开发即我们所称的传统APP开发模式（原生APP开发模式），该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，是专门针对某一类移动设备而生的，它们都是被直接安装到设备里，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上，原生App而用户一般也是通过网络商店或者卖场来获取例如TheApp
什么是混合app?
HybridApp（混合模式移动应用）是指介于web-app、native-app这两者之间的app，
什么是WebApp开发?
WebApp开发即是一种框架型APP开发模式（HTML5APP框架开发模式），
兼具“NativeApp良好用户交互体验的优势”该开发具有跨平台的优势，该模式通常和“WebApp跨平台开发和低成本的优势”。
HybridApp主要以JS+Native两者相互调用由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需
为主，从开发层面实现“一次开发，多处运行”安装应用的框架部份，而应用的数据则的机制，成为真正适合跨平台的开发。
目前已经有众多HybridApp开发成功应用，比如百度、网易、街旁等知名移动应用，都是采用是每次打开APP的时候，去云端取数据呈现给手机用户。
Store与AndroidAppsonGooglePlay。
HybridApp开发模式。
Nativeapp优点
（1）
（2）
Hybridapp优点
原生应用和Web应用的结合体,应用比例很自由；
（2）（3）开发成本低；能节省跨平台的时间和成本，只需编写一次核心代码就可部署到多个平台；（4）（5）（6）（7）可任意调整风格，DIV版面布局；兼容多平台；顺利访问手机的多种功能；AppStore中可下载（Web应用套用原生应用的外壳）；（8）可线下使用。
Webapp优点
（1）
（2）（3）运行到浏览器上，项目独立；跨平台开发工具选择多；不需要安装额外软件，控制版本非常容易；
可访问手机所有功能（GPS、摄像头）；
（1）速度更快、性能高、整体用户体验最好；
（3）
可线下使用（因为是在跟Web相对地平台上使用的）；
（4）
支持大量图形和动画;容易发现（在AppStore里面）和重新发现（应用图标会一直在主页上）；
（5）
应用下载能创造盈利（当然AppStore抽取20-30%的营收）；
（6）
app质量及安全性好。
Nativeapp缺点
（1）
（2）开发及维护成本高；支持设备非常有限（一般是哪个系统就在哪个平台专属设备上用）；（3）上线时间不确定（AppStore审核过程不一）；（4）（5）内容限制（AppStore限制）；获得新版本时需重新下载应用更新。
Hybridapp缺点
（1）
（2）（3）不确定上线时间；用户体验不如本地应用；性能稍慢（需要连接网络）；
Webapp缺点
（1）只能使用有限的移动硬件设备能力，无法使用更多移动硬件设备的独特功能；
（2）（3）（4）（5）搜索Webapp比较困难；质量及安全性无法得到保障；必须联网；移动应用用户体验不是很好；
（4）技术还不是很成熟。
（6）
举例：
YellowPagesGroup就开发了是几个版本（iOS、黑莓、Android），他们在每一个原生应用市场都有上架。
（6）
性能需要进行检验。
Nativeapp特点
NativeApp可以充分利用设备的特性，而这一点往往是Web浏览器做不到的，所以对一个产品本身而言，NativeApp是最佳的选择。
（1）每次获取最新的APP功能，需要升级APP应用；
Hybridapp特点
快速迭代，高效开发，低成本上线是每一个App开发团队追求的目标。
同时，随着HTML5的不断升温和智能手机硬件性能的提高，HybridApp的概念应运而生。
这种“Native搭台，HTML5唱戏”的HybridApp开发模式一时间受到各个开发团队追捧，快速进入了
Webapp特点
移动Web无所不在，移动Web是目前唯一的支持各种设备访问的平台，与桌面Web一样，移动Web支持各种标准的协议。
移动Web也是唯一一个可供开发者发布移动应用的平台，它将各种移动交互与桌面任务有效地连接了起来；
（1）每次打开APP，都要通过APP框架向云网站取UI及数据；
（2）手机用户无法上网则无法访问APP应用中的数据。
（3）框架型的APP无法调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）（4）框架型APP的访问速度受手机终端上网的限制，每次使用均会消耗一定的手机上网流量；（5）框架型APP应用的安装包小巧，只包含框架文件，而大量的UI元素、数据内容刚存放在云端；（6）APP用户每次都可以访问到实时的最新的云端数据；（7）APP用户无须频繁更新APP应用，与云端实现的是实时数据交互；适用企业：
电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。
（2）原生型APP应用的安装包相对较大，大量开发团队，成为主流开发模式。
包含UI元素、数据内容、逻辑框架；（3）手机用户无法上网也可访问APP应用中以前下载的数据。
（4）原生型的APP可以调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）（5）APP应用更新功能，涉及到每次要向各个应用商店进行提交审核。
适用企业：
游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。
HybridApp优点众多，Web前端工程师0成本介入，不依赖版本的实时更新，快速实现跨平台需求，等等。
而另一个方面，2012年HybridApp的践行者Facebook决定大量弃用App中的HTML页面，转向更加Native化的方案。
Facebook的这一举措也给HybridApp方案的敲响了警钟，这似乎并不是一个完美的方案。
即使所有Web代码在本地运行，效率也要比Native差一些。
这主要取决于应用类型，对交互体验和性能有很高要求的应用是不适合用Hybrid的。
升级会员 