HybridApp解决方案.docx
- 文档编号:12390478
- 上传时间:2023-04-18
- 格式:DOCX
- 页数:13
- 大小:23.22KB
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的。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HybridApp 解决方案