移动APP和HTML5的区别是什么

html-css014

移动APP和HTML5的区别是什么,第1张

想了解他们之间的区别,先看一下各自的简单定义吧。

app:主要是指application(应用程序)

HTML是hypertext markup language(超文本标记语言)

主要区别有

1.应用环境:

   手机原生app面前比较流行环境是Android和IOS两个版本。

HTML5主要是在浏览器中进行运行和渲染,其实浏览器是App的一种。

2.相关编程语言:

 移动APP的编程语言一般是:c#,Java, c,vb 等...

 HTML5的编程语言则是:html5,css3,javascript,php/jsp/asp 等...

3.开发成本和周期:

 移动APP相对来说开发成本比较高,周期也比较长。html主要应用于前端web开发,开发制作周期短,费用少。

4.兼容性

 手机app在不同的系统中需要开发不同版本(例如前面所说的Android和IOS),而html5可以跨平台主要有浏览器就可以运行。

5.用户体验。执行效率,显示效果,可以调用的系统权限都是不一样的。

在用户体验和表现这个方面 APP提供用户展示图形界面和数据展现的丰富性方面要比HTML5好。而且调用的系统权限APP相对权限要高。

总结:html5和app各有自己优势和不足,需求者应该根据各自的特点来选择合适的语言。

5.背景音乐&音效

H5页面要炫酷,画面生动还是不够的,一定要配合生动的音乐。因此可以主动跟设计或产品沟通,让他们可以提供音乐资源,分分钟导致UV猛涨有木有!当然,有了音乐,前端也不是直接引用的,还是有点要求:

1.音乐不宜过长,30s为佳,而且音乐要加上渐现渐隐效果,方便循环播放

2.音乐体积要小,音质和流量,在手机上还是优先考虑流量吧。

一般背景音乐体积可以接受的范围是200K以下,若太大,可以使用格式工厂等软件,降低它的比特率和声道来改变体积。接着,只需要简单引用。这里有个问题,IOS是不能自动播放音乐的,一定要触发一个用户交互事件,例如点击。

但是有一种hack的方法可以让IOS微信侧页面自动播放(SAFARI依旧无效):通过new一张图片,监听一张图片的onload事件,结束后回调执行音频播放audio.play()即可,原理估计是动了dom结构,相当于执行了一次交互。(有人也用过createEvent模拟,原理也是动了dom。)因此,记得暴露一个音乐关闭/打开的按钮,不然肯定被用户骂死。

6.有趣的loading

Loading页还是要有的,万一用户网速慢呢?以上做了那么多事,如果没有资源加载都是玩不来的,因此还需要一个loading的支持。一般情况下页面体积大于3m则要加上loading页。然而loading还是可以做得很有趣的,一般的做法是:

1.引入品牌,例如APP宣传页

2.引入有趣动画,放一个贱贱的人物跳舞给你看

3.一切从简,用CSS3简单动画。

当然,真正要做到高效制作动态H5页面,还是靠积累,因此平时做好的细节动画自己都积累起来,下次分分钟就能用得上。