百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

H5 和小程序的区别(小程序和h5有啥区别)

bigegpt 2024-11-15 16:26 4 浏览

什么是小程序?

从“微信之父” 张小龙的定义里,我们可以了解到,小程序其实就是内嵌在微信,不需要安装和卸载的一种新应用形态。它具备的两个强属性:提高效率,用完即走!因此小程序的设计以轻便、快捷为原则,鼓励用户“即用即走”!

注意:除了微信小程序,还有百度小程序、微信小程序、支付宝小程序、抖音小程序,都是每个平台自己开发的,都是有针对性平台的应用程序。以为目前主流的就是微信小程序,所以下文中的小程序都默认指代“微信小程序”!

小程序因为内嵌再微信里,所以它的运行只能依赖微信客户端,也就是说只能在微信里打开。

什么是 H5?

H5,也就是“HTML5”,指“HTML”的第 5 个版本。众所周知“HTML”是”超文本标记语言”,是一门描述网页的标准语言,所以 HTML5 也是一种网页技术,而且是更高级的网页技术,包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

所以,H5 本质上可以理解为是一个网页!

既然 H5 是网页,那么依赖的外壳主要是浏览器,因此只要有浏览器,就可以使用。比如手机内置的浏览器,APP 的 web-view 组件,以及小程序提供的 web-view 组件,都可以打开 H5 页面。

小程序和 H5 的区别

其实从以上的概念的解释里我们已经能看出来一些基本的区别了。那么接下来,我们就从原理和应用等方面,来分别对比一下小程序和 H5 的不同之处。

一、从开发的角度

H5 和小程序的开发工具就非常不同,小程序都是依赖于微信客户端的,所以相对来说开发工具没有 H5 那么多;

而且两者的开发语言也都是不同的,微信小程序有自己的一套标签与样式语言,与标准的 H5 语言是不一样的;而且还独立了很多的原生 app 的组件,所以它在组件封装上面与 H5 也都是有所不同的。

因此,开发一个 H5,需要从开发工具、前端框架、模块管理工具、任务管理工具,还有 UI 库选择、接口调用工具、浏览器兼容性等等,都需要考虑周到。尽管大多数开发者面对这些工具时,都有了自己的配置模板,但成本依然不低!

微信小程序的开发使用了改自 js、CSS、HTML 的语言,同时提供了各种自有的组件和 API,是一套为微信量身打造的自定义的语法。因此,不用担心浏览器的兼容性,不用担心莫名其妙的 bug,而且在微信中小程序的使用体验比普通 H5 更加顺畅、快捷。

所以,小程序的开发成本比以往的 HTML5 开发的 Web 成本低很多。

二、从运行环境来看

客户端运行环境:

H5 因为是网页,所以运行环境主要是浏览器;
微信小程序运行环境是属于计算机程序,配合自己定义的开发语言标准,大幅提升了小程序的流畅度和性能。

服务器配置:

因为小程序的性能会 H5 高一些,所以服务器的配置要求上来说,小程序的要求要比 H5 更高一些。

三、系统权限

因为微信能获取到更多的系统权限,如网络通信状态、数据缓存能力等,这些系统级权限都能与微信小程序无缝衔接,这也就是官方宣称的微信小程序能够拥有 Native App(原生 APP)的流畅性能。

而 H5 Web 应用对系统本身的权限的获取则相对少了很多,这一点恰巧是 H5 Web 应用经常被诟病的地方。也因此,H5 的大多数应用被圈定在业务逻辑简单、功能单一的范围上。

四、用户体验

1)性能体验

我们在打开一个 H5 页面的时候,实际上就是打开一个 Web 网页,之前在 PC 上浏览网页没区别,每次要请求各种图片样式资源,在浏览器内核里渲染,这个过程叫做加载,无论加载的时间的长短,都会给用户一种”卡“或者“不灵敏”的感觉,体验是会比较差一些的;

而小程序是微信内的云端应用,通过 WebSocket 双向通信(保证无需刷新即时通信)、本地缓存(一旦首次打开小程序可以直接缓存很多资源和图片,降低与服务器交互延时)以及微信底层技术优化实现了小程序接近原生 APP 的体验。所以在使用小程序的时候,同等网络条件下几乎不用等待,可以像操作普通 app 一样流畅。

小程序的优越性体现在既保留了 H5 开发的便利和灵活性,又可以达到媲美 Native 体验。

2) 视觉体验

H5 的动画效果更丰富,自由度更高一些,功能更强

五、使用场景

1)打开的方式:就如上面概念里提到的,小程序只能在微信里打开,而 H5 页面可以借助微信的环境下扫码或点击链接打开在任何浏览器里打开,所以,如果产品需要通过短信通知用户带上访问地址,就无法用小程序实现了;而 H5 可以在短信正文中直接用手机内置浏览器打开。

2)分享的方式:由于微信本身的策略的限制,H5 在微信里可以直接分享到朋友圈;而小程序就只能生成带小程序码的图片发到朋友圈,不如 H5 便捷;但是对于分享到好友或群,小程序提供了卡片式的分享界面,信息多而且看起来很高端,这个效果 H5 是无法做到。

3)支付能力:因为小程序是内嵌在微信里的,所以支付只支持微信支付;而 H5 里可以选择使用其他支付平台提供的支付方式,因此 H5 的支付方式更加的多样化。

**4)导流量功能:**用户都在微信上,愿意花钱的用户也在微信上那我把我的服务也做到微信上就可以获取更多客户了;小程序依附于微信,配合微信 11 亿用户的社交网络,越来越开发者选择微信小程序的技术的。

据小程序团队透露,目前已经 50 万 + 的开发者在从事实际的开发,小程序已经成为移动互联网领域“事实”的标准。伴随着这种趋势,阿里、百度分别在 2017 年的 8 月和 2018 年的 3 月启动了自己的小程序项目,围绕着支付宝和手机百度 APP 几个超级 APP 在移动互联网领域再次攻城略地。小程序已然成为近几年最炙手可热“现象级”技术。

5)追踪用户行为: 小程序还有一个优势,就是通过小程序的分享转发,每一次谁转发了,到了哪里,谁点开看了这些信息我们都是可以知道的,通过此可以知道用户和身边朋友对品牌的喜好。这个信息是过去 APP 电商、PC 互联网电商做不到的,基于社群化的分享和交流可以知道社群消费力是怎么样的情况,喜欢什么样的品牌,什么样的方式更合适。通过这样的信息收集背后有算法可以比较精确地推荐计算,这些东西的确是在 APP 上、H5 上做不到的。

总结

综上所述,两者各有千秋,没有绝对的优势和劣势,只有更加适合的使用场景。所以根据自己产品的需求和目的,去选择最适合自己的方式即可。

不过根据预测,未来的应用的主流趋势可能是像微信、QQ、微博、支付宝、淘宝、手游这样的功能强大且高频次使用的 APP 会保留在手机上,诸如外卖、团购、出行等及时性功能的软件会被移植到微信或支付宝这样的平台上作为小程序的形式存在。

相关推荐

悠悠万事,吃饭为大(悠悠万事吃饭为大,什么意思)

新媒体编辑:杜岷赵蕾初审:程秀娟审核:汤小俊审签:周星...

高铁扒门事件升级版!婚宴上‘冲喜’老人团:我们抢的是社会资源

凌晨两点改方案时,突然收到婚庆团队发来的视频——胶东某酒店宴会厅,三个穿大红棉袄的中年妇女跟敢死队似的往前冲,眼瞅着就要扑到新娘的高额钻石项链上。要不是门口小伙及时阻拦,这婚礼造型团队熬了三个月的方案...

微服务架构实战:商家管理后台与sso设计,SSO客户端设计

SSO客户端设计下面通过模块merchant-security对SSO客户端安全认证部分的实现进行封装,以便各个接入SSO的客户端应用进行引用。安全认证的项目管理配置SSO客户端安全认证的项目管理使...

还在为 Spring Boot 配置类加载机制困惑?一文为你彻底解惑

在当今微服务架构盛行、项目复杂度不断攀升的开发环境下,SpringBoot作为Java后端开发的主流框架,无疑是我们手中的得力武器。然而,当我们在享受其自动配置带来的便捷时,是否曾被配置类加载...

Seata源码—6.Seata AT模式的数据源代理二

大纲1.Seata的Resource资源接口源码2.Seata数据源连接池代理的实现源码3.Client向Server发起注册RM的源码4.Client向Server注册RM时的交互源码5.数据源连接...

30分钟了解K8S(30分钟了解微积分)

微服务演进方向o面向分布式设计(Distribution):容器、微服务、API驱动的开发;o面向配置设计(Configuration):一个镜像,多个环境配置;o面向韧性设计(Resista...

SpringBoot条件化配置(@Conditional)全面解析与实战指南

一、条件化配置基础概念1.1什么是条件化配置条件化配置是Spring框架提供的一种基于特定条件来决定是否注册Bean或加载配置的机制。在SpringBoot中,这一机制通过@Conditional...

一招解决所有依赖冲突(克服依赖)

背景介绍最近遇到了这样一个问题,我们有一个jar包common-tool,作为基础工具包,被各个项目在引用。突然某一天发现日志很多报错。一看是NoSuchMethodError,意思是Dis...

你读过Mybatis的源码?说说它用到了几种设计模式

学习设计模式时,很多人都有类似的困扰——明明概念背得滚瓜烂熟,一到写代码就完全想不起来怎么用。就像学了一堆游泳技巧,却从没下过水实践,很难真正掌握。其实理解一个知识点,就像看立体模型,单角度观察总...

golang对接阿里云私有Bucket上传图片、授权访问图片

1、为什么要设置私有bucket公共读写:互联网上任何用户都可以对该Bucket内的文件进行访问,并且向该Bucket写入数据。这有可能造成您数据的外泄以及费用激增,若被人恶意写入违法信息还可...

spring中的资源的加载(spring加载原理)

最近在网上看到有人问@ContextConfiguration("classpath:/bean.xml")中除了classpath这种还有其他的写法么,看他的意思是想从本地文件...

Android资源使用(android资源文件)

Android资源管理机制在Android的开发中,需要使用到各式各样的资源,这些资源往往是一些静态资源,比如位图,颜色,布局定义,用户界面使用到的字符串,动画等。这些资源统统放在项目的res/独立子...

如何深度理解mybatis?(如何深度理解康乐服务质量管理的5个维度)

深度自定义mybatis回顾mybatis的操作的核心步骤编写核心类SqlSessionFacotryBuild进行解析配置文件深度分析解析SqlSessionFacotryBuild干的核心工作编写...

@Autowired与@Resource原理知识点详解

springIOCAOP的不多做赘述了,说下IOC:SpringIOC解决的是对象管理和对象依赖的问题,IOC容器可以理解为一个对象工厂,我们都把该对象交给工厂,工厂管理这些对象的创建以及依赖关系...

java的redis连接工具篇(java redis client)

在Java里,有不少用于连接Redis的工具,下面为你介绍一些主流的工具及其特点:JedisJedis是Redis官方推荐的Java连接工具,它提供了全面的Redis命令支持,且...