深入分析：微信小程序与H5

之间的差异 作为前端工程师，从前端角度出发，为大家分析微信小程序和HTML5之间的主要区别

第一条是运行环境的不同。

传统的HTML5运行时环境是一个浏览器，包括webview，微信小程序的运行环境不是一个完整的浏览器。请注意，由于多种原因，我正在撰写“非完整浏览器”。

小程序的开发将使用html5相关技术（并非全部）

小程序最终版本需要微信审查，微信可以更新小程序到自己的软件而不更新自己的软件，这与ReactNative框架有关，开发人员已经发现在微信小程序开发工具源代码和NodeWebkit库中使用react

官方文档强调了无法使用浏览器中常用的窗口和文档对象（基于此，运行dom的zepto/jQuery等库完全被丢弃）

所以我个人认为小程序的操作环境可能是基于完全重构的微信开发团队的浏览器内核的内置解析器。它针对小程序进行了优化，并且通过自身定义的开发语言标准，它提高了小程序的性能。

不过由于微信给开发者提供了开发工具，而开发工具中也内置了编程，调试，开发环境，发布于一身，我们也不用再探讨它的最终运行环境了，只要按照官方文档进行开发就可以了。并且从微信团队给开发者提供开发工具这一举动，让我联想到了苹果给开发者提供的X-CODE开发工具，可以想象微信的“野心”可见一斑

第二条是开发成本的不同。

这里我提出了一个问题，当我们面对一个Html5web开发需求时，我们需要考虑什么呢？抛去开发工具（vscode，sublimtext，原子等）不谈，大到前端框架（角，反应，VUE，骨干等），模块管理工具（Webpack，Browserify等），任务管理工具（Grunt，Gulp等），小到UI库选择，接口调用工具（ajax，Fetch Api等），浏览器兼容性等都要我们一一考略，再不济用jqery插件写H5，也要在开发过程中去寻找合适的的jQuery插件来配合项目。尽管这些工具可定制化非常高，并且提高了开发者的开发效率，但我相信项目开发的配置工作已经消耗了不少精力，尽管大部分开发者都有自己的配置模板，但长久以来对于项目中使用的各种外部库的版本迭代，版本升级所产生的成本应该也不低。

XX 当我们面对微信小程序的开发需求时，我们需要考虑什么？ 微信团队提供开发人员工具并标准化开发标准。常见的前端HTML和CSS变为微信自定义WXML，WXSS，虽然WXML都是自定义标签，但官方文档中有明确的用法。我相信它应该很容易上手; WXSS，JSON和js文件的编写方式略有限制，但整体类似。统一这些标准后，作为开发人员，您会发现自己专注于编写程序：

需要调用后端接口时调用请求请求API

需要上传和下载时，请调用上传和下载API

在需要数据缓存时调用本地存储API

可以直接使用地图，使用指南针，呼叫付款，调用扫描码等

在UI库方面，框架自然有自己的weui库添加

使用这些API时，您不必担心浏览器兼容性，也不必担心生产环境中出现不可预测和奇妙的错误。可以看出，微信小程序的开发成本确实远低于之前的Web开发。

第三条是获取系统级权限的不同。

微信小程序可以获得比HTML5 Web应用程序更多的系统权限，例如网络通信状态，数据缓存能力等。这些系统级权限可以与微信小APP软件开发进行比较

该程序的无缝集成，正式声称具有Native App的流畅性能，正是HTML5 Web应用程序经常受到批评的地方。这就是为什么HTML5的大多数应用场景都位于简单的业务逻辑和单个功能中的原因。

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

这是用户和开发人员最直观的体验。长期以来，当HTML5应用程序面临复杂的业务逻辑或丰富的页面交互时，其体验总是不尽如人意，需要不断优化项目以增强用户体验。但是，由于微信小程序运行时环境是独立的，虽然它也是用html + css + js开发的，但是带有微信的解析器最终呈现了本机组件的效果，并且自然体验将更进一步。