深刻分析：微信小程序与H5的区别

做为前端工程师，从前端的视角，为你们分析下微信小程序和HTML5与之间的主要区别

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

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并不是完整的浏览器，你们注意，我这里写的是“非完整的浏览器”，有如下几个缘由

小程序的开发过程当中会用到HTML5相关的技术(并不是所有)

小程序最后的发布上线须要微信审核，微信在不更新自身软件的状况下能够将小程序更新到自身软件内，这就联想到了React Native框架,而且已经有开发者在微信小程序的开发工具源码中发现使用了React和NodeWebkit库

官方文档中着重强调了脚本内是没法使用浏览器中经常使用的window对象和document对象（基于这一点，像zepto/jquery这种操做dom的库就被彻底抛弃了）

因此我我的认为，小程序的运行环境颇有多是微信开发团队基于浏览器内核彻底重构的一个内置解析器，针对小程序专门作了优化，配合本身定义的开发语言标准，提高了小程序的性能。

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

第二条是开发成本的不一样。

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

而当咱们面对一个微信小程序的开发需求时，咱们须要考虑什么呢？微信团队提供了开发者工具，而且规范了开发标准，前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，WXML中尽管所有是自定义标签，但官方文档中都有明确的使用介绍，相信上手应该是很是容易的；WXSS、JSON和JS文件中的写法稍有限制，但总体相差很少。在统一了这些标准以后，做为一个开发者，你会发现，本身只要专一写程序就能够了：

当须要调用后端接口时，调用发起请求API

当须要上传下载时，调用上传下载API

当须要数据缓存时，调用本地存储API

引入地图、使用罗盘、调用支付、调用扫码等等功能均可以直接使用

UI库方面，框架天然带有自家weui库加成

而且在使用这些API时，你不用再去顾虑浏览器兼容性，不用担忧生产环境中出现不可预料的奇妙BUG，可见微信小程序的开发成本确实相比以往的web开发低不少。

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

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

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

这条不管对于用户仍是开发者来讲，都是最直观的感觉。长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验老是不尽人意，须要不断的对项目优化来提高用户体验。可是因为微信小程序运行环境独立，尽管一样用html+css+js去开发，但配合微信的解析器最终渲染出来的是原生组件的效果，天然体验上将会更进一步。

「H5程序俱乐部」是一个专一微信小程序学习交流，相关外包/招聘需求信息发布的微信公众号。

「H5程序俱乐部」微信号：wxappclub 或者 微信扫一扫关注