html5 app开发框架有哪些

html-css022

html5 app开发框架有哪些,第1张

①:PhoneGap

PhoneGap 恐怕是最老的一个框架了,相信很多人都已经听说过甚至使用过它,但是PhoneGap是基于开源的cordova 商业版本。

②:Ionic

IONIC 是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序,它提供了很多UI组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定,使用它成为Web和移动开发者的共同选择。

③:Mobile Angular UI

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。

Mobile Angular UI的关键字有:

Bootstrap 3

AngularJS

Bootstrap 3 Mobile组件,比如switches, overlays和sidebars,这些都是bootstrap中没有的。

AngularJS modules, 比如 angular-route, angular-touch 和 angular-animate

响应式媒体查询是将bootstrap作为单独的文件,你只需要包含你所需要的东西。Mobile Angular UIu并不包含任何jQuery依赖,你需要做的只是通过一些AngularJS指令创建友好的用户体验。

④:Intel XDK

Intel XDK 是Inter开发的一款跨平台开发工具,我们可以很容易的通过Intel XDK开发应用,你需要做的只是下载他们的应用开发工具 ,有Linux、Windows和Mac版,它还提供了很多个开发框架,比如Twitter bootstrap, jQuery Mobile 和 Topcoat.

⑤:Appcelerator Titanium

 Appcelerator’s Titanium 不同于其它框架的是,它是一个开源的框架。

 Titanium是混合式移动应用开发的一站式解决方案,你只需要下载 Titanium studio就可以解决所有的事情,Titanium SDK包含了很多手机平台的APIs和后端云服务。

 Titanium使用 Alloy,Alloy是一个快速开发的手机应用MVC框架, 模块式开发可以大大减小开发时间,提高代码复用。

⑥:Sencha Touch

Sencha Touch 同样也是HTML5手机应用跨平台开发框架,运行iOS/Android/Blackberry。它已经诞生很多年了,现在已经成为很常用的混合式编程开发框架。

Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的 WEB标准,全面兼容Android和Apple iOS设备。

⑦:Kendo UI

Telerik’s Kendo UI 是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。

Kendo UI包含了开发现代JavaScript开发所需要的所有一切,包括:强大的数据源,通用的拖拉(Drag-and-Drop)功能,模板,和UI控件。

jquery mobile和bootstrap都是较好的框架

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

h5做app和原生app有什么区别?

H5开发的web APP和原生APP的区别有以下几个方面:

一、开发方面

原生App

⊙ 每一种移动作业系统都需要独立的开发专案

⊙ 每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等

⊙ 需要使用各自的软体开发包,开发工具以及各自的控制元件

移动Web App

⊙ 因为执行在移动装置的浏览器上,所以只需要一个开发专案

⊙ 这种应用可以使用HTML5,CSS3以及JavaScript以及伺服器端语言来完成(PHP,Ruby on Rails,Python)

⊙ 这里可没有标准的SDK,基本任意选择别忘了有一些跨平台的开发工具,比如PhoneGap, Sencha Touch 2,APPcan以及Appcelerator Titanium等等。

二、能力方面

原生App

⊙ 能够与移动硬体装置的底层功能,比如个人资讯,摄像头以及重力加速器等等

移动Web App

⊙ 只能使用有限的移动硬体装置功能。

三、获取方法

原生App

⊙ 直接下载到装置

⊙ 以独立的应用程式执行(并不需要浏览器)

⊙ 使用者必须手动去下载并安装这些原生App

⊙ 有一些商店与卖场来帮助使用者寻找你的App,目前app市场不计其数

移动Web App

⊙ 从移动装置上的浏览器访问

⊙ 不需要安装额外的软体

⊙ 软体更新只需要伺服器就够了

⊙ 因为现在没有什么商品或卖场提供这种App,所以如何搜寻这些移动Web App相当不简单。

四、版本控制

原生App

⊙ 使用者可以自由地选择是否更新软体版本,所以会出现不同使用者同时使用不同版本的情况

移动Web App

⊙ 所有的使用者都是用同样的版本

五、优势

原生App

⊙ 比移动Web App执行快

⊙ 一些商店与卖场会帮助使用者寻找原生App

⊙ 官方卖场的应用稽核流程会保证让使用者得到高质量以及安全的App

⊙ 官方会发布很多开发工具或者人工支援来帮助你的开发

移动Web App

⊙ 跨平台开发

⊙ 使用者不需要去卖场来下载安装App

⊙ 任何时候都可以释出App,因为根本不需要官方卖场的稽核

⊙ 如果你已经有了一个Web App,你可以使用 responsive web design来辅助改进

六、缺陷

原生App

⊙ 开发成本高,尤其是当需要多种移动装置来测试时

⊙ 因为是不同的开发语言,所以开发,维护成本也高

⊙ 因为使用者使用的App版本不同,所以你维护起来很困难

⊙ 官方卖场稽核流程复杂且慢,会严重影响你的释出程序

移动Web App

⊙ 无法使用很多移动硬体装置的独特功能

⊙ 要同时支援多种移动装置的浏览器让开发维护的成本也不低

⊙ 如果使用者使用更多的新型浏览器,那问题就更不好处理了

⊙ 对于使用者来说,这种App很难被使用者发现

附:原生App 与 移动Web App:您如何选择?

所以在你准备做移动App时,你应该先问问自己以下几个问题:

1. 你的应用是否需要使用某些装置的特殊功能,比如摄像头,摄像头闪光灯或者重力加速器

2. 你的开发预算是多少?

3. 你的应用是否一定需要网路

4. 你的应用的目标硬体装置是所有的移动装置还是仅仅只是一部分而已

5. 你自己已经熟悉的开发语言

6. 这个应用对于效能要求是否苛刻

7. 如何靠这个应用赢利

H5 APP即是一种框架型APP开发模式(HTML5 APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架部份,而应用的资料则是每次开启APP的时候,去云端取资料呈现给手机使用者。

原生APP又称Native App,该开发针对IOS、Android、Windows等不同的手机作业系统要采用不同的语言和框架进行开发,该模式通常是由“云伺服器资料+APP应用客户端”两部份构成,APP应用所有的UI元素、资料内容、逻辑框架均安装在手机终端上。

1、开发方面的区别(这个地方太专业啦,请教了团队的开发小伙伴)

目前React Native开发越来越火,微信小程式是基于React Native开发的,体验接近原生APP,发展前景值得重视。不过好在现在非原生APP同样可以呼叫蓝芽、相机等硬体,也能顺利释出到苹果APP store。

移动Web App

1、因为执行在移动装置的浏览器上,所以只需要一个开发专案

2、这种应用可以使用HTML5,CSS3以及JavaScript以及伺服器端语言来完成(PHP,Ruby on Rails,Python)

3、这里可没有标准的SDK,基本任意选择别忘了有一些跨平台的开发工具,比如PhoneGap, Sencha Touch 2以及Appcelerator Titanium等等。

原生App

1、每一种移动作业系统都需要独立的开发专案

2、每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows phone)等等

3、需要使用各自的软体开发包,开发工具以及各自的控制元件

2、能力方面的区别

移动Web App

只能使用有限的移动硬体装置功能。

原生App

能够与移动硬体装置的底层功能,比如个人资讯,摄像头以及重力加速器等等。对于这一点感触很深刻,2016年做新年H5营销小活动的时候,就是因为没有考虑到H5不能使用移动硬体端重力加速器而导致临时替换设计方案。

3、获取方法的区别

移动Web App

1、从移动装置上的浏览器访问

2、不需要安装额外的软体

3、软体更新只需要伺服器就够了

4、因为现在没有什么商品或卖场提供这种App,不过一般都是巢状在系统内部,或者内部系             统中使用

5、跨平台开发,使用者不需要去卖场来下载安装App

6、需要过度依赖网路,没有任何快取资料

7、任何时候都可以释出App,因为根本不需要官方卖场的稽核

8、如果你已经有了一个Web App,你可以使用 responsive web design来辅助改进(这也是优势?)

9、所有的使用者都是用同样的版本

原生App

1、直接下载到装置

2、以独立的应用程式执行(并不需要浏览器)

3、使用者必须手动去下载并安装这些原生App

4、有一些商店与卖场来帮助使用者寻找你的App,app store里面应有尽有。

5、原生型APP应用的安装包相对较大,包含UI元素、资料内容、逻辑框架

6、手机使用者无法上网也可访问APP应用中以前下载的资料。

7、原生型的APP可以呼叫手机终端的硬体装置(语音、摄像头、简讯、GPS、蓝芽、重力感应等)

8、APP应用更新新功能,涉及到每次要向各个应用商店进行提交稽核。

9、使用者可以自由地选择是否更新软体版本,所以会出现不同使用者同时使用不同版本的情况

即使两者之间有很大的区别,即使H5有一大堆的坑和问题,但是仍旧不妨碍移动WEB无所不在,移动web是目前唯一的支援各种装置访问的平台,也是唯一一个可供开发者释出移动应用的平台,它将各种移动互动与PC系统任务有效的结合在一起。而原生native app可以充分利用装置的特性,这一点是它得天独厚的优势。

正式因为它有复杂多变的CSS样式消耗了大量效能,它才有一个更有竞争力的优势——它带来了多样性的排版,能够细致到每一个字宽行高和风格的画素级处理,能够给你带来不一样的图文汇合的排版。

app原生开发和h5app有什么区别

原生是基于他们自己平台的语言开发,比如ios和安卓是2个平台,也就是要开发2份app。h5的开发完一个,两个系统可以相容(除错测试好)就可以,所以h5比原生app要便宜。 h5的app,载入速度不如原生,受网路影响大,体验度偏低,开发成本一般。 原生app,载入速度快,受网路影响较小,体验度很高,开发成本偏高。 很多市面上的h5虽然功能有了,效果却差了很大,要知道一款好的app光ui设计上就会比普通能凑合用的app高出几倍,也就是说正常二十万左右的appui可能也仅仅占了一万两万,甚至有的公司为了赚钱ui都是修改之前的成品app。

使用H5开发的App和原生App有什么区别?

1.H5的效能很差,一般经常改的地方可以用H5,比如论坛,咨询之类的,而且限制也是很大,很多效果是没办法做到的。GUI框架的WebView普遍是这样的。如果一个APP全部由H5来做(不太可能,送审很可能被拒),那么会显得非常卡。

2.用iOS SDK,如果实现热更新是比较麻烦的。对于论坛,咨询这种模组,动不动就改版,做起来比较头疼,用H5就很合适了。尤其在APP跨安卓和iOS的时候,这类模组如果直接用H5,那么就很容易共用。

H5网页App开发和纯原生的App的差距主要聚集在以下几个方面:

1、动画

动画有很多种,比如侧边栏选单的滑入滑出、元素的响应动画、页面切换之间的过场等等,在H5之下的众多实现方法都没有办法达到纯原生的效能。一般这些的话有几种不同的选择:css3动画、javascript动画、原生动画。

css3动画非常的消耗效能,如果某一个元素用到css3动画可能还看不出来,但大面积或过场使用css3动画会让app低端手机体验非常差。最好的选择一般是通过框架呼叫底层的动画,但不管怎么样等于在原来的程式码上包上了一层,效能还是不可避免的受到影响。

比如在一个新页面的载入上,如果呼叫底层动画要考虑的问题有两个,一个是本身资源页面的渲染问题,另一个是远端资料的获取。即便是这些动画能够很快的响应,但大量的css页面会导致渲染卡顿,滑入时可能会有白屏/机器卡顿的现象。为了解决这些效能问题又必须要用到预载入或模拟动画。即便是这样,滑入滑出的动画在低端的安卓机器上还是有很多问题,如果获取服务端资料处理的方式不合适,卡顿白屏的现象会更严重。具体看下面的资料获取方式。

2、获取服务端资料

首先要接受的是,这里的资料获取都是在资源页面上非同步完成的,因为只有这样才能让这些资源页面完成预载入或者渲染。但是非同步拿到的资料在填入页面中时可能会涉及DOM操作,众所周知,DOM操作非常消耗效能,如果页面小还好,页面稍大资料稍微复杂一点,频繁的DOM操作会导致明显的闪白。而且最重要的一点是,如果页面载入进来之后资料更新的速度太慢,也会让页面模板等待很长时间,对使用者体验又不友好,总不能每次开启都像浏览器一样等待重新整理是吧

这个问题如果没有得到解决,H5开发是很难承担大规模资料的页面,在它们之中频繁切换更是难上加难,那么肯定有人也会想到用MVVM的方式,其实我也写过一些基于MVVM的H5app开发,相对来说它们获取资料和更新资料的方式更敏捷更科学,但写的过程中又要注意很多H5独有的问题,这些问题在下面的页面切换里来讲。

3、页面切换

上面我们看到了几种不错的实现方式,比如预载入和模拟动画,甚至有批量的预载入,批量的截图模拟动画等等,虽然看起来很友好解决了不少问题,但事实上如果页面足够多就会引发另一个问题——页面的生存周期。

试想一下,如果引导页或者主页面快取了5个子页面的资源,在跳转到响应的子页面时又会快取这些子页面的下级页面资源,如此反复肯定会占据大量记忆体使APP的体验下降。那么怎么知道那些页面是需要的,最多快取多少页面,什么时候结束哪些页面的生存周期呢?在我用过的很多H5APP的框架里都没有对这些问题有一个完美的解答,因此在页面较多内容较多的app开发中可能会因这些资源分配的问题降低效能。

这时候我们回过头来再看看MVVM的资料载入问题,实际上不管哪个MVVM框架,写过的人都知道管理这种新型的前端程式码最重要的问题是记忆体的问题,你既要保证程式码写的足够优雅没有任何记忆体泄露问题,也要考虑到在页面生存周期结束时它们的控制器/页面资源是否得到释放,这对全域性有没有什么影响,在多个请求时也要合理的分配资源,甚至是复用这些父级页面传过来的快取资源等等。较小的APP可能并不会有这些问题,如果你想用纯H5来开发大型app,这很可能会浪费你很多时间——而且结果还不会让你满意。

4、Android/iOS的区别

很多人都说纯H5app开发一次编写就能编译Android/iOS两种不同的APP,大大降低了成本。实际上这个观点本身就是值得怀疑的,如果你写过这类APP就能明白我在说什么,它们既不省事,又存在很多BUG,除错时尤其繁琐。举一个很简单的例子,Android和iOS在返回上一页的处理方式上就有明显的区别,iOS的顶部bar在全屏下怎样处理,Android机器出现 *** art bar怎样处理页面的布局,呼叫底层硬体时怎样区分不同的场景等等,你需要写一个又一个机型和系统的判断,然后分别在Android和iOS下除错,最后你却发现这并没有卵用,累的要死却什么没学到,只有一堆不知道什么时候会过时的经验。

现在做H5混合APP开发的人很多,但是纯H5却很年轻,很多问题都没有很好的解决,这几个是我在做这些APP时考虑最多的问题。最后说一个很少人注意到的H5优势,大家大谈H5APP时都是快速开发、低成本、多平台等等,但我却觉得它和很多APP开发方式相比有一个不同之处——图文混合的排版。正是这些复杂多变的CSS样式消耗了效能,但是它带来了排版的多样性,能够细致到每一个字宽行高和风格的画素级处理,才是H5的优异之处。

原生APP和HTML5APP有什么区别?

原生App更流畅,这个是web app无法比的,但是原生的想更新就得下载新的包或者打补丁,这方面来说,web app的优势更大一些,从体验来说,肯定选择原生,但从开发效率和迭代成本,就选择web app

web app 跟原生app有什么区别

区别如下:

Web APP应用呈现以下特点:

(1)每次开启APP,都要通过APP框架向云网站取UI及资料;

(2)手机使用者无法上网则无法访问APP应用中的资料。

(3)框架型的APP无法呼叫手机终端的硬体装置(语音、摄像头、简讯、GPS、蓝芽、重力感应等)

(4)框架型APP的访问速度受手机终端上网的限制,每次使用均会消耗一定的手机上网流量;

(5)框架型APP应用的安装包小巧,只包含框架档案,而大量的UI元素、资料内容刚存放在云端;

(6)APP使用者每次都可以访问到实时的最新的云端资料;

(7)APP使用者无须频繁更新APP应用,与云端实现的是实时资料互动;

适用企业:电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。

Native App(原生型APP)应用呈现以下特点:

(1)每次获取最新的APP功能,需要升级APP应用;

(2)原生型APP应用的安装包相对较大,包含UI元素、资料内容、逻辑框架;

(3)手机使用者无法上网也可访问APP应用中以前下载的资料。

(4)原生型的APP可以呼叫手机终端的硬体装置(语音、摄像头、简讯、GPS、蓝芽、重力感应等)

wex5开发的app和原生的app有什么区别

原生App ⊙ 每一种移动作业系统都需要独立的开发专案 ⊙ 每种平台都需要独立的开发语言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等 ⊙ 需要使用各自的软体开发包,开发工具以及各自的控制元件 移动Web App

APP原生开发和H5开发以及APP混合开发三者有什么区别?

APP原生开发一般指 手机/PC程式 以及相关应用开发。

H5开发一般指 HTML5 PC或者 手机网页的开发。

APP混合开发 就是集中的两者以上的共同内容。

网站制作的APP和原生开发APP有什么区别

开发方面

原生开发的App

每一种移动作业系统都需要独立的开发专案,需要独立的开发语言,使用各自的软体开发包,开发工具以及各自的控制元件。

手机网站打包的APP

从原生演变过来的通过APP嵌入网站来是实现的,以及伺服器端语言来完成。

功效方面

原生开发的App能够与移动硬体装置的底层功能,比如个人资讯,摄像头以及重力加速器等等。

网站制作的App只能使用有限的移动硬体装置功能。

H5 和原生 APP 之间的区别

微信H5支付介面,这种介面可以用在 手机网站支付,也可以用于APP, 它的支付方式是通过浏览器吊起微信APP端进行支付,这种介面主要用于游戏,直播等行业,普通APP支付介面也就是SDK,只能用于APP,稳定。还有H5通道切换通道很方便,SDK的话就比较复杂。希望可以帮助到你,我司是第三方支付,接支付介面撩,希望采纳!