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

许多做产品的同学经常会有这样的疑问,计划开发的移动端产品到底是用 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 ]

原文发布于微信公众号 - 姬小光(hi-laser)

原文发表时间:2018-08-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

想用APP创业,那你要明白API的重要性?

每一家初创企业和公司都会有提供给世界的接口。有的接口超级简单,比如Google—你能做的只有搜索;有的复杂一点,比如在Amazon上面买东西—你可以浏览、搜索、...

3119
来自专栏数据的力量

如何订制个性化的网址导航

2524
来自专栏云计算D1net

公共云存储服务的可扩展性和性能

公共云存储服务供应商可帮助企业用户免于承担物理硬件及其相关成本的负担,其中包括能源、冷却以及服务器维护等。 很多企业都在使用公共云、私有云以及混合云这样的一个组...

3659
来自专栏熊二哥

《大型网站技术架构》学习笔记-01概述

李智慧老师的大型网站架构已经买了两年了,之前大体看过一次,不过还未内化为自己的本领,最近项目空闲,决定尽力掌握这部分的知识,以跟上大师的节奏。今天是儿童节,祝自...

2755
来自专栏IT大咖说

微信支付大规模前端开发背后,如何用外包解决困境

摘要 业务高速发展离不开各种配套运营系统的高效建设,微信支付也不例外。在前端人力极其匮乏的条件下我们另辟蹊径,大规模引入外包团队协同作业,并且在如何保证效率和质...

4426
来自专栏BestSDK

SDKBOX手游服务接入助手,扫开所有难题成就时代神话

编辑导语 技术不在于多,在于精。SDKBOX手游服务接入方案,让你分分钟搞定几周的工作,正所谓的“一分投入,十分收益”。技术竞争时代,你慢一步,就需要几年的时间...

3049
来自专栏程序员互动联盟

现在学习汇编还有用吗?

不止一个人觉得汇编语言现在应用的场景太少了,还在学习这门苦涩的语言还有多大的意义,现在汇编语言有多大用途,在当前这个高级语言越来越重要的年代,学习C语言的都不多...

2192
来自专栏企鹅号快讯

图解全宇宙最神秘团体——“程序员”的日常,是辛苦还是闷骚?

大家都知道,IT行业嘛,整天整天就是泡在电脑前,尤其是程序员们——“不是在写代码,就是在去写代码的路上”。很多程序员都以写代码为乐,当爱好和工作结合在一起的时候...

2247
来自专栏云计算D1net

采用存储即服务优化混合云平台

在混合云计算中,存储数据的位置对整体性能有重大影响。用户需要了解SaaS如何解决混合云数据管理和延迟问题。 通过云爆发的能力,混合云平台提供了巨大的计算灵活性。...

3985
来自专栏美团技术团队

初探下一代网络隔离与访问控制

概述 安全域隔离是企业安全里最常见而且最基础的话题之一,目前主要的实现方式是网络隔离(特别重要的也会在物理上实现隔离)。对于很小的公司而言,云上开个VPC就实...

5037

扫码关注云+社区

领取腾讯云代金券