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

23 评论 57616 浏览 473 收藏 13 分钟

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

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

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

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

一、运行环境

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

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

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

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

二、系统权限

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

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

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

三、能力限制

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

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

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

四、用户体验

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

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

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

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

五、访问入口

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

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

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

六、用户触达

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

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

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

七、开发成本

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

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

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

八、迭代周期

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

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

九、外部限制

由于小程序依赖微信平台,因此微信平台要对内容安全等事项负责,比如你想搞个有 UGC 的产品,用 H5 可能还可以趁着监管宽松无证裸奔一阵,或者说做大了再补证。

而小程序,就很可能完全不能过审,根本上不了线。比如试听类,社交类,都有对应的资质,而这个资质还可能很难获得。

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

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

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

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

 

作者:姬小光,微信公众号“姬小光(ID:hi-laser)”

本文由 @姬小光 原创发布于人人都是产品经理。未经许可,禁止转载。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. h5优点是自由 缺点体验差功能少,那种快速更改没那么重视体验的可以用h5

    来自广东 回复
  2. 小程序是支持短信打开的呀

    来自江苏 回复
  3. 补充下,Android微信小程序目前是支持分享到朋友圈的。https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html

    来自北京 回复
  4. 补充下:目前短信链接可以直接打开微信小程序

    来自上海 回复
  5. 1. 性能上不能直接绝对的说弱还是强。从测试数据看,因为小程序加载问题,点访率与小程序的绝对值会底5个点。
    2. 当业务范围不仅是微信体系的时候,使用H5相对小程序,有较低的开发成本。

    来自北京 回复
  6. 感谢分享,也感觉下面那位官方提示同学。哈哈

    来自四川 回复
  7. 部分内容可更新下,目前小程序可直接分享朋友圈了

    来自贵州 回复
    1. 不可以吧,小程序分享朋友圈还在内测中

      来自安徽 回复
  8. 感谢分享!

    来自广东 回复
  9. 写的非常好,但我面临的大多数问题都是小程序和APP怎么选,希望能有类似文章

    来自四川 回复
    1. 有完整的推广渠道,推广强,又要性能和多方位的支付能力,以及用户行为采集能力,如果应用还包括了很多文件上传之类,就要选APP,小程序,H5对这些功能要求都限制很大,小程序依赖的是微信的公有流量,app是私有流量,H5就是涂个方便,小程序的用户行为收集,全看微信接口,所以很多数据不能获取,自己做埋点是不行的

      来自福建 回复
  10. 感觉这篇文章可以更新一下了

    来自中国 回复
  11. 就私域流量来说,小程序应该比H5体验更好

    来自安徽 回复
  12. 小程序的开发工具实在是low 不像h5配套成熟

    来自江苏 回复
  13. QAQ但是我们的前端开发评估,小程序开发要比H5开发费事,为啥呀,因为自己的H5开发以及规范化流程化了,而小程序要写原生嘛?

    来自广东 回复
    1. 当前的小程序已经适配了webview支持h5嵌套,但这个显示效果肯定没有原生的好

      来自广东 回复
    2. 来自北京 回复
  14. 感谢啊,学习了

    来自重庆 回复
  15. 正好这几天,着手选择 H5 还是小程序,感谢楼主分享

    来自山东 回复
  16. 感谢,学习了。

    来自湖南 回复
  17. 感谢分享~

    来自上海 回复
  18. 有用,感谢。

    来自北京 回复
  19. 学习了,感谢

    来自广东 回复