小程序与HTML5有什么区别

html-css06

小程序与HTML5有什么区别,第1张

小程序出生以后,有很多人将它与 HTML 5 进行比较,甚至有人把它们混淆在一起。

但实际上,小程序和 HTML 5 本质上是两种不同的东西小程序是计算机程序,而HTML 5 则是互联网网页

1. 对用户而言

我们打开 HTML 5,实际上是打开一个网页,而网页需要在浏览器中渲染。

所以,在微信上点开 HTML 5,需要完成网页加载的步骤,这就会给人一种「卡」的感觉。

而对于微信小程序来说,它的代码可以直接在微信上运行,省去了通过浏览器渲染的步骤,在体验上会胜过 HTML 5 不少。

总而言之,在微信中使用小程序,会比 HTML 5 流畅很多。

2. 对开发者而言

对于开发者来说,相比 HTML 5,小程序可以节省大量的服务器资源。

那是因为,HTML 5 需要开发者的服务器向用户发送 HTML 5 代码,而微信会帮开发者分发他们的小程序。

第一、运行环境不同

传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器。

小程序的开发过程中会用到HTML5相关的技术(并非全部)。

第二、开发成本的不同

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

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

第四、应用在生产环境的运行流畅度

长久以来,当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时,它的体验总是不尽人意,需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立,尽管同样用html+css+js去开发,但配合微信的解析器最终渲染出来的是原生组件的效果,自然体验上将会更进一步。

微信小程序官方提供了开发工具,但是并不太好用,一般都是要配置 vscode 安装插件来开发,像我使用的是 intellij idea ,安装插件来支持小程序的代码提示,然后在微信开发者工具上预览。工具上的问题倒不大,代码提示该有的都有了,开发效率关键还得看框架和库。

微信小程序是支持 typescript 的,官网提供了类型库,可以通过开发者工具直接创建 ts 项目。百度小程序目前是不支持的,效率就要低很多。

微信小程序的数据绑定之前一直是单向的,这个很多时候不太方便,要多写很多代码,好在从 2.9.3 开始可以双向绑定了,效率上也提升了不少。百度小程序目前还不支持,其它的平台了解的不多。

由于小程序都不支持 dom 操作,而是内部提供了一套类 dom 的查询api,所以有一定的学习成本,也不能轻易的将 html5 程序转换到小程序。同时,各种涉及 dom 操作的 js 库也无法使用,canvas 库也不行,仅有少数的库专门做了小程序版本,如 echarts。从这一点来看,效率的影响还是很大的,毕竟项目开发是需要借助于很多开源库的,改造成支持小程序的版本是很耗费时间和精力的。

总体上来说,微信小程序的开发效率还行,但是很多现有的 js 库不能利用,开发效率肯定比不上使用 vue 全家桶开发 web 应用。

硬件调用和系统原生特性

这个确实是小程序的优势,微信的小程序有丰富的设备接口,可以调用蓝牙、nfc和感应器等,浏览器中仅个别浏览器可以调用蓝牙。如果有硬件调用方便的需求,就只能放弃纯 html5 了。

统计分析

微信小程序有个数据助手,其它平台的基本上都有,在数据助手中可以查看使用情况,对用户和页面的信息进行统计。

对于 web 站点,要做这么一套东西,还是有不少的工作量的,数据库的成本也要增加,可以借助于第三方平台,像百度统计之类的。如果是前后端分离,前端 spa 模式纯静态,可以将前端程序放在 cdn 中,cdn 服务一般都会提供统计信息,但是会弱一些。

小程序的云开发功能

微信小程序提供了云开发功能,可以在小程序中使用文件存储、数据库和云函数,现在还提供了云托管和静态网站,百度小程序也有提供支持。相当于后端开发需要用到的技术都给你集成好了,并且还有免费额度,大大降低了成本,你甚至可以零硬件成本起步,非常适合小项目。

性能

小程序性能会更好吗?这个可不一定,就我的经验来看,微信小程序流畅度还可以,没有详细测试过,但是百度小程序就比较的拉跨了,明显的卡,页面上的图片资源加载很慢。我之前使用百度官方的工具移植微信小程序到百度,结果百度app中小程序的运行效果非常差,卡顿明显。

但是小程序确实比普通的 web 应用更快,这主要是因为运行小程序的 app 中自带了运行环境,集成了框架和一些 ui 库,这样小程序本身就可以很小。因此,加载小程序的速度是可以比网页快很多的。但是,web 有 pwa 技术啊,并且主流浏览器都支持了。win10 自带浏览器 edge 支持将支持 pwa 的站点添加到桌面,直接独立窗口启动,ios 和安卓也都是支持的,可以让支持 pwa 的站点像原生应用一样直接从桌面启动,脱机运行,不需要先启动微信这样的小程序容器程序。

不仅如此,微软官方还支持将 pwa 直接发布到应用商店:将渐进式 Web 应用发布到Microsoft Store 。

相比 html5 ,小程序是没有性能优势的,html5 如果想进一步提升性能,还可以使用 WebAssembly 技术。

总结

小程序最大的价值应该就是其平台本身的生态了,微信小程序就提供了很多便利:

便捷接入微信登录和微信支付,与视频号,消息等对接

提供文本和图片内容安全检查功能,这些功能要自己做成本非常高

提供ai功能,提供视觉算法,支持人脸识别

有丰富的设备接口,支持对蓝牙、nfc和各种感应器等进行控制

自带统计分析功能

提供云开发服务,前期甚至可以零硬件成本,个人觉得云开发不适合大型项目

内置广告组件,提供了流量变现功能

虽然小程序提供了很多便利,但是个人觉得还是要慎重选择,小程序是需要与平台绑定的,各个平台推出自己的小程序就是要将软件商拉到自己的生态中去。如果你需要小程序给你提供的这些便利,团队没有预算开发各个平台的不同版本 app,那还是可以考虑的,使用小程序能降低不少成本,甚至还可以省去域名费用。

如果你喜欢自由,不愿受制于平台,还是 html5 吧。真有接入微信的需求,还可以考虑在 html5 的基础上使用 wx-sdk 接入公共号网页开发,可以做一个兼容层,在非微信内置浏览器内使用或微信调用失败的情况下回退到纯 html5。

个人认为,还是 html5 优先,html5 满足不了需求再考虑小程序和 app,毕竟 html5 是国际标准,几乎被所有操作系统原生支持,真正的跨平台一码多端,这才是未来。