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的话就比较复杂。希望可以帮助到你,我司是第三方支付,接支付介面撩,希望采纳!
不一样,需增加自适应标签来保持一样。
代码如下:
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解释:Viewport指用户网页的可视区域,content中的“width”指的是虚拟窗口宽度,上面代码意为虚拟窗口/页面宽度初始比例为1,最小比例为1,最大比例为1,用户不可扩展,页面不可缩放。
扩展资料:
HTML5的事件属性和异常处理
事件属性
HTML 5 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性,可以把它们插入 HTML 标签来定义事件行为。
HTML 5 中的新事件属性:
onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
APP和HTML5有啥区别:1.html5的app比较轻巧,原生态app如比较正规,html5实现的功能有限,只能实现一些轻型的交互场景,而app则可以完美解决。
2.html5虽然可以跨平台,可是浏览器有个加载速度,对于用户体验上说,有个加载的等待,就比如你用qq浏览器打开百度,和直接使用百度app是两种体验。浏览器打开百度,还得有个加载,而百度app则duang的出下了输入框界面。
3.html5的app对于导航来说,目前有个弊端。而原生态app则在页底固定悬浮着导航菜单。
4.html5 app也有自己的优势,比如有的app页面想要分享出来,则采用html5 app。也比如滴滴打车集成在微信里一样,如果手机中没有滴滴打车的app,则直接可以在默认浏览器上加载出来,进行打车。
html5 app在设计时需要注意的一些要点:
1)各手机浏览器的兼容测试
2)底层服务的调取(能调取,但只有当其是核心功能时才保留 eg:新浪、美团等皆去掉了头像上传功能)
3)注意离线数据存储,减少数据请求频率。
4)考虑保存用户的哪些数据:设置、个人数据、阅读锚点、跳出页面等。【这点一般说的就是导航菜单】
5)避免动效与浏览器的交互冲突
6)按顺序 异步加载
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)