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

引自该博主：小程序和H5网页的主要开发语言是相同的，所以通常会将小程序的开发与普通的网页开发进行比较。两者之间有很大的相似之处。对于前端开发者来说，从Web开发迁移到小程序开发的成本并不高，但两者还是有一些区别的。

区别之一：运行环境不同

网页开发渲染线程和脚本线程是互斥的，这就是为什么长期脚本运行可能会导致页面无响应的原因。在小程序中，两者是分离的，运行在不同的线程中。 Web开发人员可以使用各种浏览器公开的DOM API来选择和操作DOM。前面说过，小程序的逻辑层和渲染层是分离的。逻辑层运行在应用程序中，没有完整的浏览器对象，因此缺少相关的DOM API和BOM API。这种差异导致一些前端开发非常熟悉的库，比如 等，无法在小程序中运行。同时环境也不同，所以有些npm包无法在小程序中运行。

Web开发者需要面对的环境是各种各样的浏览器。在PC端需要面对IE、QQ浏览器等，在移动端则需要面对各种浏览器，以及iOS、系统。在开发小程序的过程中，我们只需要面对iOS和微信客户端两大操作系统，以及小程序开发者工具来辅助开发。小程序中的三大运行环境也各有不同。

运行环境

逻辑层

渲染层

iOS系统

安卓

X5

X5浏览器

小程序开发者工具

西北地区

Web开发人员开发网页时，只需要使用浏览器并使用一些辅助工具或编辑器即可。无需审核即可上线，无大小、操作规范、转发好友等营销功能限制。 。小程序的开发则不同。需要申请小程序账号、安装小程序开发者工具、配置项目、提交审核。必须经过严格审核才可以上线。上线后运营，如有违规，您的账号可能会被封禁。架子。

区别二：开发成本不同

开发H5微网站时，除了域名服务器注册、服务器开发语言等之外，我们还需要考虑开发工具环境、前端框架、模块管理工具、任务管理工具、团队协作代码提交工具、组件UI库，以及接口调用工具，各平台各品牌的浏览器兼容性等等。即使使用插件来编写，在开发过程中还是要找到合适的插件来匹配项目。虽然这些工具的可定制性很高，提高了开发人员的开发效率，但我相信项目开发的配置工作消耗了很多精力。虽然大多数开发者都有自己的配置模板，但长期以来，他们无法对系统中使用的各种外部库进行版本迭代和版本升级所产生的成本也应该很高。

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

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

UI库方面，框架自然自带了自己的weui库。

并且使用这些API时，您不再需要担心浏览器兼容性或生产环境中不可预测的错误。可见，微信小程序的开发成本确实比以前的网页开发要低很多。

区别三：用户体验不同

H5最大的诟病就是页面切换时会出现白屏卡顿的情况。频繁地在多个页面之间来回切换需要较长的等待时间。受网络环境影响，加载图片、音频、视频非常消耗流量，需要大量的加载时间。

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

差异四：战略定位不同

从营销传播的角度来看，H5可以转发到朋友圈这个巨大的流量入口，形成波及数十、数百人的网络规模效应。其次，H5网站内容可以通过百度进行搜索，H5中的图文内容也可以进行搜索。选择复制粘贴出来，但小程序不符合营销工具的定位。它无法执行上述功能。它更多的是关于将人们与服务或设备连接起来。使用后即可离开。无需关注公众号。没有工具可以全程推送营销信息。

本课总结了小程序诞生的历史背景。下一课我将介绍：微信小程序的特点和优势。请大家一定要努力学习，坚持下去。