微信小程序和H5的区别有哪些？

近年来，随着h5和微信小程序开发的流行，给广告行业带来了一抹新的绿色。今天，小编来分析一下微信小程序和HTML5的主要区别。

首先是操作环境的不同。

传统HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境不是一个完整的浏览器。请注意，我在这里写了“不完整的浏览器”，原因如下。相关技术(并非全部)将用于小程序的开发。

小程序的最终发布和上线需要微信审核，微信可以在不更新自己软件的情况下将小程序更新到自己的软件中，这与ReactNative框架相关联，有开发者发现微信小程序的开发工具源代码中使用了React和NodeWebkit库。

官方的文档强调浏览器中常用的窗口对象和文档对象不能在脚本中使用(基于此，像zepto/jquery这样操作dom的库被彻底抛弃。

所以我个人认为小程序的运行环境很可能是微信开发团队基于浏览器内核完全重构的内置解析器，专门针对小程序进行优化，提高小程序的性能，符合自定义开发语言标准。

不过，由于微信为开发者提供了开发工具，而且开发工具也内置了编程、调试、开发环境和发布，所以我们不需要讨论它最终的运行环境，只要按照官方文档进行开发就可以了。

二是开发成本的差异

在这里提出一个问题。当我们面对一个HTML5 web开发需求时，我们需要考虑什么？除了开发工具(vscode、sublimtext、Atom等。)，前端框架(Angular，react，vue，backbone等。)、模块管理工具(Webpack、Browserify等。)、任务管理工具(Grunt、Gulp等。)，从UI库的选择，接口调用工具(ajax，Fetch Api等)。)、浏览器兼容性等等，我们需要一一查看。如果不能用jqery插件编写H5，我们还需要在开发过程中找到合适的jquery插件来配合项目。虽然这些工具具有很强的可定制性，提高了开发者的开发效率，但是我相信项目开发的配置工作已经消耗了大量的精力。虽然大部分开发者都有自己的配置模板，但是项目长期使用的各种外部库的版本迭代和版本升级的成本应该不低。

面对一个微信小程序的开发需求，我们需要考虑什么？微信团队提供开发者工具，规范开发标准。前端常见的HTML和CSS成了微信的自定义W。当需要调用后端接口时，调用发起请求。

需要上传下载时，调用上传下载。

当需要数据缓存时，调用本地存储。

介绍地图、使用指南针、调用支付、调用扫码等功能都可以直接使用。

库方面，框架自然有自己的weui库加成。

而且在使用这些API的时候，你不用担心浏览器兼容性或者生产环境中意想不到的奇妙bug。可见微信小程序的开发成本比之前的web开发要低很多。

三是获取系统级权限的差异

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

四是应用在生产环境下的运行流畅度。

这是用户和开发者最直观的感受。长期以来，HTML5应用在面对复杂的业务逻辑或丰富的页面交互时，其体验总是不尽如人意，需要不断优化项目来改善用户体验。但由于微信小程序的独立运行环境，虽然也是用html+css+js开发，但用微信的解析器最终会渲染出原生组件的效果，自然体验会更进一步。