Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >科普 | 一张表格告诉你,到底 H5 和小程序哪个好

科普 | 一张表格告诉你,到底 H5 和小程序哪个好

作者头像
姬小光
发布于 2018-09-05 02:55:31
发布于 2018-09-05 02:55:31
1.9K0
举报
文章被收录于专栏:姬小光姬小光

许多做产品的同学经常会有这样的疑问,计划开发的移动端产品到底是用 H5 好还是用小程序好,甚至很多开发同学也搞不清楚这两者在具体使用中的优劣。那么相信读完此篇,便可让你对二者之优劣利弊了然于胸,再也不必纠结。

其实,大体上来讲,这两者并不具备什么可比性。只是很多移动端的场景下,这两种选择都能实现产品的大部分功能,加之其各领风骚好几年,就更难抉择了。

我们经常说的 H5 是一种不标准的叫法,可以理解为只是一种技术,大家说得最多的 H5 主要是指用在移动端的网页,其实 PC 电脑版也一样可以使用 H5 技术。而小程序,这里特指微信小程序,是在微信 APP 基础上支持的一种应用形式,完全依赖于微信 APP 环境。

以上,是大概念上的区分,下面,我们就来详细对比一下其他方面。

1. 运行环境

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

注意,小程序的 web-view 可以打开 H5,但并不是小程序“跳转”到了 H5 页面,这个 H5 还是小程序的外壳内,仍然有很多限制。

前面说了,小程序只能依赖微信客户端,也就是说只能在微信里打开。那么,如果你的产品需要通过短信通知用户带上访问地址,就无法用小程序实现了。而 H5 页面,则可以在短信正文中直接用手机内置浏览器打开。

但是,微信本身是跨平台的,因此无论是安卓上的微信,苹果上的微信,都是可以使用小程序的。甚至 QQ 浏览器也支持了部分小程序的入驻。

H5

小程序

运行环境

浏览器,web-view

微信 APP

2. 系统权限

这里的系统权限,可以理解为隐私级别比较高的,如通讯录,或能调用硬件的,比如蓝牙功能等。从这个角度看,H5 本身可以说几乎是没有什么系统权限的。虽然也有摄像头之类的接口,但是重度依赖浏览器能力,兼容性有限。

而小程序,由于依赖微信客户端本身,所以微信小程序团队将客户端的很多能力开放给了小程序环境,当然,前提是你给微信也授权了相关的能力,比如允许访问麦克风,允许访问相册等。

所以,如果你的产品重度依赖这些能力,那小程序一定是不二之选,因为 H5 很难做到这些,对于很多小程序提供的能力,H5 是根本没有可能实现的。

H5

小程序

系统权限

3. 能力限制

前面提到了系统权限层面的差异,其实也是一种能力限制。除此之外,还有一些能力是微信本身的策略限制的,比如 H5 在微信里可以直接分享朋友圈,而小程序目前就只能转发好友或群。对于朋友圈,就只能生成带小程序码的图片发到朋友圈。

而对于分享到好友或群,小程序又提供了卡片式的分享界面,看起来很高端,信息也多,并且能追踪用户行为。这一点,H5 又无法做到。

再比如支付能力,小程序只支持微信支付,而 H5 里可以选择使用其他支付平台提供的支付方式。

H5

小程序

直接分享朋友圈

不能

扫码识别

支付能力

多种

微信支付

4. 用户体验

分享卡片看上去比普通的 H5 链接分享体验要好;而朋友圈的 H5 分享形式,和图片识别小程序码的形式到底哪个好也不好说。不过,如果你的产品被判定有违规行为,那么 H5 的链接是很容易匹配屏蔽的,可以直接导致分享 H5 页面只能自己可见,别人看不到。

但是,小程序的分享图虽然不太可能封禁,但小程序是微信的呀,那还不是分分钟就关掉。所以在抗风险方面,二者各有千秋。如果是 H5,那就多准备几个域名;如果是小程序,就直接多上线几个小程序,保证封禁时损失降到最低。

除了形式上的体验差异,性能上也是有差异的。小程序基于微信客户端实现,对解析进行了优化,并且一旦首次打开小程序,可以直接缓存很多资源。因此,在使用小程序时可以明显感觉很流畅,接近原生 APP 的体验。

而 H5 本质上还是网页,跟之前在 PC 上浏览网页没区别,每次要请求各种图片样式资源,在浏览器内核里渲染,因此体验会差一些。

H5

小程序

流畅度

一般

5. 访问入口

在访问入口这个点上,H5 的核心竞争力就是能在微信之外玩,不依赖微信本身。而小程序的优势,就是有 50+ 微信提供的场景入口,并且聊天界面顶部的“最近使用”和“我的小程序”这个入口,相对 H5 来说是有绝对优势的。

用户关闭之后,H5 页面如果想继续访问,可能会通过收藏入口,或者转发给“文件传输助手”等聊天界面保存,还可以缩小到图标稍后阅读等等。本质上还是跟 PC 时代的浏览器收藏夹差不多,需要有个地方把 H5 的链接地址保存下来,方便下次访问。如果没有保存,下次就很难找到了。

至于微信内的搜索,是可以同时搜索 H5 和小程序的,可以根据 H5 的名字和内容、小程序的名字和介绍来搜索。这里 H5 有个天然优势就是,只要你的链接在各大搜索引擎提交过,那么使用其他的搜索引擎也能搜出这个 H5,比如百度搜索。

H5

小程序

入口数量

专属入口

6. 用户触达

H5 本身是没有用户触达能力的,如果用户关掉了页面,页面就再也没有办法主动触达该用户了。因此,传统的营销方式都是采用邮件营销或短信营销等来触达用户。

后来,我们有了微信服务号,就多了服务号模板消息的触达方式。不管是哪种方式,都是想方设法把链接地址推送给用户,用户点击时再通过手机内置浏览器或微信内置浏览器访问页面。

而小程序天然支持模板消息,虽然有一周的推送时间限制,但是常规的业务已经足够了。只要用户使用你的小程序,你就可以通过某种操作收集 formid,然后即可在一周之内的任意时间触达用户。

H5

小程序

主动触达渠道

短信

微信

短信触达

文字链接

文字引导微信搜索

7. 开发成本

对于简单功能,H5 和小程序的开发成本是差不多的,开发模式和语言风格也类似。而对于前面说到的系统能力,可能就只有小程序才能实现,H5 根本做不了。此外,小程序自成体系,因此也有一些现成的组件可以使用,如果刚好覆盖了你的产品功能就能提升效率。

虽然 H5 也有很多框架组件可以用,但由于过于庞杂,有选择成本,且技术栈和 UI 五花八门,可能还有融合和修改的成本。而小程序组件的 UI 大部分已经确定,只有很少的部分可以修改,所以一旦认定使用小程序,这部分成本会低很多。

总体上来讲,我觉得还是可以认为小程序的开发成本更低一些。

H5

小程序

简易功能成本

系统功能成本

8. 迭代周期

开发成本低,未必迭代周期就短。对于 H5 我们可以随时发布上线,不用受任何牵制。而小程序的特点,就是每次提交版本都要经过微信方面的审核,且审核时间的长短很随机,着急上线的项目就很无奈了。

至于其他速度,取决于开发人员技能熟练程度,系统复杂度,对基础能力的依赖等,就不好估算了。

H5

小程序

迭代周期

较长

9. 外部限制

由于小程序依赖微信平台,因此微信平台要对内容安全等事项负责,比如你想搞个有 UGC 的产品,用 H5 可能还可以趁着监管宽松无证裸奔一阵,或者说做大了再补证。而小程序,就很可能完全不能过审,根本上不了线。比如试听类,社交类,都有对应的资质,而这个资质还可能很难获得。

类似的,H5 页面可以不用搞 HTTPS,有个网站就能玩,甚至用工具做个小活动也都可以玩。但是小程序,从后端开始就有限制,要求域名备案+HTTPS,一定程度上也是一点成本。

此外,小程序对文件大小也有限制,虽然现在已经支持分包加载,但是在文件大小方面,H5 本身是没有什么限制的。只是实际开发的时候,要照顾用户的体验,不能让页面打开太慢。

H5

小程序

外部限制

较少

综上所述,H5 和小程序在不同的场景下各有千秋,具体使用哪一种要看你看重哪些能力。H5 和小程序都是实现产品的工具,选择工具最擅长的能力,其他方面再想办法来弥补即可。最后,再附上完整表格一份,看你是否已经明了二者的差异:

H5

小程序

运行环境

浏览器,web-view

微信 APP

系统权限

直接分享朋友圈

不能

扫码识别

支付能力

多种

微信支付

流畅度

一般

入口数量

专属入口

主动触达渠道

短信

微信

短信触达

文字链接

文字引导到微信

简易功能成本

系统功能成本

迭代周期

较长

外部限制

较少

如果你还有其他疑问,欢迎留言与我交流。

作者 | 姬小光 来源 | 姬小光 [ ID: hi-laser ]

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-08-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 姬小光 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
FinClip小课堂|H5 和小程序到底哪个好?
许多做产品的同学经常会有这样的疑问:计划开发的移动端产品到底是用 H5 好还是用小程序好?甚至很多开发同学也搞不清楚这两者在具体使用中的优劣。希望这篇文章,能够给你带来些许帮助
凡泰极客
2021/11/16
1.3K0
FinClip小课堂|H5 和小程序到底哪个好?
H5与小程序技术方案比较
记录下H5与小程序技术方案的主要差异 H5 小程序 运行环境 浏览器/webview 三种环境:IOS(JSCore+WKWebView)安卓(JSCore+Chrome57/V8+Chrome67)开发者工具(nw.js+Chrome60) 系统权限 弱(重度依赖浏览器、兼容性有限) 强(微信开放API蓝牙、WiFi、NFC、罗盘...) 直接分享朋友圈 能(分享链接容易被屏幕) 不能(分享卡片的体验好) 扫码识别 能 能 支付能力 多种 微信支付 性能 一般(需要请求很多资源) 好(微信做了解析优化
薛定喵君
2019/11/05
8880
移动端产品比较分析:APP、小程序、H5
01、运行环境 ​(1)APP:Android 和 iOS 手机操作系统。 (2)小程序:微信 APP 内。 (3)H5:浏览器、APP 和小程序的 web-view 组件内。
葆宁
2019/12/26
2K0
移动端产品比较分析:APP、小程序、H5
大前端:H5和小程序的区别
H5和小程序不具备可比性,只是很多移动端的场景下,两种选择都能实现产品的大部分功能。最近几年,小程序的兴起,让人们理解他等同于H5,其实不然。
Freedom123
2024/03/29
2290
H5和小程序测试分析
最近接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面和小程序的一些通用测试方法进行总结分享给大家。
Meccer
2021/09/14
9060
H5和小程序测试点剖析
最近接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面和小程序的一些通用测试方法进行总结分享给大家。
测试小兵
2023/03/08
6920
H5和小程序测试点剖析
微信小程序的面试题_小程序面试题汇总
一、WXML (WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件。与html差不多。
全栈程序员站长
2022/08/03
9210
微信小程序的面试题_小程序面试题汇总
对于H5和小程序,知多少?
微信小程序和微信的原生功能应用在本质上是一样的——它们都是Web App。Web App就是一种通过H5页面技术实现的,和Native App的功能和界面几乎一样的手机App形态。很多商家和企业为了节省技术人员和资金的投入,都会选择使用Web App制作工具,免费快速制作自己的Web App。
用户6367961
2019/09/29
1.5K0
「一道面试题」小程序与H5的区别
面试题,在各个技术社区里都是一个永不落伍的话题,好像大多数人临面试前都会狂刷面试题,恨不得把所有面试题都看一遍,要说有用没,当然有用,因为大部分面试题确实可以助力面试者,而且刷面试题对技术积累和视野提升也是有真实帮助的,可不只是面试有用
isboyjc
2022/03/28
7550
「一道面试题」小程序与H5的区别
小程序的优点分析
我们可以把微信看作是一个独立终端,它的通讯录维度是远超其他应用的。其实我们手机里的通讯录早已不再是手机原生通讯录,而是微信通讯录,关系链的丰富程度也提升了很多——原来我们只有几十几百个熟人,只有熟人关系,现在还有半熟人关系;原来只能点对点通讯,现在可以通过群和朋友圈点对面交流。基于关系链的传播带来了更多的机会,而这背后其实是两类流量机会:
中微信通
2018/09/08
1.3K0
小程序的优点分析
微信小程序web-view的简单思考和实践
Jianbo
2018/01/08
1.8K0
微信小程序web-view的简单思考和实践
微信小程序调起H5页面支付的全流程解析与实战
咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE相关知识点了,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~
bug菌
2024/12/30
1.3K1
微信小程序调起H5页面支付的全流程解析与实战
H5商城与小程序商城哪个好_应该怎么选择_OctShop
h5商城是以h5网页为主要载体,类似于手机端网站,实现了商城的诸多功能,如:商品发布展示,在线支付,购物车,订单管理,物流查询跟踪等功能。小程序商城是依托于微信小程序,在微信小程序上实现商城的一系列功能和业务逻辑。
OctShop大型商城源码
2022/06/29
1.1K0
H5商城与小程序商城哪个好_应该怎么选择_OctShop
目录 第1章 = new 图说小程序(思维导图);
写在前面: 本来想写一本关于小程序的书,后来各种原因又放弃了,目录和第一章都基本写完了。不能埋没了我写的东西,见见光。哈哈。 第1章认识小程序 “微信之父”张小龙在朋友圈里这样解释道:小程序是一种不需
java思维导图
2018/03/15
8940
目录 第1章 = new 图说小程序(思维导图);
第二十一期:基于Taro的多端(小程序+H5)开发实践
通过一套代码,一套业务代码,构建成不同的端(H5/小程序),满足代理人平台多端的业务场景,并为接下来的要开发的项目积累经验。
terrence386
2022/07/15
4K0
第二十一期:基于Taro的多端(小程序+H5)开发实践
小程序容器对App开发的改变
移动开发平台是企业的移动应用门户APP,是企业的超级APP,只要一个移动开发平台,就能够管理发布的原生应用和H5轻应用。前后端一体化的平台让企业不再需要从零开始开发APP与后台服务,只需要开发并交付一个业务应用就能够使用。所以当下,对于企业而言更愿意选择一个能够支持快速移动应用集成发布的开发平台,让自己的业务系统快速移动化、数字化。开发团队也在不断地寻求既能满足企业当前需求又能适应未来需求变化的移动开发平台,为移动开发、测试、运营及运维提供云到端的一站式解决方案,有效降低开发技术门槛、减少平台研发成本、提升开发效率,协助企业快速搭建稳定高质量的移动应用。
pak
2022/09/14
5870
有了H5,为什么还要用小程序做营销?
之前的文章中有讨论到小程序营销模板的应用,今天就给大家分享一些0代码实现小程序营销活动搭建的实用干货。
Lydiasq
2023/03/28
1.4K0
有了H5,为什么还要用小程序做营销?
小程序容器提升移动研发效率的经验
个人觉得在数字化转型时代,“数字化转型”似乎成为每家企业都在大讲特讲的关键词。可是对于很多企业来说,数字化也就是一个比较时髦说法而已,换了个马甲罢了,反正就是搞科技、建系统。移动互联网盛行之后,就是搞App。但是真正符合数字化时代特点的App,技术上是不能单纯的走信息化、Web1.0时代的老路,技术特点至少要体现3个能力:快速的迭代能力、强有效的连接能力、多点触达用户的多端能力。
Onegun
2022/07/27
3860
小程序容器提升移动研发效率的经验
移动研发提效?小程序容器技术来帮忙!
我们正处于信息化时代,在这个时代,移动应用开发行业蓬勃发展。从早期的Java设备、塞班设备上的应用开发,到现在的安卓设备、ios设备等移动应用开发,移动应用的功能不断拓展。现在的移动应用对研发效率有很高的需求,不仅追求应用本身功能实现,也要求应用具有多点触达用户的多端能力。
Lydiasq
2022/12/14
5080
移动研发提效?小程序容器技术来帮忙!
小程序的昨日与今天
当我们在今天讨论小程序时,到底与 5 年前的小程序有哪些不同,又发生了什么新的改变?
Onegun
2021/10/27
5690
小程序的昨日与今天
相关推荐
FinClip小课堂|H5 和小程序到底哪个好?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档