微信小程序与 H5 的区别是什么?一文读懂

2024-05-30
来源:网络整理

微信小程序和H5有什么区别?随着H5技术的兴起,微信小程序开发也逐渐走入了大家的生活。可能有人不知道微信小程序是什么,其实微信小程序就是微信内置的一个APP。那么微信小程序和H5有什么区别呢?微信小程序和H5有什么区别呢?

第一:运行环境不同

传统的运行环境是浏览器,包括,但是微信小程序的运行环境并不是一个完整的浏览器,请注意我这里写的是“不完整的浏览器”,原因如下:

小程序开发中会用到的相关技术(并非全部)

小程序最终发布需要微信审核,微信无需更新自家软件,即可将小程序更新为自家软件。这个跟框架有关系,有开发者发现微信小程序开发工具源码使用了该库

官方文档强调,浏览器常用的对象和对象不能在脚本中使用(基于此,类似 / 这样操作DOM的库被彻底废弃)

因此个人认为小程序的运行环境很有可能是微信开发团队基于浏览器内核完全重构的内置解析器,专门针对小程序进行优化,并结合自身定义的开发语言标准,提升小程序的性能。

不过,由于微信为开发者提供了开发工具,其中也包括编程、调试、开发环境、发布等,所以我们不需要讨论其最终的运行环境,只要按照官方文档进行开发即可。而微信团队向开发者提供开发工具的举动,让我想起了苹果为开发者提供的X-CODE开发工具。可想而知,微信的“野心”可见一斑。

第二:开发成本不同。

这里我提出一个问题,当我们面对一个Web开发需求时,我们需要考虑什么?抛开开发工具(、、Atom等),从前端框架(、、vue等)、模块管理工具(、、等)、任务管理工具(、、Gulp等),到UI库的选择,接口调用工具(ajax、Api等),浏览器兼容性等等,都要一一考虑。最起码,我们写H5还要使用插件,开发过程中还要寻找合适的插件配合项目。虽然这些工具可定制性强,提高了开发者的开发效率,但我相信项目开发的配置工作耗费了不少精力,虽然大部分开发者都有自己的配置模板,但项目用到的各种外部库的版本迭代、版本升级的成本,长期下来应该不低。

当我们面对微信小程序的开发需求时,我们需要考虑什么?微信团队提供了开发者工具,统一了开发标准。前端常见的 HTML、CSS 都变成了微信定制的 WXML 和 WXSS。虽然 WXML 标签都是定制的,但是官方文档里有明确的使用说明,上手应该非常容易;WXSS、JSON、JS 文件中的写法稍有限制,但总体差别不大。统一了这些标准之后,作为开发者,你会发现只需要专注于写程序:

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

当需要上传和下载时,调用上传下载API

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

导入地图、使用指南针、调用支付、调用扫码等功能均可直接使用

UI库方面,框架自然自带weui库加成

而且在使用这些API的时候,你不用再担心浏览器的兼容性问题,也不用担心生产环境出现意外的bug,可见微信小程序的开发成本相比以前的网页开发确实低了很多。

第三:获取系统级权限的区别。

相较于网页应用,微信小程序能够获取更多的系统权限,例如网络通信状态、数据缓存能力等,这些系统级别的权限可以和微信小程序无缝对接,也就是官方宣称的拥有App的流畅表现。而这也正是网页应用经常被诟病的地方,这也是为什么大部分应用场景被定位为业务逻辑简单、功能单一。

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

这是用户和开发者最直观的感受。长期以来,应用在面对复杂的业务逻辑或者丰富的页面交互时,体验总是不尽如人意,需要不断的项目优化来提升用户体验。但由于微信小程序拥有独立的运行环境,虽然也是使用 html+css+js 开发,但借助微信的解析器,最终渲染出来的是原生组件的效果,自然体验会进一步提升。

微信小程序和H5有什么区别?微信小程序和H5有什么区别?希望这些对大家有帮助。

分享