HybridApp解决方案文档格式.docx
《HybridApp解决方案文档格式.docx》由会员分享,可在线阅读,更多相关《HybridApp解决方案文档格式.docx(11页珍藏版)》请在冰豆网上搜索。
![HybridApp解决方案文档格式.docx](https://file1.bdocx.com/fileroot1/2022-10/9/139e4865-7adc-4349-b7c4-32f38288de7a/139e4865-7adc-4349-b7c4-32f38288de7a1.gif)
这样说虽然不太贴切,但实际上给人的感觉就是这样的。
虽然开发成本大大降低,但页面访问速度慢、操作体验差。
于是第三种模式诞生了。
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跨平台开发和低成本的优势”。
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)
支持大量图形和动画;
容易发现(在
Store里面)和重新发现(应用图标会一直在主页上);
(5)
应用下载能创造盈利(当然App
Store抽取20-30%
的营收);
(6)
app质量及安全性好。
原生应用和Web应用的结合体,应用比例很自由;
开发成本低;
能节省跨平台的时间和成本,只需编写一次核心代码就可部署到多个平台;
可任意调整风格,DIV版面布局;
兼容多平台;
顺利访问手机的多种功能;
(7)
Store中可下载(Web应用套用原
生应用的外壳);
(8)
可线下使用。
运行到浏览器上,项目独立;
跨平台开发工具选择多;
不需要安装额外软件,控制版本非
常容易;
缺点
开发及维护成本高;
支持设备非常有限(一般是哪个系统
就在哪个平台专属设备上用);
上线时间不确定(App
Store审核过
程不一);
内容限制(App
Store限制);
获得新版本时需重新下载应用更新。
举例:
Yellow
Pages
Group就开发
了是几个版本(iOS、黑莓、Android),他们在每一个原生应用市场都有上架。
1)
不确定上线时间;
用户体验不如本地应用;
性能稍慢(需要连接网络);
技术还不是很成熟
只能使用有限的移动硬件设备能
力,无法使用更多移动硬件设备的独特功能;
搜索Web
app比较困难;
质量及安全性无法得到保障;
必须联网;
移动应用用户体验不是很好;
性能需要进行检验
特点
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开发模式一时间受到各个开发团队追捧,