专栏首页姬小光科普 | 一张表格告诉你,到底 H5 和小程序哪个好

科普 | 一张表格告诉你,到底 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),作者:姬小光

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一张图告诉你百度智能小程序与微信小程序到底有哪些区别?

     在2017年微信小程序诞生后的一段时间后,“小程序”在业内备受质疑,而一年后的今天,峰回路转,随着阿里、百度相继加入“小程序”的行列,曾经的“死海”秒变今日的...

    速成应用小程序开发平台
  • 用户凭啥要用小程序?我用 FOGG 模型分析了一下

    因为「优化」注定层出不穷,也导致其注定昙花一现。那么小程序是「app」形态的「优化」,还是一个和「app」完全不同的形态,是一种「颠覆」呢?

    知晓君
  • 微信小游戏

    好的,这种热点我是会蹭的,但是又说不出个所以然,所以简单聊两句。 微信小游戏是什么? 『不就是h5么?』 『对!没错!就是h5!』 好多技术仔跳起来,『不对!微...

    沙因Sign
  • 玩转H5微故事

    形式多种多样,目的无非是推广某一个东西--产品、活动抑或是品牌。怎么去推广呢?我们一般喜欢给用户讲一个故事。下面的截图是几个比较火热的H5案例,我们可以看到“首...

    腾讯大讲堂
  • 一姑娘从程序猿身上学到了这些东西

    一姑娘从程序猿身上学到了这些东西 ? 我曾经跟朋友开玩笑说,这个时代,有两种人的妻子应该要受人尊敬,第一种是军嫂,这是毫无争议的,第二种就是像我这样的,程序员的...

    用户1667431
  • 除了逃离北上广,新世相还做了个「不为人知」的小程序

    我们要学会促使自己注意生活中的美好事物,否则我们就会认为很多事是理所当然的。如果你每天都能心怀感恩,结果一定会让你惊喜。——奥普拉

    知晓君
  • 微信为什么要搞一个小游戏?

    众厂关于 H5 游戏市场的争夺,自 2014 年以来,一直就没有停止过。但一直也没有尘埃落定,最终花落谁家,鹿死谁手现在还不好讲。微信推出小程序,继而推出小游戏...

    程序员LIYI
  • 工薪家庭出来的孩子,如何跨越阶层?

    最近在知识星球看到有人提问,「一个工薪家庭出来的孩子,未来选择什么样的本科专业才能过上体面的中产生活呢?」

    闰土大叔
  • 十年的老代码,你敢动吗?

    你入职一家新单位,被告知需要维护一个老产品,经理找质管给你开通了SVN权限,告诉你迁出哪个分支——就是那个十年前已经定型的分支,就是那个超过6代程序员维护过的分...

    CSDN技术头条
  • 独家专访!这个刷爆朋友圈的小程序,是这样获得千万用户的

    这款小程序名叫「实用心理测试大全」,通过它你可以进行一些有趣的心理测试,比如「你的左右脑分别有几岁?」、「重新高考,你能考多少分?」等。

    知晓君
  • 腾讯暑期实习-产品运营面经

    牛客网
  • 【游戏心得】想入H5游戏圈 你应该先了解这些基础知识

    [摘要]H5游戏的历史可以追溯到2010年,当时还未过世的乔布斯宣布苹果系统将不支持Flash,引得一片哗然,为此,乔布斯特意写了一篇《关于Flash的几点思考...

    李海彬
  • 数据可视化:一场设计狮与程序猿的相爱相杀 | 数据侠实验室15期

    可视化震撼视觉的背后,是设计师与程序员思想的结晶,也是数据和信息多样化的视觉传达。那么,这一张张炫酷图表是如何实现价值创造呢?本期数据侠实验室,由各路大神为你开...

    DT数据侠
  • 重磅!谷歌2020学术指标发布:CVPR排名超Cell和Nature子刊,ACL首进TOP 100

    虽然谷歌学术每年都会出这样一期榜单,但今年的榜单,对AI学界和业界尤为重要!为什么这么说呢?

    新智元
  • 【涨姿势】绝不装逼的大数据科普(一)

    那就从去年9月说起,花正好, 月正圆的时候,桑尼在西班牙巴塞罗那听过一个大数据的课程(是的,您没看错,我跑去建筑鬼才高迪的城学习大数据。。。) 那个西班牙叫兽...

    小莹莹
  • 还是大数据,还在窃取用户信息,特朗普带“剑桥分析2.0”重返大选,这招还管用吗?

    截至目前的民调统计,特朗普虽然在白人中的支持率下降了,但是在黑人、拉丁裔和亚裔群体中的支持率,不降反升。

    大数据文摘
  • 干货 | 携程酒店小程序开发背后的“黑科技”

    本文将分享携程酒店小程序的一些开发经验, 和一些非技术的经验。这里的小程序包括微信小程序,支付宝,百度,头条。快应用因为与这些小程序的体系截然不同,就不放进来讨...

    携程技术
  • 聊一聊刷爆朋友圈的测试题逻辑

    导语 关于朋友圈频频刷屏的答题类H5是否非常羡慕不已呢?其中有什么门道和诀窍吗? 今天来给大家分析一下,那些刷屏的H5的逻辑以及题库设置的逻辑。

    腾讯大讲堂
  • 内含福利 | 我们“偷”来了一座航站楼。9.21, HAY!18等你来候机!

    量子位将作为本次活动的特约合作伙伴参与,还特地为大家准备了20张免费票 (≖ᴗ≖)✧

    量子位

扫码关注云+社区

领取腾讯云代金券