摘要：作为前端工程师，从前端的视角，为大家分析下微信小程序和与之间的主要区别第一条是运行环境的不同。但是由于微信小程序运行环境独立，尽管同样用去开发，但配合微信的解析器最终渲染出来的是原生组件的效果，自然体验上将会更进一步。
作为前端工程师，从前端的视角，为大家分析下微信小程序和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 或者 微信扫一扫关注
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/55735.html
摘要：使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。移动端实践前端掘金说起，相信大家并不陌生。 Sticky Footer，完美的绝对底部 - 前端 - 掘金写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为...
摘要：融入微信生态时刻记得微信小程序是在微信内，与微信的所有功能息息相关，要尽可能深入地融入微信生态，不要孤立地做设计。胜在轻巧微信小程序的设计方案需要遵从轻巧的原则。 微信小程序公测后，开发者非常热情，都有很高的期待，都想抓住这一波红利。但是热情背后需要冷静，我们需要搞清楚两个问题： 微信想要我们做什么？微信小程序可以做什么？ 微信想要我们做什么？ 首先来弄清楚微信的意图。之前张小龙曾公开...
摘要：我也是非常不辞劳苦地想要知道这个答案，但亲身体验之后，可以告诉你对苹果用户来说，除了上面说到的东西之外，貌似是没有区别的。在安卓系统上，小程序，真的像是一个小小的程序一样在运行。这就是它与在微信公号中内嵌的区别，提升了用户体验。 很多人可能会问：微信小程序和在微信里面浏览一个网页有什么区别？ 首先，小程序的运行是全屏的，界面跟进入了一个APP很像，更为沉浸跟在微信里面访问h5不一样；其...
摘要：不久前微信小程序一出即在圈子掀起一波讨论，不管是产品方向还是技术。且不说这种愿景是否可能出现，至少，初期阶段，微信小程序的开发是各家公司避免不了的，甚至部分公司会放弃。 不久前微信小程序一出即在IT圈子掀起一波讨论，不管是产品方向还是技术。而其中，笔者听到最多的声音就是：前端又一次要火了，native端赶紧转方向吧。 真是这样吗？ 1、小程序的冲击 小程序出现的大背景是：流量红利时代已...
摘要：春招结果五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品会电商前端研发部大数据与威胁分析事业部京东精锐暑假实习生的腾讯的是早上打过来的。 春招结果 五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品...
阅读 2631·2021-10-14 09:42
阅读 564·2021-10-11 10:57
阅读 515·2019-08-30 15:54
阅读 1771·2019-08-30 13:50
阅读 1581·2019-08-30 11:19
阅读 827·2019-08-29 12:38
阅读 1301·2019-08-26 11:51
阅读 1273·2019-08-26 10:48
