微信小程序和H5网页之间有什么区别

本博主语录：小程序和H5网页的主要开发语言都是 JavaScript ，所以通常小程序的开发会被用来同普通的网页开发来做对比。两者有很大的相似性，对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

区别之一：运行环境不同

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中仅需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	X5 JSCore	X5浏览器
小程序开发者工具	NWJS	Chrome WebView

网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可，上线并不需要审核，体积规模、运营规范、转发到朋友圈等营销功能也无限制。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目、提交审核，严格审核通过后才能上线，上线后运营中，如果违规还有可能会被封号下架。

区别之二：开发成本不同

当开发一个H5微网站时，除了域名服务器备案、服务器开发语言等，我们还需要考虑开发工具环境、前端框架、模块管理工具、任务管理工具、团队协作代码提交工具、组件UI库、接口调用工具、各平台、各品牌的浏览器兼容性等。即使使用jquery插件写，也要在开发过程中去寻找合适的jquery插件来配合项目。尽管这些工具可定制化非常高，并且提高了开发者的开发效率，但我相信项目开发的配置工作已经消耗了不少精力，尽管大部分开发者都有自己的配置模板，但长久以来对于项目中使用的各种外部库的版本迭代、版本升级所产生的成本应该也不低。

而当我们面对一个微信小程序的开发需求时，我们需要考虑什么呢?微信团队提供了开发者工具，并且规范了开发标准，前端常见的HTML、CSS变成了微信自定义的WXML、WXSS，WXML中尽管全部是自定义标签，但官方文档中都有明确的使用介绍，上手非常容易。甚至开发者可以使用云开发开发微信小程序，弱化后端和运维概念，从此无需搭建服务器，即可使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。在统一了这些标准之后，作为一个开发者，你会发现，自己只要专注写程序逻辑就可以了！

至于调用自家服务器、云开发接口、微信app中的任何原生能力，都有封装好的API可供调用

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

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

区别之三：用户体验感不同

H5最大诟病在于页面之间切换会有白屏卡顿现象，频繁在多页面之间来回切换等待时间较长，受网络环境影响，加载图片、音视频耗费流量需要加载时间较多。

小程序虽然本质上任然是网页，但是由于微信小程序运行环境独立，尽管同样用html+css+js去开发，但配合微信的解析器最终渲染出来的是原生组件的调用效果，自然体验上将会更进一步，无白屏卡顿，浏览速度很快，带来流畅的极致体验效果。

区别之四：策略定位不同

从营销传播角度看，H5可以转发至朋友圈这个巨大的流量入口，形成一传十、十传百的网络规模效应，其次，H5网站内容可以被百度搜索到，H5中的图文内容也可以选择复制粘贴出来，而小程序并不符合营销工具的定位，以上说的的功能都做不到，更多是做连接，将人与服务或设备连接，用完即走，无需关注公共号，全程无营销信息推送的工具。

本节课为大家总结了小程序诞生的历史背景，下节课我将介绍：微信小程序的特色与优势，请一定要认真坚持学习，

你也可以订阅并分享转发至微信朋友圈，支持我们！