NEWS
结合设计、研发与营销实践经验,提供有价值的互联网资讯
H5和小程序有什么区别?
发布时间:2022-03-01 浏览数:212

    我们经常说的 H5 是一种不标准的叫法,可以理解为只是一种技术,大家说得最多的 H5 主要是指用在移动端的网页,其实 PC 电脑版也一样可以使用 H5 技术。而小程序,这里特指微信小程序,是在微信 APP 基础上支持的一种应用形式,完全依赖于微信 APP 环境。主要通过以下几个方面做一个对比:

一、运行环境的不同

    H5 既然是网页,那么依赖的外壳主要是浏览器,因此只要有浏览器,就可以使用。比如手机内置的浏览器,APP 的 web-view 组件,以及小程序提供的 web-view 组件,都可以打开 H5 页面;而微信小程序只能依赖微信客户端,因为小程序的开发过程中只用到一部分H5技术。小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对性做了优化,配合自己定义的开发语言标准,提升了微信小程序开发的性能。 

二、开发成本的不同

    H5的开发,涉及开发工具(vscode、Atom等)、前端框架(Angular、react等)、模块管理工具(Webpack 、Browserify 等)、任务管理工具(Grunt、Gulp等),还有UI库选择、接口调用工具(ajax、Fetch Api等)、浏览器兼容性等等。尽管这些工具可定制化非常高,大部分开发者也有自己的配置模板,但对于项目中各种外部库的版本迭代、版本升级,这些成本加在一起那就是个不小数目了。而开发一个微信小程序,由于微信团队提供了开发者工具,并且规范了开发标准,则简单得多。前端常见的HTML、CSS变成了微信自定义的WXML、WXSS,WXML,官方文档中都有明确的使用介绍,开发者按照说明专注写程序就可以了。 

三、获取系统级权限的不同

    微信小程序开发相对于H5能获得更多的系统权限,比如网络通信状态、数据缓存能力等,这些系统级权限都可以和微信小程序无缝衔接。 而这一点恰巧是H5被诟病的地方,这也是H5的大多应用场景被定位在业务逻辑简单、功能单一的原因。

四、运行体验度的不同

    在运行流畅度方面,无论对于用户还是开发者,都可以直观体验出两者的差异。这也是普通大众最容易区分小程序与H5的一点。 打开H5,实际上是打开一个网页,而网页需要在浏览器中渲染。所以加载这一过程,会给人明显的「卡顿」感觉,面对复杂的业务逻辑或者丰富的页面交互时尤为明显。而微信小程序开发,它的代码直接在微信上运行,省去了通过浏览器渲染的步骤,因此,在微信中使用小程序,才会比H5流畅很多。 除了首次打开需要几秒的加载时间外,小程序各个页面的切换、跳转等体验已经媲美原生App,有着同样的丝滑柔顺的效果。