H5设计与小程序开发有哪些不同点?
发布于 2023年12月06日来源:


微信小程序推出以后,尽管微信团队做了很多关于小程序的普及,但是还是有很多人不太理解,很多的误解就是把它等同于H5。小程序由于刚推出来时开放的能力十分有限,所以在功能展示上会让普通用户感觉和H5一样,并没有什么特别之处,导致了部分人把两者混为一谈。那么微信小程序开发和H5开发有哪些区别呢?


实际上,小程序和H5是两种不同的东西。HTML英文全称为Hyper Text Markup Language,即超文本标记语言。而HTML5是超文本标记语言的第五次修订版本。简单来说,小程序是一种应用,运行的环境是微信(App);H5是一种技术,依附的外壳是是浏览器。

1、开发成本的不同

H5的开发,涉及开发工具(vscode、Atom等)、前端框架(Angular、react等)、模块管理工具(Webpack、Browserify等)、任务管理工具(Grunt、Gulp等),还有UI界面设计选择、接口调用工具(ajax、Fetch Api等)、浏览器兼容性等等。

而开发一个微信小程序,由于微信团队提供了开发者工具,并且规范了开发标准,则简单得多。前端常见的HTML、CSS变成了微信自定义的WXML、WXSS,WXML,官方文档中都有明确的使用介绍,开发者按照说明专注写程序就可以了。

需要调用后端接口时,调用发起请求API;需要上传下载时,调用上传下载API;需要数据缓存时,调用本地存储API;引入地图、使用罗盘、调用支付、调用扫码等等功能都可以直接使用;UI库方面,框架带有自家weui库加成。并且在使用这些API时,不用考虑浏览器兼容性,不用担心出现BUG,显而易见微信小程序的开发成本相对低很多。


小程序设计


2、运行环境的不同

H5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,因为小程序的开发过程中只用到一部分H5技术。小程序的运行环境是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对性做了优化,配合自己定义的开发语言标准,提升了小程序的性能。

官方文档表明脚本内无法使用浏览器中常用的window对象和document对象(基于这一点,像zepto/jquery这种操作dom的库就被完全抛弃了)。不过微信给开发者提供了开发工具,内置了编程、调试、开发环境以及发布,开发者只需按照官方文档进行开发,就能保证小程序在微信内稳定运行。


不论是H5设计还是小程序设计,大家都可以选择蓝橙视觉,蓝橙视觉是专业的成都设计公司,欢迎咨询蓝橙视觉。