小程序与H5的区别

阳光穿透心脏的1/2处 2021-10-01 04:06 393阅读 0赞

小程序由于刚推出来时开放的能力十分有限，所以在功能展示上会让普通用户感觉和H5一样，并没有什么特别之处，导致了部分人把两者混为一谈。**实际上，小程序和H5是两种不同的东西**。

通过百度词条可以知道，HTML英文全称为**Hyper Text Markup Language**，即**超文本标记语言**。而**HTML5是超文本标记语言的第五次修订版本**。

简单来说，**小程序是一种应用**，运行的环境是微信（App）；**H5是一种技术**，依附的外壳是是浏览器。

根据微信官方的说明，微信小程序的运行环境有 3 个平台，iOS 的 WebKit（苹果开源的浏览器内核），Android 的 X5 (QQ 浏览器内核)，开发时用的 nw.js（C++ 实现的 web 转桌面应用）。

平台                  渲染                                                   js 运行环境  
iOS                   WKWebView                                     JavaScriptCore  
Android             X5 基于 Mobile Chrome 37 内核      X5 JSCore  
开发工具           Chrome WebView                             nw.js

**从****「前端开发」****的视角来看**，微信小程序和H5也存在着多方面的不同。概括来说有以下**四个方面的区别**。

**一、运行环境的不同**

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82OTU2NzM4LTI3MmUwODI0MDczYzFlODk_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcCU3Q2ltYWdlVmlldzIvMi93LzU3OS9mb3JtYXQvd2VicA][]

H5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，因为小程序的开发过程中只用到一部分H5技术。

小程序的运行环境是微信开发团队**基于浏览器内核完全重构的一个内置解析器**，**针对性做了优化**，配合自己**定义的****开发语言标准**，提升了小程序的性能。

官方文档表明脚本内无法使用浏览器中常用的window对象和document对象（基于这一点，像zepto/jquery这种操作dom的库就被完全抛弃了）。

不过微信给开发者提供了开发工具，内置了**编程、调试、开发环境**以及**发布**，开发者只需按照官方文档进行开发，就能保证小程序在微信内稳定运行。

**二、开发成本的不同**

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82OTU2NzM4LWJkMTU1Njc3MDc5OWEzOGM_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcCU3Q2ltYWdlVmlldzIvMi93LzQwMC9mb3JtYXQvd2VicA][]

**H5 的开发**，涉及**开发工具**（vscode、Atom等）、**前端框架**（Angular、react等）、**模块管理工具**（Webpack 、Browserify 等）、**任务管理工具**（Grunt、Gulp等），还有**UI库选择**、**接口调用工具**（ajax、Fetch Api等）、**浏览器兼容性**等等。

尽管这些工具可定制化非常高，大部分开发者也有自己的配置模板，但对于项目中各种外部库的版本迭代、版本升级，**这些成本加在一起那就是个不小数目了**。

而**开发一个微信小程序**，**由于微信团队提供了开发者工具，并且规范了开发标准，则简单得多**。前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，WXML，官方文档中都有明确的使用介绍，开发者按照说明专注写程序就可以了。

需要调用后端接口时，调用发起请求API；需要上传下载时，调用上传下载API；需要数据缓存时，调用本地存储API；引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用；UI库方面，框架带有自家weui库加成。

并且在使用这些API时，不用考虑浏览器兼容性，不用担心出现BUG，显而易见**微信小程序的开发成本相对低很多**。

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

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82OTU2NzM4LTQ4NzljOWU5YmE5YjNiZDQ_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcCU3Q2ltYWdlVmlldzIvMi93LzY5MC9mb3JtYXQvd2VicA][]

微信小程序相对于H5能获得**更多的系统权限**，比如网络通信状态、数据缓存能力等，这些系统级权限都可以和微信小程序无缝衔接。

而这一点恰巧是H5 被诟病的地方，这也是HL5的大多应用场景被定位在业务逻辑简单、功能单一的原因。

**四、运行流畅度的不同**

![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82OTU2NzM4LWVkNGFiNjI1OWNlMDExZDE_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcCU3Q2ltYWdlVmlldzIvMi93LzEwMDAvZm9ybWF0L3dlYnA][]

在**运行****流畅度**方面，无论对于用户还是开发者，都**可以直观体验出两者的差异**。这也是普通大众最容易区分小程序与H5的一点。

打开H5，实际上是打开一个网页，而**网页需要在浏览器中渲染**。所以加载这一过程，会给人明显的**「卡顿」**感觉，面对复杂的业务逻辑或者丰富的页面交互时尤为明显。

而微信小程序，它的代码**直接在微信上运行**，省去了通过浏览器渲染的步骤，因此，在微信中使用小程序，才**会比H5流畅很多**。

除了首次打开需要几秒的加载时间外，小程序各个页面的切换、跳转等体验已经**媲美原生App**，有着同样的**柔丝般顺滑**的效果。

概括来说，小程序相对H5有着**开发成本低**、**功能更丰富**、**使用体验更佳**的优点。其实大家最应该关注的一点是，**小程序领域目前是一片蓝海，对于个人就业、商家做生意以及技术团队创业都有着不少的机会，大家应该多想想怎么分得这块蛋糕**。

作者：造程序  
链接：https://www.jianshu.com/p/bb644541b7e5  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82OTU2NzM4LTI3MmUwODI0MDczYzFlODk_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcCU3Q2ltYWdlVmlldzIvMi93LzU3OS9mb3JtYXQvd2VicA]: /images/20210812/e2c8f42545c1466db7068d5622441d6b.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82OTU2NzM4LWJkMTU1Njc3MDc5OWEzOGM_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcCU3Q2ltYWdlVmlldzIvMi93LzQwMC9mb3JtYXQvd2VicA]: /images/20210812/503d2d654ec54687882613bd8930edb0.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82OTU2NzM4LTQ4NzljOWU5YmE5YjNiZDQ_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcCU3Q2ltYWdlVmlldzIvMi93LzY5MC9mb3JtYXQvd2VicA]: /images/20210812/c0b7f7fc243d4c6e80eacc35ddfab5a4.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy82OTU2NzM4LWVkNGFiNjI1OWNlMDExZDE_aW1hZ2VNb2dyMi9hdXRvLW9yaWVudC9zdHJpcCU3Q2ltYWdlVmlldzIvMi93LzEwMDAvZm9ybWF0L3dlYnA]: /images/20210812/1c467708fce842f992649a8ffb30b2ef.png