如何使用HTML5技术开发Hybrid App

html-css0156

如何使用HTML5技术开发Hybrid App,第1张

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

1、AppCan

AppCan是国内Hybrid App混合模式开发的倡导者,AppCan应用引擎支持Hybrid App的开发和运行。并且着重解决了基于HTML5的移动应用"不流畅"和"体验差"的问题。使用AppCan应用引擎提供的Native交互能力,可以让HTML5开发的移动应用基本接近Native App的体验。[3]

AppCan作为中国Hybrid混合应用开发、移动平台、移动云平台的倡导者和领导者,以“免费+开源+开放”的互联网模式,为广大开发者提供一站式的移动应用开发支持服务。[4] 与此同时,从移动应用开发、管理、运营、安全四个方面,为各级政府和企事业单位,构建运营一体化的企业移动平台,企业通过个性化的移动运营门户,增强客户服务品质,提升整体经营管理水平。

现在,正益移动AppCan行业解决方案已成功应用于金融、航空、政府、石化、传媒等领域,客户包括东方航空、国家电网、中化集团、泰康人寿、新华社等众多大型企业,赢得了市场广泛认可,是国内企业移动信息化领域的龙头企业。[4]

2、Appcelerator

Appcelerator的Titanium开发平台使开发者可以通过HTML、PHP、JavaScript、Ruby、Python等Web编程语言开发手机、平板和桌面的原生App。其优势在于它可以让用户轻松地访问超过300个API以及定位信息。

此外,Appcelerator提供针对特定行为或事件定制的统计。App的数据既可储存在云端,也可储存在设备上。

3、Kerkee

Kerkee是一个多主体共存型Hybrid框架,具有跨平台、用户体验好、性能高、扩展性好、灵活性强、易维护、规范化、集成云服务、具有Debug环境、彻底解决跨域问题。[2]

从开发者角度来说,它支持三种的团队开发模式:

针对Web开发者:

这种模式其中的一个场景是:只会Web开发,却不会Native开发的开发者提供了一系列的平台型接口。这种方式具有开发周期短,跨平台等优点。

针对Native开发者 :

这种开发模式的其中一个场景是:Native开发者想要截获Web页面的数据或者对数据进行自己的处理,或者Web页面中的行为进行修改。在这个时候,Kerkee框架将会为他们带来便利。

针对Web开发者和Native团队共同合作的开发团队 :

对于这种模式的团队,kerkee框架具体更开放更透明的协作,并且严格地隔离各自职责。各得Web团队和Native团队把主要精力定位到各自的模块上,有利于各自的模块优化到极致。

4、WeX5

WeX5采用混合应用(hybrid app)开发模式, UI体系完全基于w3c的html5+css3+js;引入jquery和bootstrap并对移动做了底层优化,效率和性能接近原生应用。WeX5本机API Framework采用phonegap(cordova)框架。[5]

5、APICloud

APICloud是一款“云端一体”的移动开发平台,信仰“云端一体”的理念,重新定义了移动应用开发。APICloud为开发者从“云”和“端”两个方向提供API,简化移动应用开发技术,让移动应用的开发周期从一个月缩短到7天。APICloud由“云API”和“端API”两部分组成,可以帮助开发者快速实现移动应用的开发、测试、发布、管理和运营的全生命周期管理。

6、PhoneGap

PhoneGap是一个免费且开源的开发环境,使开发者可以开发出在Android、Palm、黑莓、iPhone、iTouch及iPad等设备上运行的App。其使用的是HTML和JavaScript等标准的Web开发语言。开发者使用PhoneGap进行开发,可调用加速计、GPS/定位、照相机、声音等功能。

PhoneGap还提供Adobe AIR App以及在线的培训课程,帮助开发者了解原生API并在他们自己的平台上开发移动App。

7、NativeScript

NativeScript是使用移动平台的 JavaScript 引擎来进行跨平台开发。逻辑部分自然无需多说,关键在于如何使用平台特性。NativeScript是通过反射得到所有平台 API,预编译它们,然后将这些 API 注入到 JavaScript 运行环境,接下来在 Javascript 调用后拦截这个调用,并运行 native 代码。NativeScript是使用大量 web 开发的技巧来进行 app 开发,因为工具链和语言都非常熟悉受到了很多前端开发者的欢迎。

8、Kinvey

Kinvey同样是一个为移动应用开发者提供后台创建服务的平台。Kinvey强调加速移动应用开发与销售的“即取即用”理念。Kinvey的中间层与数据层均托管在多个云服务提供商处,包括 Rackspace、Amazon与Microsoft。所有通过Kinvey存储的数据都会有四种方式备份:Amazon EC2、Windows Azure、Rackspace以及Kinvey自己的服务器,假如其中一两个出现了故障,用户的数据依然安然无恙。[6]

9、ExMobi

ExMobi通过全面的数据集成技术和丰富的跨平台客户端展现能力,将业务系统快速、安全、高效的移植于移动终端。ExMobi从开发(IDE环境)、集成(IT系统对接、云服务)、打包(各个操作系统的应用打包)、发布(应用的运行)、管理(日志管理,更新管理)上提供了一套完整的解决方案。并通过专业的培训和支撑渠道为开发者提供可持续的学习和交流空间,扫除开发障碍。[7]

HTML5开发就业班:

全栈:HTML5 + PHP + MySQL

第一阶段:前端页面重构:PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局;

第二阶段:JavaScript高级程序设计:原生JavaScript交互功能开发、面向对象开发与ES5/ES6、JavaScript工具库自主研发;

第三阶段:PC端全栈项目开发:jQuery经典特效交互开发、HTTP协议,Ajxa进阶与后端开发、前端工程化与模块化应用、PC端网站开发、PC端管理信息系统前端开发;

第四阶段:移动端项目开发:Touch端项目、微信场景项目、应用Vue.js开发WebApp项目、应用Ionic开发WebApp项目、应用React.js开发WebApp;

第五阶段:混合(Hybrid)开发:各类混合应用开发;

第六阶段:NodeJS全栈开发:WebApp后端系统开发。

HTML5开发好程序:

不会原生开发(iOS、Android),后端应用(NodeJs、Java、PHP)开发,游戏开发的HTML5工程师不是一个好的工程师。

全栈工程师:

大前端:HTML5(Web前端)、Android(Native前端)、Hybrid(混合前端)。

后端:多栖后端(NodeJs、Java、PHP)。

第一阶段:前端页面重构:PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局;

第二阶段:JavaScript高级程序设计:原生JavaScript交互功能开发、面向对象开发与ES5/ES6、JavaScript工具库自主研发;

第三阶段:PC端全栈项目开发:jQuery经典特效交互开发、HTTP协议,Ajxa进阶与后端开发、前端工程化与模块化应用、PC端网站开发、PC端管理信息系统前端开发;

第四阶段:移动端项目开发:Touch端项目、微信场景项目、应用Vue.js开发WebApp项目、应用Ionic开发WebApp项目、应用React.js开发WebApp;

第五阶段:混合(Hybrid)开发:各类混合应用开发;

第六阶段:NodeJS全栈开发:WebApp后端系统开发、基于Socket.io聊天系统开发。

第七阶段:游戏开发:游戏类项目开发(植物大战僵尸、捕鱼达人等)。

第八阶段:Java开发:企业级开发技术架构实战、商城项目整站开发。

第九阶段:PHP开发:微信管理系统、商城系统、主流PHP免费系统的使用。

第十节段:Android开发:外卖系统开发、Android混合开发项目。

HTML5的离线应用和本地化存储等API,使它可以被用来开发Native App。

这种Native App也有安装的一个动作,这是与Web App的明显差别。

使用HTML5开发的Native App,一般又称为混合型App(Hybrid App)。流程:

1、开发对应的Web App;

2、搭建Native App的开发环境;(比如Android的JDK+Eclipse+ADT+SDK)

3、使用中间框架来帮助生成;(比如PhoneGap)

4、生成App并发布到应用市场。

另外,使用纯web语言开发的Native App,执行效率普遍不高,事件响应有延迟。大型企业级应用,为了获得更好的用户体验,可使用web语言配合本地语言的方式开发。